ACF gallery + simple lightbox problem

• snouzle

• February 8, 2015 at 12:47 am

Hi,

I installed the WP plugin “Simple Lightbox” and the ACF plugin “Gallery”.

With the following code I display images on my site:

<?php
$images = get_field('gallery_images');
if( $images ): ?>

        <?php foreach( $images as $image ): ?>
            <div class="gallery_content_wrapper">
                <a href="<?php echo $image['url']; ?>">
                	<div class="gallery_image_wrapper">
                    	<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                	</div>
                </a>
            </div>
        <?php endforeach; ?>
<?php endif; ?>

Now, when I click on an image, it does not open in the lightbox only on the same site (target _self).

What am I doing wrong ?

Thanks in advance.

Kind regards

Joe

• snouzle

• February 9, 2015 at 5:45 pm

Has anyone an idea?

• mediawerk

• February 14, 2015 at 12:19 am

you may need to loop it through slb_activate()
details here

• synistar04

• February 14, 2015 at 8:58 am

I understand it has to be looped through slb_activate() but how? It’s not explained anywhere to dummies like me.

I have my gallery displaying using the following code, but the lightbox doesn’t do a thing.

$images = get_sub_field('sc_images');

if( $images ): ?>
<ul>

     <?php foreach( $images as $image ): ?>
     <li>
           <a href="<?php echo $image['url']; ?>">
	        <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
	   </a>
           <p><?php echo $image['caption']; ?></p>
     </li>
     <?php endforeach; ?>
</ul>
<?php endif; ?>

• powerj

• February 17, 2015 at 5:19 pm

Did you find an answer to this?

I don’t understand how to apply the slb_activate() also. My code is very similar to the above.

• powerj

• February 18, 2015 at 10:16 am

I thought I had this – I’m sure I’m close but it doesn’t work

if( $images ): ?>
    <div>
        <ul class="slides">
            <?php foreach( $images as $image ): ?>
           
                <li>
                   <?php $image_url = $image['url']; ?>
                    <?php $content="<img src='$image_url' />"; ?>

                   
					<?php if ( function_exists('slb_activate') ) ?>
    				<?php $content = slb_activate($content); ?>
					<?php echo $content; ?>

                    <p><?php echo $image['caption']; ?></p>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>

<?php endif;

• mediawerk

• February 20, 2015 at 9:31 pm

this should work:

<?php $images = get_field('gallery');
if( $images ): ?>
<div class="gallery">
    <ul>
        <?php foreach( $images as $image ): 
            $content = '<li>';
                $content .= '<a class="gallery_image" href="'. $image['url'] .'">';
                     $content .= '<img src="'. $image['sizes']['thumbnail'] .'" alt="'. $image['alt'] .'" />';
                $content .= '</a>';
            $content .= '</li>';
            if ( function_exists('slb_activate') ){
    $content = slb_activate($content);
    }
    
echo $content;?>
        <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

• snouzle

• March 8, 2015 at 6:40 pm

It doesn’t work for me. :/

<?php $images = get_field('gallery_images');
if( $images ): ?>

        <?php foreach( $images as $image ): ?>
            <div class="gallery_content_wrapper">
                <a href="<?php echo $image['url']; ?>">
                	<div class="gallery_image_wrapper">
                    	<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                	</div>
                </a>
            </div>
            
            <?php if ( function_exists('slb_activate') ){
		    $content = slb_activate($content);
		    }
			echo $content; ?>
            
        <?php endforeach; ?>
<?php endif; ?>

• snouzle

• March 8, 2015 at 6:48 pm

Okay…. I have understood. The content must be in the var $content.

Thanks @mediawerk.

Best regards.

Joe

• rosebean

• January 26, 2017 at 8:19 am

This works great! Now how do I go about adding the title under each thumbnail?

Thanks!

• mtm

• February 6, 2020 at 8:30 am

i’m seeing this issue too – almost certainly i’m doing something stupid but i’ve done this now in so many sites and i can’t for the life of me figure out what’s different here.

here’s the code:

<?php $images = get_field('project_images');
if( $images ): ?>
 <div class="car-main-col" id="masonry-wrap" data-columns>    
  <?php foreach( $images as $image ): 
   $content = '<div>';
   $content .= '<a class="gallery_image" href="'. $image['url'] .'">';
   $content .= '<img src="'. $image['sizes']['medium'] .'" alt="'. $image['alt'] .'" />';
   $content .= '</a>';
   $content .= '</div>';
  if ( function_exists('slb_activate') ){
  $content = slb_activate($content);
  }
  echo $content;?>
  <?php endforeach; ?>
 </div>
<?php endif; ?>

and the page can be seen here: https://dev-cro.matmartin.co.uk/project/function/

i’ve tried running it outside the masonry plugin (salvattore.js) and in separate default page templates without the extra functionality. no dice.

any help would be most welcome.

thanks.

• [email protected]

• January 24, 2023 at 8:39 am

Having problems with this code. Works perfectly int PHP7.4 but causes a fatal error in PHP8.

<!--Gallery Tag Lighbox Code//-->
<div class="centerWidth popupGallery">
<?php $images = get_field('pop_up_gallery');
$size = 'square'; // (thumbnail, medium, large, full or custom size)
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$caption = $image['caption'];
if ($images): ?>
<ul id="galleryList">
<?php foreach($images as $image_id): 
$content = '<li class="list-inline-item">';
$content = '<a class="gallery_image" href="'. wp_get_attachment_url($image_id, $url).'">';
$content = '<div class="galleryPhoto" style="background-image:url('. wp_get_attachment_url($image_id, $size) .');"></div>';
$content = '<div class="galleryTitle"><p>'.wp_get_attachment_caption($image_id, $caption).'</p></div>';
$content = '</a>';
$content = '</li>';
if ( function_exists('slb_activate') ){
$content = slb_activate($content);
}
echo $content; ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>			
</div>

• [email protected]

• January 26, 2023 at 10:50 am

Fatal error: Uncaught TypeError: Cannot access offset of type string on string in /home/tmpadev1co/public_html/wp-content/themes/Portico/single-properties.php:49 Stack trace: #0 /home/tmpadev1co/public_html/wp-includes/template-loader.php(106): include() #1 /home/tmpadev1co/public_html/wp-blog-header.php(19): require_once(‘/home/tmpadev1c…’) #2 /home/tmpadev1co/public_html/index.php(17): require(‘/home/tmpadev1c…’) #3 {main} thrown in /home/tmpadev1co/public_html/wp-content/themes/Portico/single-properties.php on line 49

this is line 49

$url = $image[‘url’];

• [email protected]

• January 26, 2023 at 11:43 am

Don’t need these
$url = $image[‘url’];
$title = $image[‘title’];
$alt = $image[‘alt’];
$caption = $image[‘caption’];

<!--Gallery Tag Lighbox Code//-->
<div class="centerWidth popupGallery">
<?php $images = get_field('pop_up_gallery');
$size = 'square'; // (thumbnail, medium, large, full or custom size)
if ($images): ?>
<ul id="galleryList">
<?php foreach($images as $image_id): 
$content = '<li class="list-inline-item">';
$content = '<a class="gallery_image" href="'. wp_get_attachment_url($image_id, $url).'">';
$content = '<div class="galleryPhoto" style="background-image:url('. wp_get_attachment_url($image_id, $size) .');"></div>';
$content = '<div class="galleryTitle"><p>'.wp_get_attachment_caption($image_id, $caption).'</p></div>';
$content = '</a>';
$content = '</li>';
if ( function_exists('slb_activate') ){
$content = slb_activate($content);
}
echo $content; ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>			
</div>