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.
精彩评论