can I open the lightbox of a gallery with a link or a shortcode?

[neu23]

#457953

Hi Folks

I am wondering if it is possible to open a lightbox of a certain gallery with a link. Has someone a clue how that would work?

best sebastian

[berger_gds]

#469022

One option is:

<a href="lightox-image.jpg" rel="prettyPhoto"><img src="thumbnail-image.jpg" /></a>

[Michael C]

#469027

This depends on what exactly you mean by gallery. @berger_gds is correct in that you can open an image in that method. You can also load a gallery, but a lightbox gallery is a specific thing. If you have a Gallery Fusion Builder element on the page for example, it will be auto assigned a lightbox gallery ID which you can load from a link.

Example:
1. Find the gallery ID being used for the gallery element. To do that view the gallery on the front-end, right click on an image and inspect. You will see the link being used for the image includes the gallery ID: http://prntscr.com/jxkfxf

2. You can then copy that to a separate link. For example:

<a href="my-first-gallery-image.jpg" data-rel="iLightbox[b9e356723910aaff7cb]"> My Gallery </a>

This can also be the case for creating a separate gallery. For example:

<a href="image1.jpg" data-rel="iLightbox[mygallery]"> My Gallery </a>
<a href=""image2.jpg" data-rel="iLightbox[mygallery]"> My Gallery </a>
<a href=""image3.jpg" data-rel="iLightbox[mygallery]"> My Gallery </a>

This is three separate links to different images. However since the gallery ID part (mygallery) is the same, if you click one of these links all three images which appear in the lightbox gallery.

[Hirsala]

#470158

Hi
That is a very good idea. But if I want to put the link in the button element, then it does not work yet. What is wrong? Could someone help me? Thank you!

Zanny

[Michael C]

#470714

Hi Zanny, that is also possible but you need to add the data-rel into the button additional attributes. If you check the option description it gives some specific changes that need to be made:

Add additional attributes to the anchor tag. Separate attributes with a whitespace and use single quotes on the values, doubles don’t work. If you need to add square brackets, [ ], to your attributes, please use curly brackets, { }, instead. They will be replaced correctly on the frontend. ex: rel=’nofollow’.

So for this example you would need to add in:

data-rel='iLightbox{mygallery}'

Like so http://prntscr.com/jz14iv

[kokenet]

#531725

Hi Michael,

it doesnt work for me with the data-rel. I did the same as you posted with the curly brackets. Which link I have to put into the Button URL field? For now I have the link to the first image of the lightbox, but with that it only open this one picture in a lightbox by clicking the button. Need you help??

my Lightbox link: data-rel=’iLightbox{8d7491b6018694746d2}’

Cheers

[davidBHG]

#539055

This was bothering me as well and I came up with a workaround solution. For some reason the fusion button shortcode will not allow you to do this. Instead use the Fusion Code builder and create your own button using a href wrapped div tag.

To get the same style as your default button, create the button on your page and inspect it. Grab all the class styles and paste into your href code.

Example:

<a href="YOUR-FIRST-GALLERY-IMAGE-URL.jpg" class="fusion-lightbox fusion-button button-flat fusion-button-square button-large button-default button-2" data-rel="iLightbox[YOUR-GALLERY-ID]" data-caption="">
<div class="fusion-button-wrapper">YOUR BUTTON TEXT</div>
</a>

Hope this helps!

:::EDIT:::
After a few more tests I realized that this method duplicates the first image in the gallery. Haven’t found a fix yet.

[kokenet]

#539081

Hi David,

thanks for your help, but I already found a solution for the gallery opening by Button click. The solution by Michael works very well, if you follow exactly his instuctions. And with my solution there is no double image.

I created a gallery as element in a container on my subpage, where it should be shown. To get the galleryID, I set the gallery as visible, then I put the gallery ID into the link (Michael has shown above with the curly brackets), then into the field of the button link I put an image link, which is not part of the gallery, so I havent the problem with a double image.

For the problem to hide the gallery everywhere I used this soluton. I set the container t invisible on small and large screens, and the gallery itself to invisible for medium screens (this way because you cant set all 3 screens at once to invisible).
But this solution only works this way, if the gallery is on the same page as element, where you will use it as lightbox by button click.
Here is my result:
https://www.natur-erlebnishof.at/wohnen/wohnung-lebensbaum/

[elvinatt]

#542114

To hide the gallery everywhere you could also assign a custom CSS class to the gallery element (I used “tohide” but you can name it as you like) and then add in your theme options> custom CSS

.tohide {
visibility: hidden;
}

[mammalalien]

#572733

You can use any link to open to any slide without the double-image problem by simply opening the lightbox and grabbing the relative, anchor URL for the slide that you want to open to and using that as your link target.

For example,
Say you are on this page:
https://roh.com.au/galleries/coyote-mustang-rf4/

If you open the first gallery image, the URL will update to this:
https://roh.com.au/galleries/coyote-mustang-rf4/#iLightbox[]/0

So the relative anchor link is:
#iLightbox[]/0

So placing this in the href attribute of the link element will open to that particular slide:
<a href="#iLightbox[]/0" class="roh-gallery-early-link">View Gallery</a>

As it is an array of images, the numbering starts at zero, not one. That’s computer scientists for you.

If you want to target a particular iLightbox instance, add its ID into the square braces provided. I didn’t need to in my case because I am using a common instance for the whole page.

[timatacademy]

#633328

I’ve noticed that while this works great on desktop browsers, it DOESN’T work on my iphone – thus having to explore these other methods here. Current situation is it now works but I am duplicating the 1st image as others mentioned here. Best fix I can figure out is use a “Start Photo Tour” image as the 1st on every gallery on the site. Not ideal but better than 2 of the first image or trying to add an image that isn’t part of the gallery.

[Author]

Posts