Fancybox — популярный JQuery плагин для создания фотогалерей и вывода фотографий и другого контента в модальных окнах в стиле Mac. Он обладает довольно широким API, но некоторых возможностей иногда не хватает.
Например мне надо, чтобы при перелистывании фото у меня менялся и url для того, чтобы можно было легко дать кому-то ссылку на изображение, не открывая картинку в отдельном окне.
Все очень просто, достаточно дописать в стандартный вызов функции fancybox() несколько строк:
[codesyntax lang=»javascript» title=»JS»]
$(function () {
$('a[rel="fancy"]').fancybox({
transitionIn: 'elastic',
transitionOut: 'elastic',
titlePosition: 'inside',
onComplete: function (links, index) {
window.location.hash = index;
},
onClosed: function () {
window.location.hash = '';
}
});
$('a[rel="fancy"]:eq(' + window.location.hash.substring(1) + ')').trigger('click');
});
[/codesyntax]
Суть заключается в том, что при загрузке очередной фотографии (функция onComplete), мы записываем в hash (якорь) порядковый номер активной ссылки с нашей фотографией. При закрытии окна (функция onClosed) этот якорь удаляем.
Далее с помощью JQuery метода trigger() сразу после загрузки страницы, если hash не пустой, то мы вызываем событие click для ссылки с порядковым номером, равным значению hash‘а. Теперь мы можем делиться ссылками на картинку с сайта просто скопировав url страницы. Готовый пример можно посмотреть тут — http://kinoguru.com/movies/killer-elite—the/posters/#6
Почему то не работает у меня. Может потому что аяксом изображения выводятся?
Там в коде даже количество скобок фигурных открывающих и закрывающих не совпадает!
Да. Была одна лишняя скобка. Исправил. Спасибо.
А для какого это fancybox ?
В упор почему-то не получается.
Пробовал на чистом, только что скачанном fancybox 2.1.5 менять стандартный вызов
$(document).ready(function() {
$(«.fancybox»).fancybox();
});
Версию библиотеки вы можете посмотреть в примере http://kinoguru.com/movies/killer-elite—the/posters/#6
а как подобное реализовать в fancybox 2