Современный продвинутый блог редко обходится без использования кодов, позволяющих пользователю просматривать изображения и видео не уходя со страницы. Если для WordPress-блогов таких плагинов написано немало (например мой плагин Simple View), то для Blogger-блогов я таких кодов почти не встречал (возможно плохо искал 😉 ).
Я хочу рассмотреть в этой статье способы подключения к Blogger-блогу таких популярных библиотек как Lightbox, FloatBox и Shadowbox.
Lightbox
Lightbox является, пожалуй, самой популярной библиотекой для просмотра изображений, т.к. была написана одной из первых. Несмотря на явный минимализм и почтенный возраст по прежнему остаётся лидером среди блоггеров. К недостаткам можно отнести то, что библиотека использует фреймворки (framework) Prototypes и Scriptaculous, а это делает библиотеку уязвимой в плане совместимости с другими фреймворками (например с Mootools).
И тем не менее …
Вставьте следующий код в секцию head, желательно ближе к началу секции – если Вы используете jQuery, это позволит избежать конфликта (пресловутая совместимость фреймворков) пространства имён.
Произошла ошибка. Попробуйте ещё раз позднее. |
Теперь, если в теле статьи мы поместим ссылку следующего вида:
Произошла ошибка. Попробуйте ещё раз позднее. |
получим именно то, что нам и надо – вывод полноразмерного изображения при клике на миниатюре в окне Lightbox.
- fullimage.jpg – адрес полноразмерного изображения, не обязательно JPEG
- thumbnail.jpg – адрес миниатюры, не обязательно JPEG
- gname – любое имя галереи для объединения нескольких изображений в галерею
Shadowbox
Эта библиотека написана на “чистом” javascript и потому не испытывает проблем с совместимостью с популярными фреймворками. Кроме того, эта библиотека позволяет выводить в своём окне не только изображения но и видеоклипы.
Поместите в секцию head следующий код:
Произошла ошибка. Попробуйте ещё раз позднее. |
Shadowbox.init может содержать параметр:
Произошла ошибка. Попробуйте ещё раз позднее. |
Подробнее о параметрах Shadowbox можно почитать здесь.
В теле поста используйте коды такого вида:
Произошла ошибка. Попробуйте ещё раз позднее. |
Добавляя rel=”shadowbox” в код линка Вы информируете Shadowbox, что это “его клиент”.
Floatbox
Floatbox в чём-то похож на Shadowbox, но обладает большей функциональностью и большим количеством настроек. Кроме того, это единственная библиотека позволяющая включить предварительную авто-загрузку изображений, т.е. пока читатель “соображает что к чему”, изображения тихо подгружаются и когда он кликает на миниатюре, получает изображение немедленно (если это не гига-изображение, разумеется 😉 ).
В секцию head вставить следующий код:
Произошла ошибка. Попробуйте ещё раз позднее. |
В теле статьи можно использовать следующий код:
Произошла ошибка. Попробуйте ещё раз позднее. |
можно и так:
Произошла ошибка. Попробуйте ещё раз позднее. |
в этом случае объекты будут объеденены в группу (галрею). В первом варианте, для объединения в группу добавьте в аттрибут rev параметр group (например: group: gname).
Более подробно об обширных возможностях Floatbox можно прочитать здесь.
Единственным недостатком библиотеки является необходимость её лицензирования (платного или бесплатного – это как повезёт). Впрочем, и без лицензии библиотека работает. Периодически выбрасывает окно предупреждения о необходимости лицензирования, но работает … Если это напрягает, используйте версию 3.50
Вот, пожалуй, и всё!
© 2010 – 2013, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
Извините, но ссылка на скрипты не работает. //lagunof.blogspot.com/2010/02/krasivyi-shablon-dlya-bloggera.html#comment-form
Уточните пожалуйста. Какая ссылка? На какие скрипты?
Пока мой сайт развивается – но планирую использовать видео (делать видеоуроки). Статью поместил в закладки! Пригодиться!!!
Удачи в развитии!!!