Карусель в блоге. Часть 1.

Март 16, 2010 | minimus
Рубрика: Блоггинг, Виджеты, Виджеты (Blogger)

Всё чаще и чаще блоггеры используют карусель анонсируемых статей на главных страницах своих блогов. И неудивительно. Ведь данное приспособление визуализирует наиболее важные, с точки зрения блоггера, статьи ресурса, побуждая читателя прочитать предлагаемый контент. То, что визуальная реклама воспринимается значительно лучше, чем речевая или текстовая, замечено уже давно, поэтому использование визуального ряда, для побуждения читателя к переходу на определённые статьи блога вполне естественно и оправдано. Оставим в стороне дизайнерские, маркетинговые и прочие вопросы, касающиеся данного вида подачи информации (это не вписывается в концепцию моего блога), а перейдём сразу к технической стороне вопроса.

Давно прошли те времена, когда в web-дизайне доминировала только одна карусель – Smooth Gallery, хотя актуальность именно этой карусели остаётся весьма высокой, в основном, благодаря усилиям её автора (Jonathan Schemoul), постоянно работающего над своим продуктом. Тем не менее, появились новые варианты карусели других авторов, использующие другие фреймворки (framework). На сегодняшний день, как мне кажется, заслуживают внимания две карусели. Это классическая карусель Smooth Gallery и карусель на базе jQuery плагина Cicle. Именно эти карусели я хочу рассмотреть в этой статье.

Smooth Gallery

Для WordPress блогов эта карусель реализована в плагине Featured Content Gallery. И хотя автор этого плагина, по неизвестным мне причинам, забросил работу над FCG, что проявляется в частичной несовместимости с плагинами написанными в стиле WP2.7+, тем не менее, востребованность этого плагина остаётся весьма высокой. Этот плагин продолжают использовать многие известные дизайнеры при разработке новых современных premium шаблонов для WordPress. О том как настроить этот плагин, я уже писал в своей статье про WP шаблон Revolution LifeStyle. Там же можно найти русифицированную версию плагина.

Что касается Blogger блогов, то здесь, для того что бы вставить карусель в главную страницу блога, разумеется, если Вы не используете шаблон с предустановленной каруселью, придётся «поработать руками». Поэтому посмотрим как это делается вообще и для Blogger блога в частности.

Карусель Smooth Gallery требует предварительной загрузки нескольких javascript и css файлов:

Smooth Gallery. Загружаемые файлы.

<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
<script src="scripts/jd.gallery.set.js"  type="text/javascript"></script>

Этот код необходимо вставить в секцию header HTML файла или, применительно к Blogger блогу, XML шаблона темы.

Для непосредственного вывода карусели используется следующий код:

Smooth Gallery. Код вывода.

<div id='myGallery'>
  <div class="imageElement">
    <h3>Item 1 Title</h3>
    <p>Item 1 Description</p>
    <a href="#" title="open image" class="open"></a>
    <img src="images/brugges2006/1.jpg" class="full" />
    <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
  </div>
  <div class="imageElement">
    <h3>Item 2 Title</h3>
    <p>Item 2 Description</p>
    <a href="#" title="open image" class="open"></a>
    <img src="images/brugges2006/2.jpg" class="full" />
    <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
  </div>
</div>

В этом коде в карусель выводится два элемента (минимум) каждый из которых задан тегом div класса imageElement. Каждый div содержит пять тегов, задающих параметры элемента карусели:

h3 – заголовок элемента; без класса
p – текст элемента, выводится в поле текста; без класса
a – ссылка перехода. Куда переходить (статья, страница) при клике на данном элементе. Замените решётку на URL, а содержимое title на что-нибудь русское, например «Читать далее» ; класс open
img – основное изображение карусели. Замените содержимое src на URL Вашего изображения. Класс full
img – изображение миниатюры основного изображения (100х75). Выводится в верхней скрываемой секции миниатюр. Замените содержимое src на URL миниатюры. Класс thumbnail.

Конкретно для Blogger блога, для того, чтобы карусель выводилась только на главной странице, код должен выглядеть так:

Smooth Gallery. Код вывода в Blogger.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div id='myGallery'>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/brugges2006/1.jpg" class="full" />
      <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/brugges2006/2.jpg" class="full" />
      <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
    </div>
  </div>
</b:if>

Ну и, наконец, последний штрих к портрету. Не по положению в файле, а по времени выполнения. В секцию header, сразу после уже добавленного кода загрузки файлов карусели, вставьте следующий код:

Smooth Gallery. Код запуска карусели.

<script type="text/javascript">
  function startGallery() {
    var myGallery = new gallery($('myGallery'), {
      timed: false
    });
  }
  window.addEvent('domready', startGallery);
</script>

Этот код запустит исполнение карусели сразу после загрузки страницы пользователем.

Главный вопрос Blogger блоггера: «Куда вставлять?». Вставлять лучше всего перед этим кодом:

Код начала вывода постов Blogger.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

По умолчанию размер карусели 460х345 пиксел. Если Вы хотите задать собственные размеры карусели (например, чтобы вписать в дизайн блога), вставьте следующий код в секцию header:

Smooth Gallery. Размеры карусели.

<style>
  #myGallery
  {
    width: 400px !important;
    height: 200px !important;
  }
</style>

Код приведённый выше задаёт ширину карусели 400 пиксел и высоту 200 пиксел.

Вот собственно и всё по Smooth Gallery.

P.S. В следующей части статьи рассмотрим jQuery карусель на базе Cicle.

Популярность: 36%

Обратные ссылки

Посмотрите, что другие говорят об этой статье ...

minimus :

16.03.2010 в 14:26

Новая статья блога: Карусель в блоге. Часть 1. http://bit.ly/bwKhdY
Ответить
Книги для детей и родителей − Разноцветная карусель читать, купить ,смотреть онлайн – Г. Б. Остер, Ю. С. Энтин :

30.04.2010 в 22:35

[...] Карусель в блоге. Часть 1. | Блоговод Категория: Без рубрики , головоломки, Готовимся к школе с Ю. Энтиным и Г. Остером, Кроссворды Comment (0) [...]
Ответить

Выскажите своё мнение

Напишите что Вы думаете ...
и, если хотите иметь индивидуальный аватар, зарегистрируйтесь на сервисе gravatar!

Карусель в блоге. Часть 1.

Smooth Gallery

Комментарии

Обратные ссылки

Выскажите своё мнение

Свежие записи

Свежие комментарии

Друзья

Пожертвования

Архив

Ссылки

Реклама

Кнопки

Карусель в блоге. Часть 1.

Smooth Gallery

Комментарии

Обратные ссылки

Выскажите своё мнение

Новости и обновления

Свежие записи

Свежие комментарии

Друзья

Пожертвования

Архив

Ссылки

Реклама

Кнопки