This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

How to have gallery triggered in lightbox with single thumbnail

Viewing 8 replies - 1 through 8 (of 8 total)
  • Author
    Replies
  • #5732
    Jason Bobich
    Keymaster

    @missalice

    PrettyPhoto will take all links to images that you append a gallery tag to and group them together in the lightbox like this:

    <a href="image.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 1">
          <img src="thumb.jpg" />
    </a>
    <a href="image2.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 2">
          <img src="thumb2.jpg" />
    </a>
    <a href="image3.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 3">
          <img src="thumb3.jpg" />
    </a>
    <a href="image4.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 4">
          <img src="thumb4.jpg" />
    </a>

    So, in theory, if you wanted to hide everything but the first one, you’d just do that for the user and not even worry about thumbnails for the hidden image. You could do it something like this perhaps:

    <a href="image.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 1">
          <img src="thumb.jpg" />
    </a>
    <div style="display:none">
    <a href="image2.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 2">Image 2</a>
    <a href="image3.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 3">Image 3</a>
    <a href="image4.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 4">Image 4</a>
    </div>
    #5739
    missalice
    Participant

    Thanks Jason,
    Unfortunetly, it doesn’t work. May be i miss smthing :
    This is the name of my included gallery : [gallery link="file"]

    Should the Html code look like this ?

    <a href="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-25.jpg">
    </a>
    <div style="display:none">
    <a href="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-2.jpg" title="deluxe-cottage-tulamben-2"></a>
    <a href="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-7.jpg" title="deluxe-cottage-tulamben-7"></a>
    <a href="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-9.jpg" title="deluxe-cottage-tulamben-9"></a>
    </div>

    All my images are imported in a 472×295 original size.
    WP 3.4.2

    Many thanks
    Alice

    #5741
    missalice
    Participant

    HERE IS THE CODE of the Gallery which is not hidden :
    [gallery exclude="15" link="file" order="DESC"]


    ” title=”Image 2″>Image 2
    ” title=”Image 3″>Image 3
    ” title=”Image 4″>Image 4

    Any idea ?
    Thanks

    #5747
    Jason Bobich
    Keymaster

    Doing this with an actual WordPress [gallery] might look something like this —

    <a href="image.jpg" rel="themeblvd_lightbox[gallery-1]" title="Image">
          <img src="thumb.jpg" />
    </a>
    
    <div style="display:none">
    [gallery link="file"]
    </div>
    #24914
    larryhir
    Participant

    Jason,

    I want to do exactly this– add a gallery popup from a single image, but rel=”themeblvd_lightbox” no longer works. Is there any way to do it with the short code?

    Thanks if you can help

    #24932
    Jason Bobich
    Keymaster

    Yeah this topic is from awhile back before the entire lightbox system was redone on the Magnific Popup script, as we’re no longer using prettyPhoto.

    This could be one way to do this that would work. — Setup a gallery using the theme’s lightbox shortcodes. And then just wrap all the items, except the first, in a DIV that hides them. In theory that should work, I would think.

    [raw]
    [lightbox_gallery]
    [lightbox link="http://yoursite.com/image.jpg" thumb="http://yoursite.com/thumb.jpg" title="Lightbox Example"]
    <div style="display:none">
    [lightbox link="http://yoursite.com/image-2.jpg" thumb="http://yoursite.com/thumb-2.jpg" title="Lightbox Example 2"]
    [lightbox link="http://yoursite.com/image-3.jpg" thumb="http://yoursite.com/thumb-3.jpg" title="Lightbox Example 3"]
    [lightbox link="http://yoursite.com/image-4.jpg" thumb="http://yoursite.com/thumb-4.jpg" title="Lightbox Example 4"]
    </div>
    [/lightbox_gallery]
    [/raw]

    http://demoblvd.com/legacy/shortcodes/generator/lightbox/

    #24941
    larryhir
    Participant

    I will give it a try…thanks as always for the great support!

    #24942
    larryhir
    Participant

    Just wanted to report this works well, thanks again!

Viewing 8 replies - 1 through 8 (of 8 total)

The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.