Refresh Jsson gallery after Ajax query - ajax

Question

I am developing a Jssor gallery in which I change the path of the images dynamically with Ajax. It turns out that everything works fine until I load the new images without refreshing the page. The styles are not loaded well. I have read that it is necessary to re-initialize Jssor after the modifications but I do not get it. Let's see if someone can help me. Thank you very much and sorry for my bad English.
Jssor function:
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 script:
$(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

Helo Jssor, I have solved my code in this way. Thank you so much for all your help.
HTML:
I preload the images in the first category. With the 2 buttons I will call Ajax to modify the folder with the images of the gallery
<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>
**The image folders in my system are "images/gallery/cat1" and "images/gallery/cat2"
Script:
Here are the functions for the buttons. Below is the gallery code. Each one that configures it with the options that he wants. I think it would be too much text if I write everything.
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:
I scroll through the selected folder and upload the corresponding images in the gallery. The code selects all the JPG files in the folder.
<?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;?>
I hope to help someone with this solution.

Answer 2

Please use the $ReloadSlides api method.
$(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);
}
});
});
Reference:
https://www.jssor.com/development/api-methods-properties-events.html

Answer 3

I am testing the solution you gave me and it works, but what I was trying to do is something more complicated.
When adding the new images I wanted to load all the .jpg files in a directory. I have done it with PHP in this way:
<?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();
?>
But I do not know how to combine it with the sentences you told me:
var slidesHtml = '<div><img data-u="image" src="url" /></div>';
slidesHtml += '<div><img data-u="image" src="url" /></div>';
jssor_1_slider.$ReloadSlides(slidesHtml);
Let's see if you can think of something. Thank you.