0

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!

phenomenia
  • 109
  • 7
  • 1
    Have a look at this: http://imagesloaded.desandro.com/ – StudioTime Jan 18 '16 at 11:58
  • This is all to do with resolving sets of promises. Take a look at the last example in the [docs for $.when](https://api.jquery.com/jQuery.when/). It is doing something very similar to what you are looking for. – Rhumborl Jan 18 '16 at 12:00

0 Answers0