[jasgoldcoastParticipant]

Hey there,

What CSS class do I add to an image in order to have it display in a lightbox.

I know there is the lightbox shortcode, but I would like to know what class that inserts into an image.

The reason I ask is I actually would like to have some images in a sidebar plugin use X theme lightbox instead of the one bundled with the plugin.

Cheers,
Jase

[Paul RModerator]

Hi Jase,

Thanks for writing in!

The default class for the lightbox is x-img-link

but you can also change it to anything else by changing the selector in lightbox

eg. changing it to my-second-portfolio

[image class="my-second-portfolio" src="http://yourdomain.com/image.jpg" alt="Example" type="thumbnail" link="true" href="http://yourdomain.com/image.jpg" title="Example Image"]

[lightbox selector=".my-second-portfolio" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="vertical" thumbnails="false"]

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

Hope that helps.

[jasgoldcoastParticipant]

When I add x-img-link to the image, it still does not show up in a lightbox. It just opens the image in a window.

Cheers,
Jase

[Paul RModerator]

Hi Jase,

You need to add an href to your links.

eg.

<a class="show-in-lightbox" href="http://images.paigehemmis.com/2014/10/Jase-color.jpg"><img alt="" src="http://images.paigehemmis.com/2014/10/Jase-color.jpg"></a>

Then add the code below in your child theme’s functions.php file.

function my_custom_footer_output() {
  ?>
   <script type="text/javascript" src="http://www.paigehemmis.com/wp-content/plugins/x-shortcodes/js/dist/site/vendor-ilightbox.min.js?ver=3.0.5"></script>
  <?php
}

add_action( 'wp_footer', 'my_custom_footer_output', 99999 );

Hope that helps.

[jasgoldcoastParticipant]

Still does not work. I verified that the script is loading in the footer, but still no dice with the lightbox loading.

Jase

[Paul RModerator]

Hi Jase,

There is one image in your sidebar that is missing and creating a javascript error.

I removed it and lightbox now works.

I removed this code

<a class="show-in-lightbox" href="http://images.paigehemmis.com/2015/02/Trevi-color.jpg"><img alt="" src="http://images.paigehemmis.com/2015/02/Trevi-color.jpg"></a>

Please check on your end.

Thanks

[jasgoldcoastParticipant]

Yeah that was just a test widget I was practicing on… What I actually want to do is have that instagram widget with the CAT-PIC-A-DAY load in X theme lightbox.

Also, Whatever was just changed has now stopped my countdown timer from displaying… It has id – #countdown-number and it sits under the wedding canopy.

[jasgoldcoastParticipant]

Oh… found the Countdown Timer… it just was not showing in the wordpress preview page mode.

[Paul RModerator]

Hi Jase,

I can see the image link in your instagram widget has a class swipebox

Try to add this

[lightbox selector=".swipebox" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="vertical" thumbnails="false"]

With regards to your countdown timer, it looks like it is in conflict with your lightbox.

Can you try removing the lightbox code and see if your counter will work just to confirm.

Thanks

[jasgoldcoastParticipant]

Yeah, when I put the Lightbox selector in a text widget, the timer disappears…

The lightbox selector in a normal post works.

Is there no way to call the lightbox without using the lightbox selector?

[jasgoldcoastParticipant]

Oh… it works… I added the code you gave me to the text widget above the instagram widget, and now it works a treat…

Although it seems the widget brings in many versions of the same photos… but at least it works! And it seems as though the countdown timer works with it also!

Thank you so much!

Jase

[Paul RModerator]

Hi Jase,

I can see it is working now.

Glad you were able to figure it out.

Have anice day!

[Author]

Posts