Всё чаще и чаще блоггеры используют карусель анонсируемых статей на главных страницах своих блогов. И неудивительно. Ведь данное приспособление визуализирует наиболее важные, с точки зрения блоггера, статьи ресурса, побуждая читателя прочитать предлагаемый контент. То, что визуальная реклама воспринимается значительно лучше, чем речевая или текстовая, замечено уже давно, поэтому использование визуального ряда, для побуждения читателя к переходу на определённые статьи блога вполне естественно и оправдано. Оставим в стороне дизайнерские, маркетинговые и прочие вопросы, касающиеся данного вида подачи информации (это не вписывается в концепцию моего блога), а перейдём сразу к технической стороне вопроса.
Давно прошли те времена, когда в 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 файлов:
|
1 2 3 4 |
<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> |
Этот код необходимо вставить в секцию head HTML файла или, применительно к Blogger блогу, XML шаблона темы.
Для непосредственного вывода карусели используется следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 блога, для того, чтобы карусель выводилась только на главной странице, код должен выглядеть так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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, сразу после уже добавленного кода загрузки файлов карусели, вставьте следующий код:
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: false }); } window.addEvent('domready', startGallery); </script> |
Этот код запустит исполнение карусели сразу после загрузки страницы пользователем.
Главный вопрос Blogger блоггера: “Куда вставлять?”. Вставлять лучше всего перед этим кодом:
|
1 |
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> |
По умолчанию размер карусели 460х345 пиксел. Если Вы хотите задать собственные размеры карусели (например, чтобы вписать в дизайн блога), вставьте следующий код в секцию head HTML файла:
|
1 2 3 4 5 6 7 |
<style> #myGallery { width: 400px !important; height: 200px !important; } </style> |
Код приведённый выше задаёт ширину карусели 400 пиксел и высоту 200 пиксел.
Вот собственно и всё по Smooth Gallery.
P.S. В следующей части статьи рассмотрим jQuery карусель на базе Cicle.
© 2010 – 2013, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
у меня задана ширина и высота картинки с помошью стилией на скриншоте видно) или можете посомтреть на блоге //artur8888.blogspot.com/
он захватывает только данные о картике но почему то размер и ширину не берет. Выставил размер принудительно во втором посте.
Добавьте стиль (высоту и ширину) в заголовочную секцию для класса recent_thumb … Это класс изображения выводимого скриптом …
А вообще, вопросы не по теме статьи лучше задавать в форуме поддержки … 😉
не работает(
тогда картинка просто растягивается и если навести на нее мышкой то пишет что natural size 72×72
А что именно Вы хотите сделать? Поставьте задачу! Есть XXX, хочу чтоб было YYY!!!
“Карусель Smooth Gallery требует предварительной загрузки нескольких javascript и css файлов:..”
Где я их могу скачать, не вижу ни одной ссылки на файлы.
Перейдите на сайт библиотеки – там всё есть …
Спасибо за подробный мануал. Запустил у себя эту карусельку на тестовом блоге
Пожалуйста! 😉
При всём моём уважении к вам, я ничего не могу понять! Как всё это поставить? Вы описываете всё под свой уровень знаний. А куда что запроторить так и не разобрался, объясните пошагово если вашему уму будет угодно снизойти к “низам” .
Файлы скриптов надо где-то размещать, а остальное описано достаточно подробно …
mootools.v1.11.js
scripts/jd.gallery.js
css/jd.gallery.css
scripts/jd.gallery.set.js
Не могу найти, подскажите где можно взять