4 replies · opened Mar 14, 2022
Hi, have a problem with gallery in safari or chrome sometimes the images not fitting well and some white spaces left and also sometimes some images in very small height here is my url and the galleries are in ana staff and in home pages home gets data from local ana sayfa gets from firebase but both has same problem send you some screen shots you can check its behavior by refreshing pages
PS: both gallery has different image size and different for testing atm Its alway happened when first load or clean cashe
Hello,
This happens when the Gallery Images are Loaded using JS and not directly in the DOM. You can simply call the following function once the Images finish loading:
[ch_pre type="js"]jQuery('.grid-container').filter('.has-init-isotope').isotope( 'layout' );[/ch_pre]
This will align the Galleries properly. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
I put it inside the function
async function getFilomuz() {
getDoc(docref12)
.then((doc) => {
if (doc) {
imgMainOne.href = doc.data().imageURL1
imgThumbOne.src = doc.data().imageURL1
imgMainTwo.href = doc.data().imageURL2
imgThumbTwo.src = doc.data().imageURL2
imgMainThree.href = doc.data().imageURL3
imgThumbThree.src = doc.data().imageURL3
imgMainFour.href = doc.data().imageURL4
imgThumbFour.src = doc.data().imageURL4
imgMainFive.href = doc.data().imageURL5
imgThumbFive.src = doc.data().imageURL5
imgMainSix.href = doc.data().imageURL6
imgThumbSix.src = doc.data().imageURL6
imgMainSeven.href = doc.data().imageURL7
imgThumbSeven.src = doc.data().imageURL7
imgMainEight.href = doc.data().imageURL8
imgThumbEight.src = doc.data().imageURL8
imgMainNine.href = doc.data().imageURL9
imgThumbNine.src = doc.data().imageURL9
jQuery('.grid-container').filter('.has-init-isotope').isotope( 'layout' );
}
})
}and call it on window.onload but here is what i get
PS: this happened before on safari too when i just getting elements without js now on both this happening
Hello,
As we have mentioned the replies above, you will need to use this code after the Images have been loaded (not on window load). Something like this:
[ch_pre type="js"]var imgs = document.images,
len = imgs.length,
counter = 0;
[].forEach.call( imgs, function( img ) {
if(img.complete) {
incrementCounter();
} else {
img.addEventListener( 'load', incrementCounter, false );
}
} );
function incrementCounter() {
counter++;
if ( counter === len ) {
jQuery('.grid-container').filter('.has-init-isotope').isotope( 'layout' );
}
}[/ch_pre]
You will need to do the further customizations manually.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard