Галерея Fancybox Вот третий раз за неделю у меня спрашивали скрипт галереи, вернее ее вывод, «да что б красиво было»
И поэтому руководствуясь принципом
Цитата:
Никогда не бойся делать то, что ты не умеешь. Помни, ковчег был построен любителем. Профессионалы построили "Титаник".
Решил рассказать вам об одной интересной вещичке, под названием fancybox
Возможно, сейчас это и не нужно, но потом пригодиться, или будете знать с чего начинать, да и новичкам, я думаю, будет интересно
Итак, у нас есть набор картинок, например мини галерея в новостях, как же нам обеспечить удобный и симпатичный просмотр?
Первое, что приходит в голову, это вывести основное фото(заданное по умолчанию, пускай это первая фотка в галерее), под ним расположить дополнительные фото - привьюшки, нажатие на которые, заменяло бы нашу основною картинку на привью (увеличенный вариант)
Но сразу возникает несколько проблем:
при разных размерах (особенно высоты) получаются очень не красивые скачки;
нужно самостоятельно организовать предзагрузку фотографий (что бы не было при нажатии эффектов типа $("#").SlideIn(); );
да и вообще во время web 2.0 технологий, это выглядело бы, как сайт школьной библиотеки.
Второй вариант, сделать рорup окно + напичкать его javascript, прыжки попапа уже не столь критичны, но смотрится это тоже далеко не фонтан (и даже не фонтанчик),
Это значит, что придется “попотеть” при создании нормальной и чего уж там – красивой навигации, а это довольно много времени и знаний, и ессно кода (можно конечно и копипастить, но мы как “отцы русской демократии” пойдем другим путем)
И вообще, получается как бы отвязка от сайта, сайт сам по себе (делай что хош), галерея сама по себе
Третий вариант, привязка к сайту – это всплывающий бокс с фото, с затемнением сайта.
Обновляем контент javascript или axaj, но опять таки проблемы времени, знаний и эстетики) остаются в силе
Итого, что было бы почти идеальным вариантом:
1) Легкость подключаемости модуля
2) Доступность в изменениях, зная только азы
3) Время, которое нужно потратить
4) Ну и, конечно же, фишка под web 2.0
*) как дополнение, вариант работы и с отключенным javascript
Нам поможет библиотека jquery и замечательный плагин к ней jquery.fancybox, минимум времени, минимум знаний js
Состав:
jquery.js – наш фрейм
jquery.fancybox.js – сам плагин
fancybox.css – файл стилей
jquery.pngFix – плагин для корректного отображения png файлов(прозрачность)
Рисунки навигации, закрытия…
Подключение файлов:
Код:
<head> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/fancy/jquery.fancybox.js"></script> <script type="text/javascript" src="/js/fancy/jquery.pngFix.js"></script> <link rel="stylesheet" href="/js/fancy/fancybox.css" type="text/css" media="screen"> </head>
Заметьте, я специально вынес плагин в отдельную папку fancy
Активация модуля:
Рассмотрим более подробно функции:
hideOnContentClick (по умолчанию false), выходим из режима галереи при клике на большую фотку
zoomSpeedIn, zoomSpeedOut
скорости в miliseconds масштабирования анимации, при выборе фотки и при выходе из режима галереи(фотка вылетает и постепенно увеличивается, пока не достигнет своих размеров)(без анимации, если 0). Эффект оставляем обязательно!!!
frameWidth , frameHeight – дефаулт всплывающего окна, не применяем, иначе лишимся красивейшего эффекта перехода между картинками разного размера
overlayShow – затемнение бекграунда, по умолчанию false, но мы ставим true, так красивее
overlayOpacity – прозрачность бекграунда, не трогаем
itemLoadCallback – пользовательская функция для сортировки
Код:
<script type="text/javascript"> // оболочка jquery, предпочтительней подключать именно так $(document).bind("ready", function(){ $("div#gallery_image a").fancybox({ 'overlayShow': true }); }); </script>
Где gallery_image id дива(div) c нашей галереей
Ну и, последнее - сами рисунки:
Код:
<div id=”gallery_image”> <a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a> </div>
Я думаю тут все понятно.
Для группировкигалереи используем:
Код:
<div id=”gallery_image”> <a rel="group" href="image_big1.jpg"><img src="image_small1.jpg" alt=""/></a> <a rel="group" href="image_big2.jpg"><img src="image_small2.jpg" alt=""/></a> <a rel="group" href="image_big3.jpg"><img src="image_small3.jpg" alt=""/></a> </div>
В итоге, что мы имеем?
Очень красивую, быстро подключаемую галерею, которой можно поразить, как и шефа, так и просто друзей
Это должен увидеть КАЖДЫЙ!!!
Ну и конечно куда же без примеров
