PHP display dynamically populated variable in separate code block

Question

I have a php loop that loads some images onto some slider:

<div id="slider" class="flexslider">
<ul class="slides">

foreach($imglist as $image) {

$caption =  // I am populating this variable from the image meta data

echo '<li><img src="'.$img_folder.$image.'">';
}
</ul>
</div>
<div id="caption-block" class="myNewDiv">
<p>
echo $caption;
</p>
</div>

I am also pulling meta data from the image and loading each meta data. My question has to do with the fact that I would like to load the caption outside of the in which the loop resides onto a separate . As you can probably infer, the code I have written does not work because $caption is not dynamically loaded as it's not inside the loop.

Is it possible to have the $caption which is on a separate div be populated dynamically with php? If so, what's the best approach?

Maybe I'm misunderstanding you, but I think you want to change $caption = to $image — Paul Dessert
– Paul Dessert, Commented Jul 25, 2014 at 22:26
Sorry perhaps I misguided, I will work on further elaborating the question. What I want to do is populate the $caption inside the <div class="myNewDiv">, which is outside of the loop that initializes that variable. — user3648426
– user3648426, Commented Jul 25, 2014 at 22:29
I see, I was thinking that'd be the case, but I thought it wouldn't hurt to ask. Thanks for your assistance. — user3648426
– user3648426, Commented Jul 25, 2014 at 22:34
Is the caption just a single element and the variable a string? If so I don't see what the problem is? — nanobar
– nanobar, Commented Jul 25, 2014 at 22:35

Josh KG · Accepted Answer · 2014-07-26 00:34:25Z

1

You can use javascript to dynamically inject the caption into the #caption-block div using a Flexslider callback. In that case, you could store the caption in a data attribute of the img tag and then pull it out using a custom function in the Flexslider before: callback. Here's the HTML/PHP:

<?php echo '<li><img src="'.$img_folder.$image.'" data-caption="'.$caption.'">'; ?>

Inside the Flexslider before: callback:

before: function(slider){
    // set current slide 
    var currSlide = slider.slides.eq(slider.animatingTo + 1);
    var caption = $(currSlide).find("img").data('caption');
    $('#caption-block p').text(caption);
}

answered Jul 26, 2014 at 0:34

Josh KG

5,1503 gold badges23 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

PHP display dynamically populated variable in separate code block

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related