CODEWITHSUNDEEP
hyperlinktriggersgallerylightbox
vrwd
vrwd

Reputation: 165

Lightbox 2, Open existing gallery by link, without link being added to the gallery

with Lightbox 2 I have a set of links which create a gallery called "roadtrip" (pretty standard), however I also have a larger version of the image already in the gallery on the page and would like this to open the "roadtrip" gallery without it adding another instance to the existing images.

I also have a button called "View Large Images", which I want to open the "roadtrip" gallery also, without it creating an additional instance.

At the moment when I add these, even with href="" removed entirely it still triggers a blank instance in the gallery, I just need two other links to open the gallery without it trying to add anything to it.

For example:

<a href="image1.jpg" rel="lightbox[roadtrip]">Image One</a>
<a href="image2.jpg" rel="lightbox[roadtrip]">Image Two</a>
<a href="image3.jpg" rel="lightbox[roadtrip]">Image Three</a>
<a href="image4.jpg" rel="lightbox[roadtrip]">Image Four</a>

<a rel="lightbox[roadtrip]">View Large Images</a>

The problem is that although the "View Large Images" will open the lightbox gallery, I don't want lightbox to actually try to render anything from that link (which it does automatically), when clicking "View Large Images" it opens lightbox and hangs on a 5th instance of the gallery, you can then click left or right to view the actual images, but I would prefer something where when "View Large Images" is clicked it opens lightbox[roadtrip] at "Image One".

Hope I have explained things properly, there must be a way to do this.

Would anyone have any idea how to achieve this? Your help is much appreciated.

Upvotes: 3

Views: 3623

Answers (1)

vrwd
vrwd

Reputation: 165

Solved it myself using a little jQuery research, below is the solution I used.

You need jQuery initiated, which comes with lightbox 2.

HEAD section data:

<script type="text/javascript">

    $(document).ready(function() {

        $('#click-to-enlarge').click(function() {

            $('#gallery-image-1').trigger('click');

        });

    });

</script>

BODY section data:

<a href="image1.jpg" id="gallery-image-1" rel="lightbox[roadtrip]">Image One</a>
<a href="image2.jpg" rel="lightbox[roadtrip]">Image Two</a>
<a href="image3.jpg" rel="lightbox[roadtrip]">Image Three</a>
<a href="image4.jpg" rel="lightbox[roadtrip]">Image Four</a>

<a href="#" id="click-to-enlarge">View Large Images</a>

This is my first time answering a question on here, so someone may want to make the code example a bit more "pretty" for people to understand.

Hope this helps others in my situation :)

Upvotes: 5

Related Questions