Hi kerry
This is how I do it.
var proidet;
var myPhotoBrowserPopup;
$$(document).on('click', '.visabilder', function (e) {
proidet=$$(this).attr('data-produkt_id');
var artikel=$$(this).attr('data-artikel');
var folderName=$$(this).attr('data-folderName');
var userId=$$(this).attr('data-userId');
var photoIndex = parseInt($$(this).attr('data-nr'))
antalbilder = $$(this).attr('data-antalbilder')
app.request({
method: 'POST',
url: 'https://xxxx.com/loadimages.asp',
data: {
produkt_id : proidet,
artikel : artikel,
folderName : folderName,
userId : userId
},
success: function(data){
var data;
bilderna = data.split(",");// this will return an array with strings "1", "2", etc.
bilderna=bilderna.filter(Boolean);//tar bort tomma array items
myPhotoBrowserPopup = app.photoBrowser.create({
photos : bilderna,
swipeToClose:'true',
type: 'popup',
navbarOfText: 'av',
virtualSlides: false,
popupCloseLinkText: '<i class="f7-icons color-gray popup-close" style="font-size: 25px;font-weight: normal;cursor:pointer;color:rgb 142 142 147;padding:10px 15px 10px 10px;">xmark_circle</i>',
spaceBetween:0,
swiper: {
initialSlide: 0,
spaceBetween: 20,
speed: 300,
loop: true,
preloadImages: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
navigation: {
nextEl: '.photo-browser-next',
prevEl: '.photo-browser-prev',
},
zoom: {
enabled: true,
maxRatio: 1.6,
minRatio: 1,
},
lazy: {
enabled: false,
},
},
on: {
open: function () {
app.toolbar.hide('.toolbar');
var div3 = document.createElement('div');
div3.className = "swiper-pagination";
$$(div3).insertAfter('.swiper-wrapper');
var div = document.createElement('a');
div.className = "link downloadbild";
var div2 = document.createElement('a');
div2.className = "link raderabilden";
div2.setAttribute('data-antalbilder',antalbilder);
div.innerHTML = '<i class="f7-icons" style="font-size: 22px;font-weight: normal;cursor:pointer;color:rgb 142 142 147; padding:10px 10px 10px 10px;">square_arrow_down</i>';
div2.innerHTML = '<i class="f7-icons" style="font-size: 22px;font-weight: normal;cursor:pointer;color:rgb 142 142 147; padding:10px 10px 10px 10px;">trash</i>';
$$(div).insertAfter('a.link.photo-browser-prev');
$$(div2).insertAfter('a.link.photo-browser-prev');
},
opened: function () {
app.toolbar.show('.toolbar');
},
close: function () {
app.toolbar.show('.toolbar');
},
closed: function () {
myPhotoBrowserPopup.destroy()
}
}
});
myPhotoBrowserPopup.open(photoIndex);
e.preventDefault();
return false;
}
});
});