вызывая галантерею с другой ссылкой - PullRequest
Новая
       12

вызывая галантерею с другой ссылкой

5 голосов
/ 24 февраля 2012

У меня довольно уникальная ситуация.Вот мой сценарий: 4 миниатюры, ссылающиеся на галерею + 1 среднее изображение (указывающее на тот же источник, что и первая миниатюра).Я хотел бы открыть ту же галерею, нажав на среднее изображение, но когда я связываю их с атрибутом "rel", у меня появляется первое изображение дважды в цикле (5 больших изображений в цикле).Есть ли способ вызвать указанную галерею fancybox по внешней ссылке?Таким образом, я мог бы активировать функцию щелчка на среднем изображении, оставив в цикле только 4 больших изображения.Пожалуйста, помогите, я не могу найти решение для этого.

ОБНОВЛЕНИЕ

вот мой HTML 

<div class="details_gallery">
 <a href="max/1.jpg" class="fancybox"><img src="mid/1.jpg" /></a>
 <div class="details_gallery_min">
  <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a>
  <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a>
  <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a>
  <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a>
 </div>
</div>

Я хочу, чтобы вызвать "детали"галерея при нажатии на "среднее" изображение ...

Ответы [ 2 ]

13 голосов
/ 24 февраля 2012

Я бы изменил ссылку изображения " mid ", чтобы вызвать галерею onclick, не являясь частью самой галереи, например:.eq() метод гарантирует, что галерея начинается с первого изображения, потому что в противном случае она будет начинаться с последнего элемента, привязанного к fancybox.Вы можете указать, чтобы начать с другого элемента галереи.

5 голосов
/ 14 декабря 2012 
<div class="details_gallery">
 <a href="#" class="manualfancybox">Manual Call Fancybox</a>
 <div class="details_gallery_min">
  <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a>
  <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a>
  <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a>
  <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a>
 </div>
</div>

<script>

$(document).ready(function(){
    $(".manualfancybox").click(function() {
        var photos  = new Array();

        $(".details_gallery_min a").each(function(){

            href = $(this).attr("href"); 
            title = $(this).attr("title"); 
            photos.push({'href': href, 'title': title})         

        });

        jQuery.fancybox(photos , 
            {   'transitionIn' : 'elastic', 
                'easingIn' : 'easeOutBack', 
                'transitionOut' : 'elastic', 
                'easingOut' : 'easeInBack', 
                'opacity' : false, 
                'titleShow' : true, 
                'titlePosition' : 'over',
                'type'              : 'image',          
                'titleFromAlt' : true 
            }
        );
    });
});

</script>
...