Форум АНТИЧАТ - [jquery] Создаем красивый просмотрщик галереи

Галерея 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