Blurry images in photoBrowser?

Questions
#1

I create a photoBrowser standalone to view different sets of up to 5 images. And when I have opened it 4-5 times to view the different sets the images gets blurry and if I close that set and open it again, then it is sharp.

I have tried to destroy the photoBrowser every time it is closed and Im also setting transform: translate3d(0,0,0); on the images but it still gets blurry images after a couple of times.

So how can I fix this?
Any input appreciated, thanks.

#2

Please provide a code sample.

#3

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;
		  		}	
	});
 });
#4

You must destroy the photobrowser instance. If you hide the one already created and create another, identical redundant code will be generated in your html page. You must destroy it with photobrowser.destroy ()

#5

Thanks CMGCENTER, but thats what Im doing in the closed event in the above code.

closed: function () {
	myPhotoBrowserPopup.destroy()
		}

Any other suggestions? :slight_smile:

#6

If you use the closed photobrowser event you will not be able to destroy the photobrowser object instance with its own event. You have to destroy the object from a separate function Instantiating the object globally.

#7

To This obj you mush apply function destroy()

Like that:
Const destroypb = () =>{
myPhotoBrowserPopup.destroy();
}

#8

You can try:

closed: function () {
						this.destroy()
					}
#9

Thanks, I have tested with this.destroy() and it is not working.
I have also tested to have myPhotoBrowserPopup.destroy() in a separate function but no luck.

closed: function () {
						destroypopup()
					}

function destroypopup(){ 
	myPhotoBrowserPopup.destroy()
}

Any other things I can test? :slight_smile: I can´t think of anything else.

#10

I even tried to remove the photobrowser completly by removing the div but it is still not working!?
So with this it is removing the div before it opens a new one, but still it´s gets blurry!?

closed: function () {
						destroypopup()
					}
function destroypopup(){
	$('.photo-browser-popup').remove();
	//myPhotoBrowserPopup.destroy()
	console.log('destroypopup')
}
#11

Or set this params false

Post a issue on github page

#12

Thanks, I tested but not working. I don´t understand why removing the div completly doesn´t work, since it is loading it from scratch every time when I do that!? I don´t know what to test now, I have now more ideas.