I have a very simple wordpress problem, but I'm still struggling to figure out the solution. I have an anchor tag, and I want it to open an image gallery in a lightbox (as the default behavior when user clicks on one of the images from the image gallery) on click.

The image gallery should be hidden otherwise, visible only when the user clicks "show gallery" link.

Here's the code:

[gallery link="file" ids="163337,163336,163335,163334"]
<a href="#">View gallery</a>

Can someone help me please? How do I bind the two elements together? Is there any easy way like setting the class to the anchor tag and selector name to gallery tag (as X theme makes it easily done) or do I have to write the lightbox code from scratch? It would be highly appreciated.

  • This site isn't here to write the code for you. There is way too much info missing in order to answer your question. I suspect you'll want to learn about creating your own WP child theme where you can customize a WP theme to behave the way you want.
    – Duane Lortie
    Nov 17 '16 at 20:47
  • I'm not looking for anyone to write the code for me. I'm just wondering if there's any easy way to bind the two elements together or do I have to write the whole lightbox from scratch. Thanks for the reply anyway.
    – Janez Novak
    Nov 17 '16 at 21:00

As I understand it, you want to show a div element containing the gallery when Show Gallery is pressed - otherwise to hidden.

This can be accomplised with a couple of jQuery lines:

$( ".show" ).click(function() {
  $( ".gallery" ).addClass( "display" );

With the appropriate CSS. See jsfiddle Be sure to remember to include jquery in your theme if it doesn't contain it otherwise.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy