Question

我的网站上安装了一个vanilla 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读取每个动态生成的图像的替代文字，然后将其放在标题容器中：

    <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无济于事。我一整天都在寻找这个，我似乎无法想出这个。我希望有人可以为我提供缺失的链接。

提前致谢。

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

Answer 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>'); 
    }

Answer 2

听起来你只有一个.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函数。 1}}调用
<{1}}或$(window).load(function(){中的
：

(document).ready(){

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

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

2 个答案: