[jquery] Создаем красивый просмотрщик галереи

Discussion in 'PHP' started by Naydav, 28 May 2008.

  1. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    Галерея 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
     
    #1 Naydav, 28 May 2008
    Last edited: 29 May 2008
    4 people like this.
  2. pento

    pento Elder - Старейшина

    Joined:
    3 Jul 2006
    Messages:
    126
    Likes Received:
    24
    Reputations:
    -1
    Хорошая такая тема =)
     
    #2 pento, 28 May 2008
  3. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    Если тема интересна, могу продолжить...
    Что типа drag&dropa в инет магазине, или альтернативное коментирование фоток как на flickr.com
     
    #3 Naydav, 28 May 2008
  4. banned

    banned Banned

    Joined:
    20 Nov 2006
    Messages:
    3,324
    Likes Received:
    1,193
    Reputations:
    252
    Прикрепленная тема - Интересные мини-статьи
     
    #4 banned, 29 May 2008
  5. maximum

    maximum Elder - Старейшина

    Joined:
    2 Apr 2007
    Messages:
    71
    Likes Received:
    19
    Reputations:
    5
    #5 maximum, 29 May 2008
  6. banned

    banned Banned

    Joined:
    20 Nov 2006
    Messages:
    3,324
    Likes Received:
    1,193
    Reputations:
    252
    И вот огромная галлерея - jquery.com
     
    #6 banned, 29 May 2008
  7. Корвин

    Корвин Elder - Старейшина

    Joined:
    26 Feb 2007
    Messages:
    256
    Likes Received:
    31
    Reputations:
    3
    там косячок неприятный, когда стрелку в нижнем правом углу жмешь, появляется пунктирная рамка, чтобы ее убрать нада прописать в кнопку onfocus="this.blur()"
     
    #7 Корвин, 30 May 2008
  8. st0rk

    st0rk Banned

    Joined:
    15 Jan 2008
    Messages:
    8
    Likes Received:
    0
    Reputations:
    0
    не получается настроить fancy :(
    скрипты положил в /js/ css-файл в /css/ , прописал в индексе то что нужно, в страничке с галереей добавил див с идом которій прописан в скрипте в индексе :( неработает :( фотки появляются далеко внизу страницы и все.... подскажите что не так?
     
    #8 st0rk, 27 Aug 2008
    Last edited: 27 Aug 2008
  9. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    Выложи архивом свои файлы, посмотрим
     
    #9 Naydav, 27 Aug 2008
(You must log in or sign up to post here.)
Loading...
Similar Threads - jquery Создаем красивый
  1. newsql

    Создать аккаунт через PHP

    newsql, 24 Jan 2023, in forum: PHP
    Replies:
    6
    Views:
    3,210
    newsql
    21 Feb 2023
Language
English (US)
    ANTICHAT ™ © 2001-2027 Antichat Kft.