fancybox disable image preloading - fancybox

Question

Started to try out this fancybox3 plugin to zoom thumbnail images in our app that works perfectly on desktop and mobile browsers.
In the app where the cart has thumbnail images of the products added to it that can be purchased. If I remove a product(image of it)from the cart, it gets removed from the cart, however, if I zoom one of the remaining product images of the cart and navigate through it, still showing the removed product there. I am expecting to see only the product images present in cart.
I tried using the preload: 0 option but that does not work for me. Fancybox is initiated in following way
$('[data-fancybox="images"]').fancybox({
idleTime : false,
loop: true,
transitionEffect : "fade",
animationDuration: 333,
buttons: [
'close'
],
protect: true,
infobar: false,
preload: 0
});
Any help to make this work is really appreciated.
Thank you

Answer 1

Looks like you have misunderstood the concept of "preloading". The script preloads images before displaying, but what that means is that it is showing loading icon before displaying full image. If you disable preloading and provide dimensions (width/height) of full image, then the script will display thumbnail image while full image is loading. This is a great feature if you want to make your app/webpage look more interactive (e.g., user would not stare at black overlay with loading icon but will see something useful instead).
But what you have described sounds like "caching" and fancyBox is not caching dom elements. So, if you see something in the gallery, that means that corresponding element exists in your page.
So, make sure that your product is actually removed from the dom or try to tweak the selector to match only "actual" products using "selector" option, e.g., something like:
$().fancybox({
selector : '.fancybox:not(.removed)'
});
Obviously, you should tweak this to suit your needs. Since you have not provided any details, I can not create a full example.

Answer 2

#Janis, Thank you so much for the clarification on 'preloading' concept.
You were right about dom still holding the removed item. Upon removal, the div is simple being set as display none.
First, I added code to remove the div form the dom but that resulted in page getting refresh which we don't want.
Next tried, the selector option and it worked perfectly.
function hideCartItem(id) {
var divItem = document.getElementById("divCartItem" + id);
var elem = "#divCartItem" + id
if (divItem != null) {
$(elem).hide();
$(elem).remove();
// added code
$('[data-fancybox="images"]').fancybox({
divItem: '.fancybox:not(.removed)'
});
}
}
Thank you so mcuh for your help. Much appreciated!!