Flexslider图像<li>由php动态生成。 尝试使用替代文字创建字幕

Question

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!

Answer 1

It sounds like you have only one .caption box? And you want its contents to change with each slide?

I would try something like:

before: function(slider) {
        var slideNumber = slider.currentSlide;
        var alt = $('.slides img').eq(slideNumber).attr('alt');
        $('.caption').html('<p>' + alt + '</p>');
    });
},

note that before runs at each slide transition, not just once like start

Edit

OP adjusted the above code (see comments below), but still has the "issue mentioned in the comment where the first image doesn't get a caption on it's second and subsequent scrolls"

Perhaps we should be using after instead of before? That way we don't need to do slideNumber+1 (since before was making this the previous slide.. You can perhaps remove the start function in favor of just doing this above the flexslider call

in $(window).load(function(){ or (document).ready(){:

    var alt = $('.slides img').eq(0).attr('alt'); 
    $('.caption').html('<p>' + alt + '</p>'); 

and within flexslider()

after:function(slider) { 
    var slideNumber = slider.currentSlide; 
    var alt = $('.slides img').eq(slideNumber).attr('alt'); 
    $('.caption').html('<p>' + alt + '</p>'); 
},