Обновить галерею Jsson после запроса Ajax - PullRequest
Новая
       20

Обновить галерею Jsson после запроса Ajax

0 голосов
/ 14 ноября 2018

Я разрабатываю галерею Jssor, в которой я динамически меняю путь к изображениям с помощью Ajax.Оказывается, все работает нормально, пока я не загружу новые изображения без обновления страницы.Стили не загружены хорошо.Я прочитал, что необходимо повторно инициализировать Jssor после изменений, но я не получаю его.Посмотрим, сможет ли кто-нибудь мне помочь.Большое спасибо и извините за мой плохой английский.

Функция 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
            }
        });
    });

Ответы [ 3 ]

0 голосов
/ 19 ноября 2018

Я тестирую решение, которое вы мне дали, и оно работает, но я пытался сделать что-то более сложное. При добавлении новых изображений я хотел загрузить все файлы .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);

Посмотрим, сможете ли вы что-нибудь придумать. Спасибо.

0 голосов
/ 21 ноября 2018

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

Я надеюсь помочь кому-нибудь с этим решением.

0 голосов
/ 14 ноября 2018

Пожалуйста, используйте $ReloadSlides метод API. 

$(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

...