Common situation. User clicks on the thumbnail, modal is opened, ajax request is made. On the success callback I do retrieve some info and html code with an image inside of it. And after that I want to center the image in modal wrap. The modal wrap is basically a full screen minus a div of width 320px from the right. My code works but not always...sometimes happened that the picture is not centered correctly. Does anyone know where the problem is ? The ".photo-media-part-image" is a class of my image from ajax success callback.
Check if image is loaded
jQuery.fn.isLoaded = function() {
return this
.filter("img")
.filter(function() { return this.complete; }).length > 0;
};
// OPEN STATUS MEDIA MODAL
function openStatusMediaModal(e) {
$('body').css('overflow','hidden');
var mediaModal = $('#mediaModal');
$.ajax({
success: function(data){
mediaModal.find('.modal-body').html(data);
tryMediaModalPictureVerticalAlign(mediaModal);
},
error: function(data) {
ShowFlashMessagesBlockAfterAjax("Error");
},
complete: function() {
}
});
return false;
}
function tryMediaModalPictureVerticalAlign(mediaModal) {
if ($(".photo-media-part-image").isLoaded()) {
var image = $(".photo-media-part-image");
var imgHeight = image.height();
var imgWidth = image.width();
var wraper = $(window);
// STOP THE LOADING ANIMATION
loading('stop');
// SHOW SMOOTHLY THE PICTURE
image.animate({
opacity: 1,
top: ((wraper.height()-imgHeight)/2)+'px',
left: ((wraper.width()-320-imgWidth)/2)+'px'
}, 300, function() {
// Animation complete.
});
} else {
// try again
setTimeout(function() {
tryMediaModalPictureVerticalAlign(mediaModal);
}, 200);
}
}
I think the bug usually appear when I close the image and open it again. But not always...