Image lightbox from a link in custom page.

[Simple]

Hi.

As the title says, is there any built in code that I can use to have a link make a lightbox pop up when you click on it. Must be able to work in a custom HTML node page.

Eg.

Image of Google logo

It should be so that when you click on the link it makes a lightbox popup with the image instead of taking you to a new page.

Obviously I can do this with the hundreds of lightbox scripts out there, but prefer using stuff built within Xenforo.

Thanks

 

[Chris D]

I believe images that launch in a lightbox in XenForo do so by using a special HTML class called LbImage on the and LbTrigger on the URL.

So something like:

<img src="https://www.google.co.za/images/srpr/logo3w.png" class="LbImage" />

EDIT 2: Being dumb...

It needs a href adding for the lightbox URL too... so the following I have tested works.

Would be something like:

<a href="https://www.google.co.za/images/srpr/logo3w.png" class="LbTrigger" data-href="misc/lightbox"><img src="https://www.google.co.za/images/srpr/logo3w.png" class="LbImage" /></a>

 

[Simple]

Thanks for the reply.

Using this code didn't seem to work, showed the image fine, but linked directly to the image URL.

<a href="https://www.google.co.za/images/srpr/logo3w.png" class="LbTrigger" data-href="misc/lightbox"><img src="https://www.google.co.za/images/srpr/logo3w.png" class="LbImage" /></a>

After doing some more searching it seems to be quite a commonly asked question:

What code is needed to call the Lightbox?
Lightbox for own pages
Or even Open html page in an overlay?

Edit:
Found this - Working with Images questions and Lightpod
Might find some stuff in there that could help.

 

[Chris D]

Where are you using the code? It works for me in a XenForo page.

 

[Simple]

Sorry, does actually work!

I was just using Chromes Inspect Element and pasting the code in somewhere to test, which didn't work.
Used the proper HTML editor in ACP and it worked perfectly

Even works with the "width" and "height" attributes so should be perfect.
Removing the image and using some text as the hyperlink also works perfectly.

Thanks for the help, much appreciated