After having successfully used your nice script in a test file, I'm actually trying to use it on a specific part of my website.
When a user visit my portfolio, he lands on a page with a basic introduction text, so that while he's reading, I'm loading the full portfolio in ajax and then display it.
I would like BLazy to run after my ajax request, so it can handle the class of the new added images.
function display_page(page_num){
//Some code here will append a list of links + images etc. to a container of my website on ajax request success
}
$.ajax({
url: ajaxURL,
type: 'GET',
dataType : 'json',
data: {"action": "get_portfolio_data", "cat": cat, "excludedCat": excludedCat}
})
.done(function(data){
//Some code
display_page(cur_page);
}).then(function(){
var bLazy = new Blazy({
selector: '.taz_portfolio-item-visual',
success: function(ele){
console.log('OK!');
},
error: function(ele, msg){
if(msg === 'missing'){
console.log('Image is missing');
}
else if(msg === 'invalid'){
console.log('Image is invalid');
}
}
});
}).then(function(){
taz_imageProtect(); // Prevent Right Click
}).then(function(){
taz_adaptLargeImagesHeight(); // Adapt Images Size
}).then(function(){
taz_imageZoom(); // Detect images that can be zoomed
}).then(function(){
taz_detectExifAreas(); // Detect EXIF area on images
});
I've been able to find out that at this point, BLazy do not find the new appended ".taz_portfolio-item-visual" elements and then never enter to success or error. If (just for the test), I use "body" as selector, console.log clearly display it's invalid message.
Note that all the last functions added with .then() are perfectly working and are based on elements only present on the appended code.