11 replies · opened Jun 21, 2022
Anyway to have portfolio items, which use lazy loading, to also have their overlay item show at the same time as the portfolio item loads?
I have a workaround right now by applying data-animate="fadeIn" to the overlay item associated with the portfolio item (lazy loaded), but looking for something that loads at the exact time of the portfolio item.
Hello,
This is something that is not included by default and require Customizations. Consider using the following code at the bottom of the Page:
[ch_pre]
const portfolioImages = document.querySelectorAll('.portfolio-item img');
const portfolioImageOptions = {
attributes: true,
attributeFilter: ['class'],
attributeOldValue: true
};
function callback(mutationList, observer) {
mutationList.forEach(function(mutation) {
// console.log( mutation );
if (mutation.type === 'attributes' && mutation.attributeName === 'class' && !mutation.oldValue.includes('lazy-loaded')) {
if( mutation.target.classList.contains('lazy-loaded') ) {
let portfolioImage = $(mutation.target),
portfolioItem = portfolioimage.parents('.portfolio-item'),
portfolioOverlay = portfolioItem.find('.sale-flash');
portfolioOverlay.stop( true, true ).fadeIn();
}
}
});
}
const portfolioImageObserver = new MutationObserver(callback);
portfolioImages.forEach( image => portfolioImageObserver.observe(image, portfolioImageOptions) );
[/ch_pre]
This should work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
That did not work (I tried with and without data-animate="fadeIn"), but I understand if this beyond scope of product.
Hello,
We had tested the codes before providing it to you. We would love for this to work. Can you please update the Codes online and provide us with a Live URL so that we can check and identify the errors. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
I have two test pages, first is the one without a fade-in of the overlay (which is preferred):
https://www.aaronbonine.com/portfolio-birds-test-wo-fade.html
Second is the one with the fade-in:
https://www.aaronbonine.com/portfolio-birds-test-w-fade.html
These sites both have the javascript added.
I will note that it does through an error in the console "can't find variable: portfolioimage" (has no space in error between portfolio and image).
Hopefully you have a solution for the preferred URL above.
Hello,
Apologies!
Please change the portfolioimage with portfolioImage. There was a typo mistake from our end. Please check if this works after making the changes. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
I have made the changes, but still neither of the pages (linked above) lazy load the item overlay.
Hello,
Thanks for your Kind Patience!
We have made some changes to the code. Consider using the following JS Code:
[ch_pre]
const portfolioImages = document.querySelectorAll('.portfolio-item img');
const portfolioImageOptions = {
attributes: true,
attributeFilter: ['class'],
attributeOldValue: true
};
function callback(mutationList, observer) {
mutationList.forEach(function(mutation) {
// console.log( mutation );
if (mutation.type === 'attributes' && mutation.attributeName === 'class' && !mutation.oldValue.includes('lazy-loaded')) {
if( mutation.target.classList.contains('lazy-loaded') ) {
let portfolioImage = $(mutation.target),
portfolioItem = portfolioImage.parents('.portfolio-item'),
portfolioOverlay = portfolioItem.find('.sale-flash');
mutation.target.addEventListener('transitionend', () => {
portfolioOverlay.fadeIn();
});
}
}
});
}
const portfolioImageObserver = new MutationObserver(callback);
portfolioImages.forEach( image => portfolioImageObserver.observe(image, portfolioImageOptions) );
[/ch_pre]
and the following CSS Code:
[ch_pre type="css"].portfolio-item .sale-flash {
display: none;
}[/ch_pre]
This is working pretty well for us. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Are you able to provide an update to above javascript to support v7, I believe since Canvas runs on VanillaJS?
I can only get this to work if I place jquery.js after functions.js.
Hello,
This should be the updated code:
[ch_pre]
const portfolioImages = document.querySelectorAll('.portfolio-item img');
const portfolioImageOptions = {
attributes: true,
attributeFilter: ['class'],
attributeOldValue: true
};
function callback(mutationList, observer) {
mutationList.forEach(function(mutation) {
// console.log( mutation );
if (mutation.type === 'attributes' && mutation.attributeName === 'class' && !mutation.oldValue.includes('lazy-loaded')) {
if( mutation.target.classList.contains('lazy-loaded') ) {
let portfolioImage = mutation.target,
portfolioItem = portfolioImage.closest('.portfolio-item'),
portfolioOverlay = portfolioItem.querySelector('.sale-flash');
mutation.target.addEventListener('transitionend', () => {
portfolioOverlay.classList.add('op-ts', 'op-1');
});
}
}
});
}
const portfolioImageObserver = new MutationObserver(callback);
portfolioImages.forEach( image => portfolioImageObserver.observe(image, portfolioImageOptions) );
[/ch_pre]
and consider using this CSS instead:
[ch_pre type="css"].portfolio-item .sale-flash {
opacity: 0;
}[/ch_pre]
This should definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
This works from user interface perspective now, but throws an error. See attachment.
https://www.aaronbonine.com/portfolio-birds.html. (site now migrated on v7)
Hello,
Simply replace:
[ch_pre type="js"]portfolioOverlay.classList.add('op-ts', 'op-1');[/ch_pre]
with:
[ch_pre type="js"]portfolioOverlay && portfolioOverlay.classList.add('op-ts', 'op-1');[/ch_pre]
This should fix the issue. 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