Open image gallery on link click

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.

Topic lightbox php jquery Wordpress javascript

Category Web

1
answered at

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.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.