drddx3115 2012-06-26 06:52
浏览 108
已采纳

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

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!

  • 写回答

2条回答 默认 最新

  • douaonong7807 2012-06-26 19:52
    关注

    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>'); 
    },
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿