ручной вызов fancybox для конкретной цели - PullRequest
1 голос
/ 02 февраля 2012

Я реализовал ручной скрипт из fancybox:

$("#manual2").click(function() {
    $.fancybox([
        'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
        'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
        {
            'href'  : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
            'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
        }
    ], {
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 0
    });
});

теперь мне интересно, можно ли напрямую перейти к конкретной картинке, нажав на ссылку. (например, непосредственно ко второму другому третьему изображению).

1 Ответ

3 голосов
/ 02 февраля 2012

Чтобы начать на втором слайде, просто добавьте 'index' : 1, к вашим опциям json.

Вот это полностью выписано ...

$("#manual2").click(function() {
    $.fancybox([
        'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
        'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
        {
            'href'  : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
            'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
        }
    ], {
        'index'             : 1,
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 0
    });
});

Должна иметь версию 1.3.1 или выше. См. Fancybox API для более подробной информации: http://fancybox.net/api

UPDATE: Вы спросили, можно ли установить индекс по самим ссылкам, и ответ - да. Просто убедитесь, что вы устанавливаете слайд, который хотите открыть, используя пользовательский атрибут data- (например, data-index="2"), а затем используйте его вместо предыдущего кода ...

$("#manual2").click(function() {
    $.fancybox([
        'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
        'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
        {
            'href'  : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
            'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
        }
    ], {
        'index'             : $(this).data('index'),
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 0
    });
});
...