I have a vanilla flexslider installation on my site. The slider operates by cycling through list items in an unordered list. You can add captions simply by adding a caption container after the list item. This works well with hard coded images.
The problem I am facing is that my site has multiple sections, with a different slide show for each section. Instead of hard coding the li elements, I'm generating them with php, so that when a user visits a page, the php figures out which page the user is viewing, and passes that through to the slideshow. The slideshow then finds the proper image directory and loads all of the images in that directory whether there be two or twenty. It's much easier than hard coding each slideshow, and it works beautifully.
<?php
$dh = "image/slideShows/$slideShow/";
$images = glob($dh . "*.jpg");
foreach($images as $image){
?><li><img src="<?php echo $image;?>" alt="caption text" /></li><?php
}
closedir($dh);
?>
I need to get flexslider to read the alt text for each dynamically generated image, and then place it in a caption container:
<p class="caption">The alt text should show up here.</p>
I've tried using:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
controlsContainer: "#slideShowContainer",
start: function(slider) {
$('.caption').html(this.alt);
},
});
});
and playing around with flexslider's current.slide to no avail. I've been searching on this all night and I can't seem to figure this one out. I'm hoping someone here can provide the missing link for me.
Thanks in advance.
EDIT: I figured this out, and it was seriously a matter of over-complication. All I had to do was call the EXIF data that I was using for the "alt" attribute inside of the caption. I have no idea why it took me so long to realize this. Thank you both for your help!