Question

我试图为我的投资组合制作某种互动式图库。我的代码包括一个jquery gallery插件（fotorama）和一些可以工作的ajax＆＃34;部分＆＃34;。

＆＃34; Fotorama＆＃34;插件与img标签一起使用，所以我只需要包含一个img标签列表，插件完成剩下的工作，而AJAX部分则用于从目录路径动态生成该图像列表。

当我想要更改变量＆＃34; dir＆＃34;的字符串时出现问题。当我点击另一张专辑时。它看起来像字符串有效地改变，因为我做了一些带警报（dir）的测试，但AJAX没有认识到这种改变。

<div id="galeria" class="galeria">
    <div class="close-button"><img src="img/iconos/close2.svg" alt=""></div>
    <div class="fotorama" data-nav="thumbs"   data-width="100%" data-height="100%"   data-arrows="true" data-click="true" data-swipe="true">
        <script>
            $(document).ready(function(){
                var dir = "";
                var fileextension = ".jpg";
                //Album 1
                $("#comision-btn").click(function() {
                    dir = "img/galerias/ilustracion/comisiones/";
                    alert(dir);
                    $(".galeria").slideDown("fast");
                });
                //Album 2
                $("#concept-btn").click(function() {
                    dir = "img/galerias/ilustracion/concept/";
                    alert(dir);
                    $(".galeria").slideDown("fast");      
                });

                $.ajax({

                //Image List from Directory
                url: dir,
                success: function (data) {
                    $(data).find("a:contains(" + fileextension + ")").each(function () {
                        var filename = this.href.replace(window.location, "");
                        $(".fotorama").append($("<img src=" + dir + filename + "></img>"));
                    });
                }
                });
            });
        </script>
    </div>            
</div>

在这里你可以看到代码＆＃34;工作＆＃34;： https://seralprueba.000webhostapp.com/

这段代码有什么问题？是否有更好的方法来实现这一目标？

注意：如果我写了一个专辑路径（例如：img / galerias / ilustracion / comisiones /在我声明 dir 变量的部分，那么fotorama＆＃39; s插件可以正常工作，但是当我点击另一个选项时，我仍然无法改变这个方向。

使用Jquery和AJAX更改库的文件夹路径

0 个答案: