Блог на уеб администратора

Приставка FancyBox за библиотека jQuery

jquery.js - библиотека jQuery;
jquery.fancybox.js - приставка FancyBox;
jquery.pngFix.js - ще реши проблема с използването на png файлове в IE;
jquery.metadata.js - ще използва атрибути на класа, за да предаде параметри на приставката.

Първите две от тях са задължителни, но с другите две може да се откажете.

На страницата могат да бъдат поставени няколко фото галерии и всяка от тях може да съдържа произволен брой изображения.

hideOnContentClick - скриване на съдържание при щракване върху изображение в пълен размер. Може да бъде вярно или невярно. Неправилно по подразбиране.
zoomSpeedIn - показва скоростта на ефекта (в милисекунди) при отваряне на изображение в пълен размер. По подразбиране е 0, т.е. без ефект.
zoomSpeedOut - показва скоростта на ефекта (в милисекунди) при затваряне на изображението в пълен размер. По подразбиране е 0, т.е. без ефект.
overlayShow - дали да се покаже допълнителен слой, който „затъмнява“ основното съдържание на страницата. Може да бъде вярно или невярно. Невярно по подразбиране.
overlayOpacity - прозрачност за overlayShow, ако разбира се е вярно. Варира от 0 до 1.
frameWidth - определя ширината на контейнера, ако се показва iframe и вградено съдържание (вижте примера).
frameHeight - определя височината на контейнера, ако се показва iframe и вградено съдържание (вижте примера).
itemLoadCallback - дефинира персонализирана функция, която избира група от снимки за показване (вижте примера).

Сега нека видим как цял набор от изображения в пълен размер се крие зад една миниизображение.

HTML:

$ ("a # custom"). fancybox ( <

'itemLoadCallback': getGroupItems
>);

функция getGroupItems (опции) <
jQuery. всеки (imageList, функция (i, val) <
опции. itemArray. тласък (вал);
>);
>

Тук създаваме масив imageList, всеки елемент от които е обект, състоящ се от двойки ключ-стойност:

HTML:

И последното - извеждането на каквото и да е съдържание чрез iframe.

HTML:

Коментари: 17

Благодаря за подробното описание, ще експериментирам с fancybox, има ли някаква помощна програма, която би направила html галерия с вграден fancybox?

Благодаря! Добри неща, всичко изглежда работи.
За съжаление самият той не е много силен в ZhS. Има ли все още приставка, която да показва визуализации в прозореца с голяма снимка? И аз също бих искал автоматично слайдшоу ... Кажете ми поне в коя посока да копая ...

Благодарение на слайдшоуто, ще го видя сега.

Всичко работи във firefox, но в IE се появява голяма картина с размер, който не съответства на оригинала и не пропорционално (например, оригиналът на голяма картина е 550x456, но изскача с размер 512x378). Можете ли да ми кажете защо?

Направих всичко, както описахте, проверих го повече от веднъж, но по някаква причина нищо не работи. Кажете ми къде сте допуснали грешка. http://eindep.com/1.html

Опитах го по различни начини, не работи. Всички снимки са видими, но отворени в отделен ред.

Дмитрий, първо, защо да свързвам библиотеката jquery два пъти? И второ, съветвам ви да разберете какво означава конструкцията $ ("p # single a") ...
jQuery - Javascript от следващо поколение

Ха ... разбрах . благодаря за съветите ...

дебел слон:

Благодаря, всичко е много интересно, ще отида да го пробвам, може би ще успея.

Орленко К.Н .:

Благодаря! настрои се. Изглежда интересно, само IE6.7 все още има някои неточности

отново, в IE8 някакъв вид "глупости", при зареждане на изображение, зареждането на gif по оста y се повтаря 10 пъти, след това център = (

в IE8 някаква "глупост"
Не съм изненадан. MS методически нарушава стандартите в продължение на много години и след това (изведнъж!) Решава, че е необходимо да се спазва. Мисля, че трябва да разгледаме официалния уебсайт за приставки за най-новата версия.

Здравейте всички, можете ли да ми кажете.
Имам проблем със скрипта, кликването върху първата снимка (test1) ми работи, но когато щракна върху останалите снимки, тя просто отива на друга страница, какво да правя ?

фалшива аларма, всичко работи!
Благодаря на всички.