jQuery lightbox problems

I have a num开发者_运维知识库ber of images on a page, some with extra detailed images that are hidden with css, so they can only be visible in the light box.

This can be seen here.

Each set of images is within a div, the problem i have is that when you access the lightbox, you can click next and go through all the images on the page, i wan't the user to only be able to click next/previous to access the images within that div, and not the whole page, is this do able?

Thank you

I'm sure if you can do this with the lightbox plugin but I use the fancybox plugin and display sets of images using Javascript.

I'm displaying them via a link but you could easily modify it.

<a href="Javascript:DisplaySetOne();" title="View Images">View Images</a>

And the Javascript

function DisplaySetOne() {


        $.fancybox([
    { 'href': '../Content/A.jpg', 'title': 'A' },
    { 'href': '../Content/B.jpg', 'title': 'B' },
    { 'href': '../Content/C.jpg', 'title': 'C' }
    ], {
        'padding': 0,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'image',
        'changeFade': 0

    })
    };

I just ran into the same problem and wanted to provide the solution for future reference:

You could group them into imagesets like this

<div id="container1">
    <img rel="lightbox[container1]" src="asdf1.png" alt="asdf1_image" />
    <img rel="lightbox[container1]" src="asdf2.png" alt="asdf2_image" />
    <img rel="lightbox[container1]" src="asdf3.png" alt="asdf3_image" />
</div>
<div id="container2">
    <img rel="lightbox[container2]" src="asdf4.png" alt="asdf4_image" />
    <img rel="lightbox[container2]" src="asdf5.png" alt="asdf5_image" />
    <img rel="lightbox[container2]" src="asdf6.png" alt="asdf6_image" />
</div>

The current version of lightbox and its documentation uses the data-lightbox attribute and I had to do it in a legacy application using Version 2.51 which still relied on the rel attribute.