Displaying an image's alt title and caption inside a fancybox window. Working, but showing the same alt and caption for each image

Question

I've been at this for hours so maybe someone here can help :)

Basically I have a fancybox gallery that loads images attached to a post. As you can see below, I want to echo either the image's caption or alt title into the fancybox window. Currently it works, but it only shows the alt and caption for one of the images, which looks to be the first.

I can echo the alt title and caption of each image onto the page fine, but when it's used inside the fancybox window there's an issue. Anyone know why? Do I need to do some more looping or something? thanks for looking!

<script type="text/javascript">
//<![CDATA[

var $j = jQuery.noConflict();

$j(document).ready(function() {

//fancybox
$j("a[rel=gallery]").fancybox({
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic',
    'easingIn'      : 'easeOutBack',
    'easingOut'     : 'easeInBack',
    'speedIn'       : 250,
    'speedOut'      : 250,
    'changeSpeed'   : 250,
    'overlayShow'   : false,
    'titlePosition'     : 'inside',
    'titleFormat'       : 

    function(title, currentArray, currentIndex, currentOpts) {

        <?php 

        $images = get_children( array(
            'post_parent' => $post->ID, 
            'post_status' => 'inherit', 
            'post_type' => 'attachment', 
            'post_mime_type' => 'image', 
            'order' => 'ASC', 
            'orderby' => 'menu_order ID'
        ));

        //caption
        if ($images) {
            foreach($images as $image) {
                $caption = $image->post_excerpt;
            }   
        }

        //alt title
        foreach ($images as $attachment_id => $image) {
            $img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); 
        }    

        ?>

        //here's where I'm trying to echo the caption or alt image for testing
        return '<?php echo $caption; echo $img_alt; ?><span id="fancybox-title-over"><span class="index">' + (currentIndex + 1) + ' of ' + currentArray.length + (title.length ? '</span><span class="fancybox-title">' + title : '') + '</span>' + '<span class="phone"><?php echo $phone; ?></span></span>';

    }
});

});

//]]>
</script>

Answer 1

Your problem is with your foreach loops... here:

 if ($images) {
    foreach($images as $image) {
        $caption = $image->post_excerpt;
    }   
 }

and here:

 //alt title
 foreach ($images as $attachment_id => $image) {
    $img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); 
 } 

Basically what is happening is that your $caption and $img_alt variables are being set at each iteration of your loop, but you are not returning or saving the new value. Instead you are just letting the loop continue running and you $caption and $img_alt variables are being set to the next value (making your loop worthless).

What you need to do is this. First move your PHP loop outside of your callback, and save your captions and img_alts to two new arrays. It should look something like this:

<?php 

    $images = get_children( array(
        'post_parent' => $post->ID, 
        'post_status' => 'inherit', 
        'post_type' => 'attachment', 
        'post_mime_type' => 'image', 
        'order' => 'ASC', 
        'orderby' => 'menu_order ID'
    ));

    //caption
    $captions = array();
    if ($images) {
        foreach($images as $image) {
            $captions[] = $image->post_excerpt;
        }   
    }

    //alt title
    $img_alts = array();
    foreach ($images as $attachment_id => $image) {
        $img_alts[] = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); 
    }    

    ?> 

Now output the values of the captions and javascript into two hidden lists on the page. The reason for outputting them is so that we can easily grab the text using some javascript later.

<ol id="captions">
    <?php
    foreach ($captions as $caption){
        echo '<li>' . $caption . '</li>'; 
    };
    ?>
</ol>

Do the same thing as above with your img_alts.

Now rewrite the callback in your javascript function to look something like this. Here I am assuming that 'currentIndex' matches the whatever the index number of the currently displayed image is:

function(title, currentArray, currentIndex, currentOpts) {

    // get your caption
    var caption = jQuery('#captions').get(currentIndex).text();

    // get your img alt
    var img_alt = jQuery('#img_alts').get(currentIndex).text();

    var html = '<span class="caption">' + caption + '</span>';
    html += '<span class="img_alt">' + img_alt + '</span>';

    return html;
}

I have not checked to see if this code works so there may be some errors in it, but if you follow my logic something like this should solve your problem. Hope this helps.

Answer 2

Ok so I went with an easier alternative. I left fancybox alone so it's still pulling the title attribute of the image but I've just changed how the title is being added to the images from WordPress. So instead of using the title from the WP image, It's using the alt or caption, depending on which one I go with. Done and dusted. I also read some things about currentIndex & fancybox and found some other people having issues with it, hence the alternate solution.