Doesn't Work When Image Is Updated

[LoneWolf4713]

Hey , So I implemented this on a div who content is dynamically updated every 5 seconds , When The Page First Loads , I can view the image , but after the image gets updated ,(Using AJAX) , the viewer doesn't appear , even though the I click the image . but on clicking a image inside same div , which is NOT updated every 5 seconds , I can view other images too .. in Modal View .

Any Idea What Should I Do ?

[fengyuanchen]

You can call the update method after the div content changed.

[yairohn]

How? please an example, i have the same problem.

[fengyuanchen]

@yairohn Docs: https://github.com/fengyuanchen/viewerjs#update

import Viewer from 'viewerjs';

const viewer = new Viewer(imageListWrapper, {});

// 1. Changes images in the wrapper
// ...

// 2. Update the viewer
viewer.update();

[mrjonnyg]

Has anyone got a working example of this with XMLHttpRequest? I have tried everything I can think of.

[mrjonnyg]

I've made a bit of progress:

function loadImages()
{
var gallery = new Viewer(document.getElementById('gallery'),{});

var xmlhttp = false;
xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("gallery").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","images_load.asp",false);
xmlhttp.send();

alert('viewer'+gallery.id);

//setTimeout(function(){ gallery.update(); }, 1000);
gallery.update();

//gallery.show();
}

I found I had to make the server request synchronous or add a javascript delay (not great). However the remaining problem I have is destroying the previous gallery object. Adding a destroy in the new Viewer, as per one of the examples, means the gallery works but destroys itself as soon as it is closed, rather than when the data is updated. Any help please?

[fengyuanchen]

See #489.