[hyperdrive_boomParticipant]

Good afternoon,

From looking at your example I can see how the lightbox works:

http://theme.co/x/demo/integrity/1/shortcodes/responsive-lightbox/

I would like it so only one of those images would be visible on the page when you first go on but when you clicked on it it would give you access/you could slide to all four in the lightbox mode.

I have the latest X theme.

Thank you!

[JadeModerator]

Hi there,

Thanks for writing in!

To achieve that, you can do the following.

1. Create gallery using wordpress native gallery shortcode.
http://screencast.com/t/2dicRsQsY7

Make sure to select Link to Media file

http://screencast.com/t/3crY2e5we7E

You can drag images to your desired order.

2. Add lightbox shortcode to your page.

[lightbox selector=".gallery-item a" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

Your code together with the gallery will look something like this.

[lightbox selector=".gallery-item a" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

3. Hide your gallery images by wrapping it in a div element.

<div style="display:none">[gallery link="file" ids="101,100,98,97"]</div>

4. Create button and link it to your first image.

eg.

[button type="real" shape="square" size="mini" href="http://yoursite.com/wp-content/uploads/2013/06/image.jpg" title="Example"]Square Button[/button]

5. Wrap your button in a div with selector to make it open in a lightbox.

eg.

<div class="gallery-item">[button type="real" shape="square" size="mini" href="http://paulravena.com/wp-content/uploads/2013/06/cd_6_flat4-150x150.jpg" title="Example"]Square Button[/button]</div>

Your final code will look similar to this.

<div style="display:none">[gallery link="file" ids="101,100,98,97"]</div>
[lightbox selector=".gallery-item a" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]
<div class="gallery-item">[button type="real" shape="square" size="mini" href="http://paulravena.com/wp-content/uploads/2013/06/cd_6_flat4-150x150.jpg" title="Example"]Square Button[/button]</div>

If you are using cornerstone you can do these in a text element.

Hope that helps

[hyperdrive_boomParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[hyperdrive_boomParticipant]

This reply has been marked as private.

[JadeModerator]

Hi Jason,

Would you mind pointing us to the direct URL where you setup the lightbox gallery. I have tried to check the pages of your site but I can’t seem to find the actual page.

Thank you.

[Author]

Posts