jQuery灯箱群组图片

如何解决jQuery灯箱群组图片

| 我使用这样的灯箱http://www.leandrovieira.com/projects/jquery/lightbox/这里是使用示例

<script type=\"text/javascript\">
$(function() {
    // Use this example,or...
    $(\'a[@rel*=lightbox]\').lightBox(); // Select all links that contains lightbox in the attribute rel
    // This,or...
    $(\'#gallery a\').lightBox(); // Select all links in object with gallery ID
    // This,or...
    $(\'a.lightbox\').lightBox(); // Select all links with lightbox class
    // This,or...
    $(\'a\').lightBox(); // Select all links in the page
    // ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

我想对图像进行分组，所以我写这样的网址

<a href=\'\' rel=\'lightbox[group1]\'></a>

和

<a href=\'\' rel=\'lightbox[group2]\'></a>

我怎么运行这个？

$(\'a[@rel*=lightbox]\').lightBox();

不起作用，或者是其他方法吗？     

解决方法

如果您有这样的HTML标记：

<a href=\'\' rel=\'group1\'></a>

和

<a href=\'\' rel=\'group2\'></a>

您可以使用此：

$(\'a[@rel=group1]\').lightBox();

和

$(\'a[@rel=group2]\').lightBox();

    ,如果您有很多图片，则不必为每个图片都添加相关内容。只需将div图像包围在类上即可灯箱组 例： 的HTML

<div class=\"lightbox-group\" id=\"first\">
<a href=\"...\"><img src=\"...\" /></a>
<a href=\"...\"><img src=\"...\" /></a>
<a href=\"...\"><img src=\"...\" /></a>
</div>

<div class=\"lightbox-group\" id=\"second\">
<a href=\"...\"><img src=\"...\" /></a>
<a href=\"...\"><img src=\"...\" /></a>
<a href=\"...\"><img src=\"...\" /></a>
</div>

JS

$(document).ready(function() {
    $(\'div.lightbox-group\').each(function(){
        $(this).find(\'a\').lightBox();                     
     });    
});

    ,只需在您的所有图片组中写

rel=lightbox

并尝试

      $(\'a[@rel*=lightbox]\').lightBox();

看这里   * jQuery（\'[attribute = \“ value \”] \'）：**   选择具有   具有值的指定属性   包含给定的子字符串。     ,您必须像这里一样修改插件。它很简单，但是却很吸引人。