How to have gallery triggered in lightbox with single thumbnail

[missalice]

Dear Jason,
I’m looking for the key to do a single image opening a pop gallery, without having all the pictures in columns on my page. Just 1 thumbail and all the others “hiden”, just visible through the pop up?
As you did it here http://www.borthwilson.com/photos/#!prettyPhoto

I’m on WP 3.4.2.
http://www.baliberty.com.
I would like to shom the details for each kinf of accomodation, here
http://www.baliberty.com/niveau-1-padi-openwater/

Thanks for your help !
Alice

Topic

[Jason Bobich]

@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>

[missalice]

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

[missalice]

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

[Jason Bobich]

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>

[larryhir]

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

[Jason Bobich]

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/

[larryhir]

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

[larryhir]

Just wanted to report this works well, thanks again!

[Author]

Replies