jquery lightbox组图像

Question

我使用这样的lightbox 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>

我想对图像进行分组，所以我将url写成这样的<a href='' rel='lightbox[group1]'></a>和<a href='' rel='lightbox[group2]'></a>

我怎么运行这个？$('a[@rel*=lightbox]').lightBox();不工作，或者可能是另一种方法？

Answer 1

如果您有这样的HTML标记：

<a href='' rel='group1'></a>和<a href='' rel='group2'></a>

您可以使用以下命令：

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

Answer 2

我已经找到了一个简单的解决方案，如果你有很多图片，你不需要在每个图片上都添加rel。只需用类的div包围图像，例如lightbox-group

示例：

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();                     
     });    
});

Answer 3

只需在您的all image组中编写rel=lightbox

并尝试使用

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

请参阅

*jQuery('[attribute=" value "]')：**选择具有指定属性的元素，其值包含给定子字符串。