Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load Gallery with AJAX #229

Closed
shamw4r opened this issue Nov 20, 2015 · 5 comments
Closed

Load Gallery with AJAX #229

shamw4r opened this issue Nov 20, 2015 · 5 comments

Comments

@shamw4r
Copy link

shamw4r commented Nov 20, 2015

When i get images with ajax its give me error " TypeError: a is undefined " But if i add hard code link of images like this in " dynamicEl:[{"src": "mlphotos/imgs/564d982d2bed1_kosta.jpg","thumb": "mlphotos/imgs/564d982d2bed1_kosta.jpg",}] " Then its working fine,

-> But i want to load images with ajax below are my code

Below are my code help me what is the issue here??

$.ajax({
url: "ajax_viewlarge_click" ,
type: 'POST',
dataType:"json",
success: function(data) {
//-------------------------
dynamicphoto = '';
for (var i = 0; i < data.length; i++) {
dynamicphoto += '{"src": "'+data[i]+'","thumb": "'+data[i]+'",},';
}
$.getScript($('#baseUrl').val()+"/application/layouts/scripts/themes/trailblazer/js/lg/lightgallery.min.js", function( datas, textStatus, jqxhr ) {
var pictures = "["+dynamicphoto+"]";
$(this).lightGallery({
dynamic: true,
html:true,
dynamicEl:pictures
});
});
},
error: function(e) {
console.log("Server failure! Is the server turned off?");
}
});

@yugarinn
Copy link

I think I'm experimenting a similiar issue. I initially load n images and issue an AJAX request on scroll to get more images. The five initial images work fine, but the new ones don't get the functionality (clicking on them just takes me to the url of the image).

I'm calling $('.container).lightGallery({ ... }); again on AJAX success: function(res) { ... }.

I'm also using the Wookmark plugin

@yugarinn
Copy link

I managed to solve this by properly destroying the gallery and loading it again on AJAX success: function(res) { ... }

Proper way to destroy the gallery:
$lg = $('.container');

// destroy
$lg.data('lightGallery').destroy(true);

@reillo
Copy link

reillo commented Nov 12, 2016

We want to update the items while the gallery is opened. Say we have a load more or navigated to the end of current items.

Currently $lg.data('lightGallery').destroy(true); will close the gallery and re-instantiate the gallery. I've made a temporary workaround to fix this. see: https://github.com/reillo/rebuild-lightGallery

Could you tell me if you have a better work around of this scenario?

@sachinchoolur
Copy link
Owner

Hi @reillo ,
At present, it is not possible. But, I'll try to include a refresh method in future

@Tim-arts
Copy link

@sachinchoolur Any plan of this future method?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants