1

我正在为我的工作制作的网站使用 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>
4

1 回答 1

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();方法也可以对其他类名重复。

于 2012-07-27T06:39:44.187 回答