Support » Plugin: Simple Lightbox » Advanced Custom Fields: Show custom description in lightbox

  • Resolved dadra

    (@dadra)


    I’m creating a template that combines Advanced Custom Fields and Simple Lightbox. Each image on the page includes a custom caption. When the image is clicked, the full-size version opens in the lightbox. Is there a way to show the custom caption for each image in the lightbox as well? To clarify, below the image in the lightbox, it would say “Item 1 of 15” and then “My advanced custom fields caption text”.

    Example page:
    http://timberhomes.wpengine.com/what-we-build/timber-frame-houses/central-vermont-hybrid-home

    The template code:

    <?php
        ob_start();
        $image = get_field( 'img' );
        if( ! empty( $image ) ) {
        $url    = $image['url'];
        $alt    = $image['alt'];
        $size   = 'img-medium';
        $img    = $image['sizes'][ $size ];
    ?>
    
        <a href="<?php echo $url; ?>">
    
    	<h3><?php the_field('img-caption'); ?></h3>
    
            <img src="<?php echo $img; ?>" alt="<?php echo $alt; ?>" />
    
        </a>
    
    <?php } ?>
    <?php $content = ob_get_clean(); ?>
    <?php echo slb_activate($content); ?>

    Thanks in advance for any assistance, and as always for your excellent work on this plugin!

    https://wordpress.org/plugins/simple-lightbox/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Archetyped

    (@archetyped)

    Hi, setting the custom caption as the link’s title attribute will allow SLB to display it in the lightbox.

    See this page in SLB’s documentation for more information on how the lightbox’s title is determined.

    Fantastic! That’s it. So simple. Thanks a ton!

    For anyone who may be looking for this:

    <?php
        ob_start();
        $image = get_field( 'img' );
        if( ! empty( $image ) ) {
        $url    = $image['url'];
        $alt    = $image['alt'];
        $size   = 'img-medium';
        $img    = $image['sizes'][ $size ];
    ?>
    
        <a href="<?php echo $url; ?>" title="<?php the_field('img-caption'); ?>">
    
    	<h3><?php the_field('img-caption'); ?></h3>
    
            <img src="<?php echo $img; ?>" alt="<?php echo $alt; ?>" />
    
        </a>
    
    <?php } ?>
    <?php $content = ob_get_clean(); ?>
    <?php echo slb_activate($content); ?>

    Hmmm…This works great in Firefox, but I’m seeing an issue in Chrome, Safari (both desktop and mobile versions), and Opera. What happens is, after page load, whichever image is first opened in the lightbox does not show the custom caption/title attribute. You can cycle through the images using the next/previous arrows, and they all show the custom caption/title, but the first image to be opened does not. Here’s an example page:

    http://timberhomes.wpengine.com/what-we-build/timber-frame-houses/vermont-cabin-style-timber-frame-home

    Any ideas how to fix this? Seems like a strange bug. Thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Advanced Custom Fields: Show custom description in lightbox’ is closed to new replies.