Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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>
share|improve this question

2 Answers 2

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.

share|improve this answer
    
Hi @drebabels, thanks for your answer. I was able to get the captions and alt values into the lists as you suggested but I'm stuck with your last part. I'm getting this... Error: $j("#captions").get(currentIndex).text is not a function. I replaced your jQuery with my $j but it doesn't work either way. I looked at the docs on jQuery index() but I'm afraid it was no help for me. –  Andrew Sep 2 '11 at 11:48
    
Make sure you have the () at the end of the text function... your code should look like $j("#captions").get(currentIndex).text() instead of $j("#captions").get(currentIndex).text –  drebabels Sep 2 '11 at 16:49
    
I do have the () in there, but that's how the firefox error console outputs it as. Maybe I need a better debugger :) I'll keep digging with this currentIndex stuff and see how I go –  Andrew Sep 2 '11 at 23:50
    
I realized there is a mistake with my code (although I don't think this is the problem). Change $j('#captions').get(currentIndex).text() to $j('#captions li').get(currentIndex).text() –  drebabels Sep 3 '11 at 4:21
    
And try dumping the #captions jQuery object and the currentIndex variable to console to make sure that those are returning the correct values... i.e. console.log( $j('#captions li') ); and console.log( currentIndex ); –  drebabels Sep 3 '11 at 4:24
up vote 0 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.