Блог web-майстра - Архів сайту - Плагін FancyBox для бібліотеки jQuery

Плагін FancyBox для бібліотеки jQuery

  • jquery.js - бібліотека jQuery;
  • jquery.fancybox.js - плагін FancyBox;
  • jquery.pngFix.js — дозволить усунути проблему використання png-файлів у IE;
  • jquery.metadata.js – дозволить використовувати атрибути class для передачі параметрів плагіну.

Перші два з них є обов'язковими, а без двох інших можна обійтися.

На сторінці може бути розміщено кілька фотогалерей, і кожна з них може містити будь-яку кількість зображень.

  • hideOnContentClick — приховувати контент на клік на повнорозмірному зображенні. Може приймати значення true чи false. За промовчанням false.
  • zoomSpeedIn — вказує швидкість ефекту (у мілісекундах) при відкритті повнорозмірного зображення. За замовчуванням – 0, тобто. без ефекту.
  • zoomSpeedOut — вказує швидкість ефекту (у мілісекундах) при закритті повнорозмірного зображення. За замовчуванням – 0, тобто. без ефекту.
  • overlayShow — показувати чи ні додатковий шар, який затьмарює основний вміст сторінки. Може приймати значення true чи false. За промовчанням false.
  • overlayOpacity - прозорість для overlayShow, якщо звичайно він true. Змінюється від 0 до 1
  • frameWidth — визначає ширину контейнера, якщо виводиться iframe та inline вміст (див. приклад).
  • frameHeight — визначає висоту контейнера, якщо виводиться iframe та inline вміст (див. приклад).
  • itemLoadCallback — визначає функцію користувача, яка вибирає групу фотографій для відображення (див. приклад).

А тепер подивимося, як за однією мініатюрою ховається цілий набір повнорозмірнихзображень.

HTML:

$ ("a#custom"). fancybox (< 'itemLoadCallback' : getGroupItems > );

function getGroupItems ( opts ) < jQuery. each (imageList, function (i, val) < opts. itemArray . push (val); > ); >

Тут ми створюємо масивimageList, кожним елементом якого є об'єкт, що складається з пар ключ-значення:

HTML:

І останнє – виведення будь-якого контенту через iframe.

HTML:

Коментарів: 17

Дякую за докладний опис, буду експереметувати з fancybox, а чи немає утиліти, яка б робила html галерею з вбудованим fancybox?

Дякую! Гарний матеріал, все начебто працює. Сам на жаль, вельми не сильний в ЖС Чи немає ще плагіна, щоб превьюшки показувати у віконці з великим фото? І ще хотілося б автоматичне слайдшоу… Підкажіть хоч у якийсь бік копати…

За слайдшоу дякую, зараз подивитися.

У firefox все працює, а в IE велика картинка з'являється в розмірі, що не відповідає оригіналу, причому не пропорційно (наприклад оригінал великої картинки 550х456, а спливає з розміром 512х378). Чи не підкажете, чому?

Все зробив як Ви описали, перевіряв не одноразово, але чомусь не працює нічого. Підкажіть, де помилився. http://eindep.com/1.html

Пробував у різний спосіб, не виходить. Картинки все видно але відкриваються в окремому рядку.

Дмитро, по-перше, навіщо підключати бібліотеку jquery двічі? А по-друге, раджу розібратися, що означає конструкція $(”p#single a”)… jQuery – Javascript нового покоління

Ха… розібрався… дякую за підказки…

жирний слон:

Дякую все дужецікаво піду пробувати може й у мене вийде.

Orlenko K.N.:

Дякую! поставив собі. Цікаво виглядає, тільки в IE6,7 все одно присутні деякі неточності

знову ж таки, в ІЕ8 якась “лажа”, при завантаженні зображення гіфка завантаження по осі у повторюється раз 10 то центру =(

в ІЕ8 якась “лажа” Я не здивований. MS багато років методично порушував стандарти, а потім (раптом!) вирішив, що треба б дотримуватися. Думаю, треба переглянути на офіційному сайті плагіна останню версію.

Всім привіт, може підкажіть. У мене проблема зі скриптом, притискання на першу картинку (test1) у мене все працює, але коли я натискаю на інші картинки то він просто переходить на іншу сторінку, що робити?

хибна тривога, все працює! Дякую всім.