列表点击时使用的fancybox

弹出一个图片库

请别人帮助我在此，非常感谢所有帮助我能列表点击时使用的fancybox

HTML

<a id="fancybox" href="javascript:;">Gallery 1</a> 
<br /> 
<a id="fancybox" href="javascript:;">Gallery 2</a> 
<br /> 
<a id="fancybox" href="javascript:;">Gallery 3</a>

$(document).ready(function() { 
    $("#fancybox").click(function() { 
     $.fancybox.open([ 
      { 
       href : 'http://fancyapps.com/fancybox/demo/1_b.jpg', 
       title : 'My title' 
      }, { 
       href : 'http://fancyapps.com/fancybox/demo/2_b.jpg', 
       title : '2nd title' 
      }, { 
       href : 'http://fancyapps.com/fancybox/demo/3_b.jpg' 
      } 
     ], { 
      helpers : { 
       thumbs : { 
        width: 75, 
        height: 50 
       } 
      } 
     }); 
    }); 
});

为你可以看到只有第一个链接正在工作，但我希望在每个链接都有一组不同的图像

for example (this is what I need to achieve) 
    <a id="fancybox" href="javascript:;">Gallery 1</a> 
     <div> 
      <img src="1.jpg"> 
      <img src="2.jpg"> 
      <img src="3.jpg"> 
      <img src="4.jpg"> 
     </div> 
    <br /> 
    <a id="fancybox" href="javascript:;">Gallery 2</a> 
     <div> 
      <img src="5.jpg"> 
      <img src="6.jpg"> 
      <img src="7.jpg"> 
      <img src="8.jpg"> 
     </div> 
    <br /> 
    <a id="fancybox" href="javascript:;">Gallery 3</a> 
     <div> 
      <img src="9.jpg"> 
      <img src="10.jpg"> 
      <img src="11.jpg"> 
      <img src="12.jpg"> 
     </div>

感谢，我这里有一个fiddle

来源

2013-08-17 Francis Alvin Tan

你想要更简单？检查http://stackoverflow.com/a/18258211/1055987 – JFK

http://fancyapps.com/fancybox/#useful - ＃9 – Janis

您只能在页面上拥有1个具有相同ID的元素。将id="fancyfox"更改为class="fancyfox"并将选择器更改为.fancyfox，您应该是金手指。

为了获得每个不同的内容链接，您可以考虑：

<a class="fancybox" href="javascript:;">Gallery 1 
    <div class="content" style="display:none;"> 
    <img src="1.jpg" title="test 1"> 
     <img src="2.jpg" title="test 2"> 
     <img src="3.jpg" title="test 3"> 
     <img src="4.jpg" title="test 4"> 
    </div> 
</a>

然后在点击事件中，你可以通过使用获得的图像：

$(".fancybox").click(function() { 
    var images=[]; 
    $(this).find(".content img").each(function(index,img) { 
     var $img = $(img); 
     images.push({ "href": $img.attr("src"), "title": $img.attr("title") }); 
    }); 

    $.fancybox.open(images, { 
     helpers : { 
      thumbs : { 
       width: 75, 
       height: 50 
      } 
     } 
    }); 
});

来源

2013-08-17 01:12:33

谢谢，需要画廊的内容不同 –

哇，作品像一个魅力，谢谢 –

提出了你的解决方案小提琴http://jsfiddle.net/MvvuE/131/ –

尝试将其设置为一类，而不是一个ID。

<a class="fancybox" href="javascript:;">Gallery 1</a> 
<br /> 
<a class="fancybox" href="javascript:;">Gallery 2</a> 
<br /> 
<a class="fancybox" href="javascript:;">Gallery 3</a>

link

，如果你想为每个链接一个特定的画廊，你就必须明确自己的内容，并给他们每人自己的事件处理程序。

来源

2013-08-17 01:12:25 Goodsoup

谢谢你，但我想要的重要的事情是显示不同的内容在每个链接 –

列表点击时使用的fancybox

回答

相关问题