Naydav
28.05.2008, 22:46
Галерея 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>
В итоге, что мы имеем?
Очень красивую, быстро подключаемую галерею, которой можно поразить, как и шефа, так и просто друзей
Это должен увидеть КАЖДЫЙ!!!
Ну и конечно куда же без примеров ;)
http://edukation.siteviewer.net/news/fancy.html
Пробел уберите в ссылке только
Сайт сырой, но галерею посмотреть можно, это тестовая станция, будет время, перенесу на постоянную основу или на офф сайте http://fancy.klade.lv/
Надеюсь, хоть кто-то асилил :)
For antichat
Пс а ну и саму галерею можно взять по адрессу
http://fancy.klade.lv/fancybox/fancybox_1.0.0.zip
Вот третий раз за неделю у меня спрашивали скрипт галереи, вернее ее вывод, «да что б красиво было»
И поэтому руководствуясь принципом
Никогда не бойся делать то, что ты не умеешь. Помни, ковчег был построен любителем. Профессионалы построили "Титаник".
Решил рассказать вам об одной интересной вещичке, под названием 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>
В итоге, что мы имеем?
Очень красивую, быстро подключаемую галерею, которой можно поразить, как и шефа, так и просто друзей
Это должен увидеть КАЖДЫЙ!!!
Ну и конечно куда же без примеров ;)
http://edukation.siteviewer.net/news/fancy.html
Пробел уберите в ссылке только
Сайт сырой, но галерею посмотреть можно, это тестовая станция, будет время, перенесу на постоянную основу или на офф сайте http://fancy.klade.lv/
Надеюсь, хоть кто-то асилил :)
For antichat
Пс а ну и саму галерею можно взять по адрессу
http://fancy.klade.lv/fancybox/fancybox_1.0.0.zip