I am setting a repeater with onMouseIn and out action that should change the image. It is working fine in preview mode but not in the live site. Between the image change we see a white pic with icon of broken image before the second image gets loaded. (see image sequence bellow). How can I achieve a smooth transition between the images in the live site? Thanks
$w.onReady( async () => {
$w( “#rep” ).onItemReady(($product, product) => {
if (product.mainMedia) { $product( “#productImage” ).src = product.mainMedia }
$product( ‘#productImage’ ).alt = product.name;
$product( '#productImage' ).tooltip = "" ;
$product( '#productImage' ).tooltip = product.name;
// $product(‘#productImage’).target = ‘_blank’;
// $product(‘#productImage’).fitMode = ‘fit’;
let mediaItem1 = product.mediaItems[ 1 ].src;
let mediaItem2 = product.mediaItems[ 0 ].src;
$product( "#productImage" ).onMouseIn((event) => { $product( "#productImage" ).src = mediaItem1 });
$product( "#productImage" ).onMouseOut((event) => { $product( "#productImage" ).src = mediaItem2 });
$product( "#productImage" ).onClick((event) => { session.setItem( "currentProductId" , product._id); wixLocation.to( "/productdetails" ); });
if (product.name.length > 50 ) {
$product( ‘#name’ ).text = ${product.name.substr( 0 , 50 )}...;
} else {
$product( ‘#name’ ).text = product.name;
}
if (product.discountedPrice < product.price) {
$product( ‘#price’ ).text = ${product.formattedDiscountedPrice} instead of ${product.formattedPrice};
} else {
$product( ‘#price’ ).text = product.formattedPrice
}
if (product.inStock) {
if (product.trackInventory) {
$product( ‘#inStock’ ).text = ${product.quantityInStock} items **in** stock!
} else {
$product( ‘#inStock’ ).text = ‘In Stock’ ;
}
} **else** { $product( '#inStock' ).text = 'Out of Stock!' }
if (product.sku) { $product( ‘#sku’ ).text = product.sku } else {
if (product.manageVariants) { $product( ‘#sku’ ).text = ‘Vary!’ }
}
})
$w( '#searchBar' ).onInput(() => searchProducts());
$w( '#sort' ).onChange(() => searchProducts());
await searchProducts();
})
