Галерея 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 файлов(прозрачность) Рисунки навигации, закрытия… Подключение файлов: Code: <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 – пользовательская функция для сортировки Code: <script type="text/javascript"> // оболочка jquery, предпочтительней подключать именно так $(document).bind("ready", function(){ $("div#gallery_image a").fancybox({ 'overlayShow': true }); }); </script> Где gallery_image id дива(div) c нашей галереей Ну и, последнее - сами рисунки: Code: <div id=”gallery_image”> <a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a> </div> Я думаю тут все понятно. Для группировкигалереи используем: Code: <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> В итоге, что мы имеем? Очень красивую, быстро подключаемую галерею, которой можно поразить, как и шефа, так и просто друзей Это должен увидеть КАЖДЫЙ!!! Ну и конечно куда же без примеров Пробел уберите в ссылке только Сайт сырой, но галерею посмотреть можно, это тестовая станция, будет время, перенесу на постоянную основу или на офф сайте http://fancy.klade.lv/ Надеюсь, хоть кто-то асилил For antichat Пс а ну и саму галерею можно взять по адрессу http://fancy.klade.lv/fancybox/fancybox_1.0.0.zip
Если тема интересна, могу продолжить... Что типа drag&dropa в инет магазине, или альтернативное коментирование фоток как на flickr.com
Да - интересная тема. Вот тоже подобные галереи: http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm
там косячок неприятный, когда стрелку в нижнем правом углу жмешь, появляется пунктирная рамка, чтобы ее убрать нада прописать в кнопку onfocus="this.blur()"
не получается настроить fancy скрипты положил в /js/ css-файл в /css/ , прописал в индексе то что нужно, в страничке с галереей добавил див с идом которій прописан в скрипте в индексе неработает фотки появляются далеко внизу страницы и все.... подскажите что не так?