javascript - 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.

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.

• javascript
• php
• jquery
• lightbox

Share Improve this question edited Dec 13, 2016 at 14:12 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Nov 17, 2016 at 20:31 Janez NovakJanez Novak 2

• 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 Commented Nov 17, 2016 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 Commented Nov 17, 2016 at 21:00

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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.

Following could do it:

<?php

add_filter('do_shortcode_tag', 'wpse_247589_toggle_gallery_visibility', 10, 2 );

function wpse_247589_toggle_gallery_visibility( $output, $tag ){
    
    if( 'gallery' === $tag ){
        
        $id = substr(uniqid(), 0, 12);
        
        ob_start();
        ?>
        <a href="#" class="toggle-gallery-visibility" data-instance-id="gallery-<?php echo $id; ?>">View gallery</a>
        
        <script type="text/javascript">
            jQuery(function(){
                jQuery('a[data-instance-id="gallery-<?php echo $id; ?>"]').click(function(){
                    jQuery(this).parent().find('.gallery').toggle();
                });
            });
        </script>
        
        <?php
        $output .= ob_get_clean();
    }
    
    return $output;
}

Explanation:

1. We hook to the do_shortcode_tag filter, where we are able to enrich the output of the shortcode.
2. A unique Show gallery -link is output next to each gallery.
3. A event listener is bound to the link, which toggles the visibility of the gallery element whenever the link is clicked.
4. The solution just toggles the visibility, so make sure to hide the .gallery elements with CSS in your theme, and let this solution display it.
5. The solution should work with multiple shortcodes on the same page, because the button has a unique identifier. (note that it will change on each request so don't write styles or anything against it)