Question

当用户切换到另一个相册时，我试图让我的MaterialiseCSS图像滑块动态重新加载来自不同文件夹的照片。这是我的方法：

<script>
    function showPhotos(album) {
        alert("Show photos function is called");
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var contents = "";
                var count = parseInt(xmlhttp.responseText);
                for (i = 1; i <= count; i++) {
                    contents += "<li>";
                    contents += ("<img src=\"images/album_" + album + "/" + ("00" + i).slice(-2) + ".jpg\" />");
                    contents += "</li>\r\n";
                }
                document.getElementById("photo-slide").innerHTML = contents;
            }
        }
        xmlhttp.open("GET", "/php/gethint.php?q=" + album, false);
        xmlhttp.send();
    }
</script>

gethint.php？q = 基本上会返回特定文件夹中的文件数。

<script>
    $(document).ready(function(){
        $("#album1").click(function(){
            showPhotos(1);
            $('.slider').slider({full_width: true, height: 600});
        });
        $("#album2").click(function(){
            showPhotos(2);
            $('.slider').slider({full_width: true, height: 600});
        });
        $("#album3").click(function(){
            showPhotos(3);
            $('.slider').slider({full_width: true, height: 600});
        });
    });
</script>

其中album1，album2和album3是我的下拉列表中的3个项目。

第一张专辑选择结果正常。一切都按预期工作。但是当我试图切换专辑时，新的图片也被加载，转换很好，但底部的指示器开始表现得很奇怪。我需要修复我的方法，或者更好地解决我需要的问题。

谢谢你， - 汤姆

Answer 1

MaterializeCSS轮播似乎没有“重新初始化”功能。我想自己这样做，所以我发现这个能够满足我的需求：

$('.carousel').removeClass('initialized');
$('.carousel').carousel();

这有点hacky，但是如果你查看轮播src，你会看到一张检查以避免双重初始化。所以基本上，你从carousel div中删除 initialized 类，然后就像你准备好文档一样初始化轮播。

请注意，这违背了作者的意图，因此很可能是恶魔。

动态重新加载Materialise Image Slider照片

1 个答案: