开发者

jquery lightbox group images

i use such lightbox http://www.leandrovieira.com/projects/jquery/lightbox/ here is example of using

<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>

i want to group images, so i write url like this <a href='' 开发者_运维技巧rel='lightbox[group1]'></a> and <a href='' rel='lightbox[group2]'></a>

how i run this? $('a[@rel*=lightbox]').lightBox(); not work, or may be anothe method?


I've found simple solution if you have a lot of pictures, you don't have to add rel to each. Just surround images with div with class e.g. lightbox-group

Example:

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


If you have HTML tags like this:

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

You can use this:

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


just write rel=lightbox in your all image group

and try with

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

see Here

*jQuery('[attribute="value"]') : ** Selects elements that have the specified attribute with a value containing the a given substring.


You have to modify the plugin like here. It's quite simple, but works like a charm.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜