I'm struggeling to solve a probably very simple task: I've a page with say 10 portfolio items. Each of this portfolio items can have a variable number of "detail images" that should be shown in an image gallery when the thumbnail of the portfolio item is clicked.
I've managed to load all the detail images via AJAX when the thumb is clicked but I struggle to detect the moment all images for the image gallery are loaded to fire a calculation function.
The background is, that I need to know how wide all galleryimages are together when they are horizontaly next to each other to put that total width on a wrapping slide container. To do that calculation I need to "wait" until all images are loaded and only then fire my function that calculates the width (width of image 1 + width of image 2 ...).
I've tried
jQuery(document).ajaxComplete(function() { calculation(); });
but that is fired also for other ajax elements on the page.
Is there a way to 'bind' the complete to my ajax call or ad a callback to my ajax? Something like this is what I'm looking for:
function ajax_load_slider(post_id){
jQuery.ajax({
url : MyAjax.ajaxurl,
type : 'post',
data : {
action: 'ajax_slider',
post_id: post_id,
},
success : function(response) {
jQuery('#resultcontainer').html(response);
if(AJAXComplete){
calculateWidth();
}
}
});
}
Thanks in advance!