点击链接列表会弹出一个使用fancybox的图片库

lists of links when clicked pops up an image gallery using fancybox

本文关键字：一个 fancybox 图片库 列表 链接      更新时间：2023-09-26

请有人帮我，非常感谢我能得到的任何帮助

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>

JS-

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

谢谢我这里有一把小提琴

页面上只能有一个具有相同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
            }
        }
    });
 });

尝试将其设置为类而不是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>

链路

如果你想为每个链接指定一个特定的库，你必须定义它们的内容，并为它们提供自己的事件处理程序。

相关文章：