1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Image lightbox from a link in custom page.

Discussion in 'Styling and Customization Questions' started by Simple, Nov 11, 2012.

  1. Simple

    Simple Member

    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
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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>
     
    rafass, gldtn and Jake Bunce like this.
  3. Simple

    Simple Member

    Thanks for the reply.

    Using this code didn't seem to work, showed the image fine, but linked directly to the image URL.
    Code:
    <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.
     
  4. Chris D

    Chris D XenForo Developer Staff Member

    Where are you using the code? It works for me in a XenForo page.
     
    Jake Bunce likes this.
  5. Simple

    Simple Member

    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 :)
     
    Chris D likes this.

Share This Page