FancyBox Thumbnail Helper создает новый эскиз в конце миниатюры, а не вызывает его напрямую - PullRequest
Новая
       22

FancyBox Thumbnail Helper создает новый эскиз в конце миниатюры, а не вызывает его напрямую

1 голос
/ 18 февраля 2012

Я пытаюсь использовать FancyBox для галереи из 36 изображений, но всякий раз, когда я нажимаю на изображение, чтобы вызвать FancyBox, помощник по миниатюрам делает 2 действительно странные вещи:

1) загружает дополнительный эскизизображение, которое я щелкнул в КОНЦЕ уменьшенных изображений галереи

2) помощник по уменьшенным изображениям не переходит к соответствующему уменьшенному изображению соответствующего изображения.вместо этого он переходит к новому эскизу этого изображения, которое я сделал в конце галереи.

вот ссылка на то, что у меня есть: http://lalalichan.com/temp/process_test6.html

Внизу,Вы увидите миниатюры, которые запускают изображения в области отображения.изображения, которые появляются в этой области отображения, являются ссылками, которые затем запускают FancyBox.

все остальное работает так, как должно;я могу перемещаться между моими изображениями, я могу закрывать FancyBox, и когда я нажимаю на миниатюру, я хочу, чтобы появилось правильное соответствующее изображение.

это просто неприятность, которая делает гладкую, в противном случае, функциональность ложной.

Буду признателен за любую помощь, заранее большое спасибо!

1 Ответ

1 голос
/ 18 февраля 2012

Fancybox сгенерирует миниатюру для каждой ссылки с привязанным к ней классом, так что если у вас есть этот скрипт 

$('.fancybox').fancybox({});

и 6 ссылок с тем же классом, что и селектор, привязанный к fancybox, например 

<a class="fancybox" href="{target}" .... etc

тогда fancybox сгенерирует 6 миниатюр ... пока все хорошо.

Что происходит в вашем случае, когда вы загружаете свою (демонстрационную) страницу, есть 6 (скрытых) ссылок с class="fancybox". Также есть пустой контейнер (id="content"), в котором вы отображаете свои большие миниатюры 

<div style="width: 820px; height: 546px;" id="content"></div>

но когда вы нажимаете на любую из миниатюр (не для fancybox) внизу вашей страницы, контейнер с id="content" заполняется 7-й ссылкой с class="fancybox", дублируя одну из ваших исходных ссылок, в зависимости от какой эскиз вы щелкнули ... поэтому после этого действия в fancybox будет сгенерировано 7 миниатюр.

Поскольку эта ссылка добавляется в конец стопки, она также будет размещена и в конце галереи.

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

РЕДАКТИРОВАТЬ: Новые задаваемые вопросы:

Я до сих пор не до конца понимаю, как нажатие на прокручивающиеся миниатюры привело бы к заполнению #content div седьмой ссылкой. Как я мог помешать этому, сохраняя все функции скроллера?

Ваш код нуждается в небольшой настройке: во-первых, вы дублируете свой собственный скрипт fancybox ... он вам нужен только один раз. Во-вторых, вам просто нужно загрузить либо jquery.fancybox.js, либо jquery.fancybox.pack.js, но не оба сразу.

Что касается функциональности, которую вы спрашиваете, я бы сделал следующее:

1: переместить скрытые ссылки из DIV id = "load" в DIV id = "content"
2: изменить CSS на 

#content a {
position:absolute;
visibility: hidden;
}

3: изменить этот скрипт 

$(function(){
        $('.image').live('click',function(){
            var href = $(this).attr('href');
                if ($('#content').is(':visible')) {
                    $('#content').css('visibility','hidden');
                    }
                $('#content').load('#load #'+href,function(){
                    $('#content').css('visibility','visible').hide().fadeIn('3000');
                });
        });
        return true;
})

в это 

$(function(){
        $('.image').each(function(i){
            $(this).bind('click', function(){
                $("#content a").css('visibility','hidden').eq(i).css('visibility','visible').hide().fadeIn('3000');
            }); // bind
        }); // each
        return false;
});

при условии, что эскизы расположены в том же порядке, что и ссылки внутри DIV с id="content".

Я не тестировал код, но в значительной степени это помогло бы

РЕДАКТИРОВАТЬ 2 : код улучшен Некоторые изменения в CSS и JS

Новый css: 

#content a {
position:absolute;
display: none; /* was visibility: hidden; */
}

new js: отображает первый большой эскиз при загрузке страницы 

$(function(){
 $("#content a").eq(0).show();
 $('.image').each(function(i){
  $(this).bind('click', function(){
   $("#content a").hide().eq(i).fadeIn('3000');
  }); // bind
 }); // each
 return false;
});

Кстати, я бы не стал добавлять встроенные стили (используя атрибут style), вместо этого я бы использовал таблицы стилей.

...