1

我的网站上有一个香草 flexslider 安装。滑块通过循环浏览无序列表中的列表项来操作。您只需在列表项后添加一个标题容器即可添加标题。这适用于硬编码图像。

我面临的问题是我的网站有多个部分，每个部分都有不同的幻灯片放映。我没有对 li 元素进行硬编码，而是使用 php 生成它们，这样当用户访问页面时，php 会确定用户正在查看的页面，并将其传递给幻灯片。然后幻灯片会找到正确的图像目录并加载该目录中的所有图像，无论是两个还是二十个。这比对每个幻灯片进行硬编码要容易得多，而且效果很好。

    <?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);
    ?>

我需要让 flexslider 读取每个动态生成的图像的 alt 文本，然后将其放在标题容器中：

    <p class="caption">The alt text should show up here.</p>

我试过使用：

    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "fade",
        controlsContainer: "#slideShowContainer",
        start: function(slider) {
         $('.caption').html(this.alt);
        },
      });
    });

并玩弄 flexslider 的 current.slide 无济于事。我整晚都在寻找这个，我似乎无法弄清楚这个。我希望这里有人可以为我提供缺少的链接。

提前致谢。

编辑：我想通了，这严重是一个过于复杂的问题。我所要做的就是调用我用于标题内“alt”属性的 EXIF 数据。我不知道为什么我花了这么长时间才意识到这一点。谢谢你们的帮助！

4

2 回答 2

1 
start: function(slider) {
     var slideNumber = slider.currentSlide; 
     var alt = $('.slides img').eq(slideNumber + 1).attr('alt'); 
     $('.caption').html('<p>' + alt + '</p>'); 
    },
    before: function(slider) {
     var slideNumber = (slider.currentSlide + 1); 
     var alt = $('.slides img').eq(slideNumber + 1).attr('alt'); 
     $('.caption').html('<p>' + alt + '</p>'); 
    }
于 2012-12-02T19:20:42.120 回答
0

听起来你只有一个.caption盒子？并且您希望其内容随每张幻灯片而变化？

我会尝试类似的东西：

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

请注意，before在每个幻灯片过渡处运行，而不仅仅是一次start

编辑

OP 调整了上面的代码（见下面的评论），但仍然有“评论中提到的问题，即第一张图片没有在它的第二个和后续滚动上获得标题”

也许我们应该使用after而不是before？这样我们就不需要这样做slideNumber+1（因为before这是在上一张幻灯片中制作的。您也许可以删除该函数以支持在调用start上方执行此操作flexslider

在$(window).load(function(){或(document).ready(){：

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

并且在flexslider()

after:function(slider) { 
    var slideNumber = slider.currentSlide; 
    var alt = $('.slides img').eq(slideNumber).attr('alt'); 
    $('.caption').html('<p>' + alt + '</p>'); 
},
于 2012-06-26T19:52:50.077 回答