loving the X Theme, and working on another site with the theme purchased by a relative (on my reccomendation).

As much as I love X, this one has me stumped, and to the point where the relative wants to ditch the theme… but I want to persevere!

The topic says it all really:

What I need to achieve, is to have only one image ‘live’ on a section of a page, and that image to them open up a lightbox gallery of 15 to 20 related images.

Note
– the lightbox to appear above the page, not linking to a portfolio, or

further notes:
-also want to be able to add lightbox captions, as per usual.
-Do not want to have the rest of the 15-20 images ‘visible’ on the page (in order for the lightbox to show them)…. this is because the images are various reasons:
1. The images are differing sizes (meaning its impossible to lay them out in a block grid and still look good)
2. Can use wordpress gallery, which makes them uniform size…. but that leads back to no.3 below…
3. Main reason…. loads of images is way too messy.

Is there any way lightbox can achieve this?
I have tried every way I can think of, to achieve a very simple layout and effect… but I am stumped.

Help!….
Many thanks in advance (once again)

Using Visual Composer – In a content band or column where you want the very first image to appear:

1. Create a Responsive Slider – and this is key: DO NOT activate any navigation buttons options, or ‘auto play slides’.

2. Add a slide to the slider.

3. In this first slide, insert an image using shortcode like this: [image class="my-imageclass" src="http://insert-url-to-my-image.jpg" alt="optional name of my first image" type="thumbnail" link="true" href="http://insert-url-to-my-image.jpg" title="name of my first image" lightbox_caption="Optional content that will appear over image in lightbox if you put text here "]

4. Duplicate the first slide. Add a second slide, and third slide etc… (as many as you like) – and in each, change the URL of new image, and captions etc… as above. Also: NOTE** the ‘image class’ from above

5. Lastly, below the slider, add a ‘responsive lightbox’. In it’s options, make sure you set the ‘image class’ to the same as what you have put in your images above. You can also choose whether you want thumbnail navigation activated.

BOOM, that’s it. The first image appears – but because the slider doesn’t have any way of advancing the slides (controls are off) to show any of the other images (autoplay is also off)…. once the user clicks on the image, the lightbox pops up, and all the images play as they should in a lightbox.

I have added multiple galleries to the same page in this way, and as long as the ‘image class’ is set correctly in each image + it’s corresponding ‘responsive lightbox’, then you will only see the lightbox gallery for that particular image.

Very happy I finally got that sorted out… but actually would love to hear if there is another way.
Any comments?

Thanks for writing in & all of your hard work.

We really appreciate it. You created the gallery in correct method. If I want to create a gallery like you without Visual Editor, I’d arrange the shortcodes like you did for VC also.

I hope other users will find this tips of you really helpful when they search.

Have a nice day, Cheers!

This is a very helpful post here, I appreciate you sharing it. I copied what you did exactly, but every time I click on an image in the small slider, it keeps opening/linking to the image file in a new window. Here is my code-

[image class=”kitchen-slide” src=”http://raucn.com/wp-content/uploads/2014/08/RC-Web-Content-Work-1.jpg” alt=”Kitchen Remodel” type=”rounded” link=”true” href=”http://raucn.com/wp-content/uploads/2014/08/RC-Web-Content-Work-1.jpg” title=”Kitchen Remodel” lightbox_caption=”Kitchen Remodel Complete “]

The URL is raucn.com/home

Any tip tip fix this??