Ajax 查询后刷新 Jsson 图库

Question

我正在开发一个 Jssor 画廊，我在其中使用 Ajax 动态更改图像的路径。事实证明一切正常，直到我加载新图像而不刷新页面。样式加载不正确。我读到有必要在修改后重新初始化 Jssor，但我不明白。让我们看看是否有人可以帮助我。非常感谢，抱歉我的英语不好。

辅助函数：

function ScaleSlider() {
  var jssor_1_slider;
    jssor_1_slider_init = function() {
        var jssor_1_options = {
          $AutoPlay: 1,
          $SlideshowOptions: {
            $Class: $JssorSlideshowRunner$,
            $TransitionsOrder: 1
          },
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
          },
          $ThumbnailNavigatorOptions: {
            $Class: $JssorThumbnailNavigator$,
            $Rows: 2,
            $SpacingX: 14,
            $SpacingY: 12,
            $Orientation: 2,
            $Align: 156
          }
        };
        jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
        var MAX_WIDTH = 960;

            var containerElement = jssor_1_slider.$Elmt.parentNode;
            var containerWidth = containerElement.clientWidth;
            if (containerWidth) {
                var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
                jssor_1_slider.$ScaleWidth(expectedWidth);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }

        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
        }
    };

Ajax 脚本：

    $(document).ready(function() {
    $('#btnchange').on('click', function(){
        $.ajax({
            type: "POST",
            url: "alternative.php",
            data: $("#data1").serialize(), 
            success: function(response) {
                $('#jssor_1').html(response);
                //At this point is where I try to start it but I do not get it
            }
        });
    });

Answer 1

请使用$ReloadSlidesapi方法。

$(document).ready(function() {
$('#btnchange').on('click', function(){
    $.ajax({
        type: "POST",
        url: "alternative.php",
        data: $("#data1").serialize(), 
        success: function(response) {
            //remove all slides and reload new slides
            var slidesHtml = '<div><img data-u="image" src="url" /></div>';
            slidesHtml += '<div><img data-u="image" src="url" /></div>';
            jssor_1_slider.$ReloadSlides(slidesHtml);
        }
    });
});

参考： https://www.jssor.com/development/api-methods-properties-events.html

Answer 2

我正在测试您给我的解决方案并且它有效，但我试图做的是更复杂的事情。添加新图像时，我想加载目录中的所有 .jpg 文件。我是这样用 PHP 完成的：

 <?php 
      $directory = 'images/gallery/dir1/';
      $dirint = dir($directory);
      while (($archivo1 = $dirint->read()) !== false){
      if (preg_match("/jpg/i", $archivo1)){
           echo '<div>
           <a href="'.$directory.$archivo1.'" >
           <img data-u="image" src="'.$directory.$archivo1.'"/>
           </a>
           <img data-u="thumb" src="'.$directory.$archivo1.'"/>
           </div>';
           }
      }
      $dirint->close();
 ?>

但我不知道如何将它与你告诉我的句子结合起来：

 var slidesHtml = '<div><img data-u="image" src="url" /></div>';
 slidesHtml += '<div><img data-u="image" src="url" /></div>';
 jssor_1_slider.$ReloadSlides(slidesHtml);

让我们看看你能不能想出点什么。谢谢。

Answer 3

Helo Jssor，我已经用这种方法解决了我的代码。非常感谢您的帮助。

HTML: 我预加载了第一类中的图像。使用 2 个按钮，我将调用 Ajax 来修改包含图库图像的文件夹

 <div class="gallery">
    <input type="hidden" id="data1" name="category" value="cat1">
    <button id="btn1" class="btn-gal"><span>Category 1</span></button>

    <input type="hidden" id="data2" name="category" value="cat2">
    <button id="btn2" class="btn-gal""><span>Category 2</span></button>
 </div>

<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:480px;overflow:hidden;visibility:hidden;">
    <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
        <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" />
    </div>
    <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
        <?php 
            $directory = 'images/gallery/cat1/';
            $dirint = dir($directory);
            while (($archivo1 = $dirint->read()) !== false){
                if (preg_match("/jpg/i", $archivo1)){
                    echo '<div>
                    <a href="'.$directory.$archivo1.'" >
                    <img data-u="image" src="'.$directory.$archivo1.'"/>
                    </a>
                    <img data-u="thumb" src="'.$directory.$archivo1.'"/>
                    </div>';
                }
            }
            $dirint->close();
        ?>
    </div>
    <div data-u="thumbnavigator" class="jssort101" style="position:absolute;left:0px;bottom:0px;width:980px;height:100px;background-color:#000;" data-autocenter="1" data-scale-bottom="0.75">
        <div data-u="slides">
            <div data-u="prototype" class="p" style="width:190px;height:90px;">
                <div data-u="thumbnailtemplate" class="t"></div>
                <svg viewbox="0 0 16000 16000" class="cv">
                    <circle class="a" cx="8000" cy="8000" r="3238.1"></circle>
                    <line class="a" x1="6190.5" y1="8000" x2="9809.5" y2="8000"></line>
                    <line class="a" x1="8000" y1="9809.5" x2="8000" y2="6190.5"></line>
                </svg>
            </div>
        </div>
    </div>
    <!-- Arrow Navigator -->
    <div data-u="arrowleft" class="jssora106" style="width:55px;height:55px;top:162px;left:30px;" data-scale="0.75">
        <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
            <circle class="c" cx="8000" cy="8000" r="6260.9"></circle>
            <polyline class="a" points="7930.4,5495.7 5426.1,8000 7930.4,10504.3 "></polyline>
            <line class="a" x1="10573.9" y1="8000" x2="5426.1" y2="8000"></line>
        </svg>
    </div>
    <div data-u="arrowright" class="jssora106" style="width:55px;height:55px;top:162px;right:30px;" data-scale="0.75">
        <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
            <circle class="c" cx="8000" cy="8000" r="6260.9"></circle>
            <polyline class="a" points="8069.6,5495.7 10573.9,8000 8069.6,10504.3 "></polyline>
            <line class="a" x1="5426.1" y1="8000" x2="10573.9" y2="8000"></line>
        </svg>
    </div>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>

**我系统中的图像文件夹是"images/gallery/cat1"和"images/gallery/cat2"

脚本：以下是按钮的功能。下面是图库代码。每个人都用他想要的选项配置它。我觉得如果全部都写出来会不会太文字了

var jssor_1_slider;   

$(document).ready(function() {
    $('#btn1').on('click', function(){
        $.ajax({
            type: "POST",
            url: "alternative.php",
            data: $("#data1").serialize(), 
            success: function(response) {
                jssor_1_slider.$ReloadSlides(response);
            }
        });
    });

    $('#btn2').on('click', function(){
        $.ajax({
            type: "POST",
            url: "alternative.php",
            data: $("#data2").serialize(), 
            success: function(response) {
                jssor_1_slider.$ReloadSlides(response);
            }
        });
    });
});

jssor_1_slider_init = function() {

    var jssor_1_SlideshowTransitions = [
          ...
          ...
          ...
    ];

    var jssor_1_options = {
          ...
          ...
          ...
    };

    jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

    var MAX_WIDTH = 980;

    function ScaleSlider() {
          ...
          ...
          ...
    }
    ScaleSlider();

    $Jssor$.$AddEvent(window, "load", ScaleSlider);
    $Jssor$.$AddEvent(window, "resize", ScaleSlider);
    $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
};

alternative.php: 我滚动浏览选定的文件夹并在图库中上传相应的图像。代码选择文件夹中的所有JPG文件。

<?php
$cat = $_POST['category'];
$directory = 'images/gallery/'.$cat.'/';
$dirint = dir($directory);
$response_slide='';
while (($archivo1 = $dirint->read()) !== false){   
    if (preg_match("/jpg/i", $archivo1)){
        $response_slide.='<div><img data-u="image" src="'.$directory.$archivo1.'"/><img data-u="thumb" src="'.$directory.$archivo1.'"/></div>';
    }
}
$dirint->close();
echo $response_slide;?>

我希望能帮助解决这个问题的人。

Ajax 查询后刷新 Jsson 图库

Refresh Jsson gallery after Ajax query

ajax

jssor