Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.188.132.71
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Архив - только для чтения
[jquery] Создаем красивый просмотрщик галереи
Сообщение оставлено 07.12.2010 в 18:28:02 | Сообщение #1
Галерея 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>

В итоге, что мы имеем?

Очень красивую, быстро подключаемую галерею, которой можно поразить, как и шефа, так и просто друзей

Это должен увидеть КАЖДЫЙ!!!

Ну и конечно куда же без примеров

 

У гениальности есть побочные эффекты
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика