用其他链接调用fancybox画廊答案

【问题标题】：calling fancybox gallery with other link用其他链接调用fancybox画廊
【发布时间】：2012-03-15 01:08:43
【问题描述】：

我的情况很独特。这是我的场景： 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>

我想在点击“中间”图片时触发“详细信息”图库...

【问题讨论】：

标签： jquery fancybox gallery

【解决方案1】：

我要做的是修改“mid”图像的链接以触发画廊onclick，而不是画廊本身的一部分，例如：

<a href="max/1.jpg" onclick="$('a.fancybox').eq(0).trigger('click'); return false;"><img src="mid/1.jpg" alt="mid image" /></a>

.eq() 方法确保图库从第一张图像开始，否则它将从绑定到 fancybox 的最后一个元素开始。不过，您可以指定从图库的另一个元素开始。

【讨论】：

那么请不要忘记将此标记为正确答案，谢谢;)
很高兴我需要它，你用 alt="mid image" 做什么？
@SvenB alt="mid image" 只是图像描述，对您正在显示的图像有意义，有助于残障人士的屏幕阅读器......这只是一个例子，因为我不喜欢将带有该属性的 <img> 标记用于验证目的

【解决方案2】：

<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>

【讨论】：