Расширяем fancybox. Меняем hash при смене картинки.

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

Запись опубликована в рубрике JavaScript/JQuery с метками , , . Добавьте в закладки постоянную ссылку.

6 комментариев: Расширяем fancybox. Меняем hash при смене картинки.

  1. html says:

    Почему то не работает у меня. Может потому что аяксом изображения выводятся?

  2. Там в коде даже количество скобок фигурных открывающих и закрывающих не совпадает!

  3. Да. Была одна лишняя скобка. Исправил. Спасибо.

  4. Daim says:

    А для какого это fancybox ?
    В упор почему-то не получается.
    Пробовал на чистом, только что скачанном fancybox 2.1.5 менять стандартный вызов

    $(document).ready(function() {
    $(«.fancybox»).fancybox();
    });

  5. женя says:

    а как подобное реализовать в fancybox 2

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *