Я работаю над сайтом, где изображения нуждаются в причудливой коробке. Изображения, однако, не расположены в хронологическом порядке в HTML, потому что они являются частью буклета, который я реализовал с помощью booklet.js. Поэтому мой вопрос: могу ли я определить, в каком порядке fancybox открывает мои изображения?

Я пытался заставить это работать в течение некоторого времени и сделал скрипку в демонстрационных целях.

http://jsfiddle.net/XF8WW/7/

В моей скрипке я определяю, какое изображение было нажато и каким может быть следующее / предыдущее изображение. Затем я проверяю, открывает ли fancybox правильное изображение с первой попытки. Если это не удается, я пытаюсь закрыть fancybox и открыть его сам для правильного изображения.

Единственная проблема в моем решении может быть найдена в последней написанной мной функции (clickPage). В clickPage я пытаюсь закрыть fancybox и открыть его для правильного изображения. К сожалению, либо fancybox закрывается не полностью, либо не открывается для этого изображения.

function clickPage($pageNr) {
  $.fancybox.close();
  //$('.fancybox-overlay.fancybox-overlay-fixed').click();
  $pageNrMinOne = $pageNr - 1;
  $pageNrMinOne = $pageNrMinOne.toString();
  $pageNr = $pageNr.toString();
  console.log($pageNr);
  console.log($pageNrMinOne);
  $(".page" + $pageNr).eq($pageNrMinOne).trigger('click');
  //$('.page' + $pageNr).click();
}

Я знаю, что код работает, потому что когда я ввожу его в консоль, он работает.

Спасибо за ваше время Хорошего дня

-1
Dries 24 Янв 2013 в 19:31

2 ответа

Лучший ответ

Хорошо, мне удалось это исправить. Вместо того, чтобы использовать этот скрипт для моей брошюры: http://www.netzgesta.de/booklet/ который переопределяет HTML, я использовал этот скрипт: http://builtbywill.com/code/booklet/

Последний не изменяет HTML и, на мой взгляд, является лучшим буклет-скриптом на сегодняшний день.

Спасибо всем за ваши ответы!

Хорошего дня

1
Dries 29 Янв 2013 в 07:55

Я рекомендую обрабатывать ваши данные отдельно (вместо использования img src), передавая их в fb sig в качестве первого аргумента:

    var images = [
        {
           'href' : 'http://dromenopmaat.be/dromen_op_maat/images/nl/1_big.jpg',
           'title' : 'some title'  //optional
        },
        {
           'href' : ' http://dromenopmaat.be/dromen_op_maat/images/nl/2_big.jpg ',
           'title' : 'some title'
        },
            //etc
    ]

    $.fancybox.open( 
        images,
        {
            index       : 0,
            nextEffect  : 'none', 
            prevEffect  : 'none',
            margin      : 100,
            padding     : 10,
            type        : 'image',
            wrapCSS     : 'fancy-gallery-wrapper',
            helpers     : {
                overlay : {
                    speedIn  : 0,
                    speedOut : 300,
                    opacity  : 0.7
                },
                title   : {
                    type    : 'inside'

                }
            }
    });

(fancybox v2.0)

В конечном счете, вы делаете свой проект слишком сложным, без необходимости. Создайте объект json в нужном вам порядке и отправьте fb любые дополнительные параметры, которые могут вам понадобиться (я только что извлек это из проекта, так что подгоняйте, как считаете нужным)

Надеюсь, это поможет -

0
Bosworth99 24 Янв 2013 в 15:56