Support

Account

Home Forums Add-ons Gallery Field how to add a lightbox to acf gallery

Solving

how to add a lightbox to acf gallery

  • Hello
    I use the free ACF gallery plugin, everything is going well but I would like to be able to add a lightbox. I would like when I click on a thumbnail, a larger image appears, or when the mouse hovers over the thumbnail. Many thanks for the help
    Here is the code of my gallery

    
    <?php
        //Get the images ids from the post_metadata
        $images = acf_photo_gallery('gallery', $post->ID);
        //Check if return array has anything in it
        if( count($images) ):
            //Cool, we got some data so now let's loop over it
            foreach($images as $image):
                $id = $image['id']; // The attachment id of the media
                $title = $image['title']; //The title
                $caption= $image['caption']; //The caption
                $full_image_url= $image['full_image_url']; //Full size image url
                $full_image_url = acf_photo_gallery_resize_image($full_image_url, 262, 160); //Resized size to 262px width by 160px height image url
                $thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
                $url= $image['url']; //Goto any link when clicked
                $target= $image['target']; //Open normal or new tab
                $alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
                $class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
    ?>
    <div class="col-xs-6 col-md-3">
        <div class="thumbnail">
            <?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
                <img src="<?php echo $full_image_url; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>">
            <?php if( !empty($url) ){ ?></a><?php } ?>
        </div>
    </div>
    <?php endforeach; endif; ?>
    
  • Thank you very much for the link

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.