从页面上的链接触发fancybox – 具有多个专辑的图像库
我制作了一个包含多张专辑的图库,每张专辑包含不同数量的照片。 我想要获得两个fancybox行为
要求1 – 点击相册的主要图像会打开一个精美的框并浏览所有相册的主要图像。 我得到了这部分工作
要求2 – 在每张专辑的下方,我都有一个锚标记,用于显示相册中的照片数量。 当我点击这个锚标签时,精美的盒子应该只浏览该特定专辑的照片。 我不确定如何将此锚标签绑定到触发器fancybox并浏览相册中的图像。 我有一个静态的json文件,我有两个属性imagesContained(array)
和imagesContained(array)
。
有人可以帮我解决这个问题吗?
$.each(data.gallery,function(i,item) { $.each(item.albums, function(i,photos) { imageFolder = sec.mediumUrl; imgInsert += ''; }); '' + count + '
为您的要求2
我一整天都在为自己的项目研究这个问题,我想出了一个解决方案。
说这是您网页上的图库:
*注意我已在图库1 *的第一个链接中添加了名为“Gallery_1”的ID
然后,对于图库下方的文本,请使用以下javascript:
Your Link Text
这对我来说非常合适。 希望能帮助到你!
基本上你的HTML渲染代码应该是这样的:
专辑1:
等等
专辑2:
等等
专辑3:
等等
请注意 ,每个专辑都设置了不同的rel
属性,无论它们是否共享同一个class
因此我们可以使用$("a.grouped_elements").fancybox({// options here})
为任何专辑启动fancybox。
现在,为了从不同的链接(一个锚标签,在您的示例中显示相册中的照片数量)启动每个相册,我们将为每个共享同一个class
但具有不同ID
相册设置锚点(@ RevCocnept建议并不是一个坏主意。)
open album 1 open album 2 open album 3
请注意 ,每个ID
与相应相册的rel
值具有完全相同的值。
现在我们可以为这三个锚使用单个脚本,以它们的共享class
为目标:
$(".description2").click(function(){ $('.grouped_elements[rel="'+this.id+'"]').eq(0).trigger("click"); });
请注意,我们使用.eq(0)
从第一个元素启动库,否则它将从DOM中添加的最后一个元素开始