Question

我正在为我正在为我的工作制作的网站使用Lightbox脚本，我计划包含大约100多张图片。使用这么多图像时有更好的解决方案吗？

有没有办法生成html链接而不是单独输入它们，因为我有这么多？

<a href="gallery/abcc/abcc01.jpg" rel="lightbox[abcc]"><img class="thumb" src="gallery/abcc/thumb.jpg" alt="ABCC Gallery" title="ABCC Gallery"/></a>
<a href="gallery/abcc/abcc02.jpg" rel="lightbox[abcc]"></a>
<a href="gallery/abcc/abcc03.jpg" rel="lightbox[abcc]"></a>
<a href="gallery/abcc/abcc04.jpg" rel="lightbox[abcc]"></a>
<!-- generate each link automatically? -->
<a href="gallery/abcc/abcc99.jpg" rel="lightbox[abcc]"></a>

Answer 1

参考：jsFiddle Lightbox v2.5.1 Demo

由于 Lightbox 脚本使用 jQuery 框架，您可以迭代所有具有thumb的类名称，并在该 父级上项目 ，锚a链接，添加必要的rel="lightbox"标记。

<强> HTML：

<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-3.jpg">
    <img class="thumb" src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-3.jpg" alt="gallery" title="Photo 1" />
</a>


<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-4.jpg">
    <img class="thumb" src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-4.jpg" alt="gallery" title="Photo 2" />
</a>


<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-5.jpg">
    <img class="thumb" src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-5.jpg" alt="gallery" title="Photo 3" />
</a>

<强> jQuery的：

$(document).ready(function() {

    // Scan the webpage for all class names of 'thumb' that is seen.
    $('.thumb').each(function(){

        // For each class name of 'thumb' found, go to the parent item of that thumb and apply the rel attribute.    
        $(this).parent().attr('rel','lightbox[myGallery]');

    });

});

由于上面使用的jQuery基于您的 HTML网页布局，因此可能需要将其调整为该页面上的实际内容。其他类名也可以重复.each();方法。

如何“自动”将Lightbox属性应用于网页上的锚标记？

1 个答案: