Canvas Support

Lazy Loading with Items Overlays

11 replies·opened Jun 21, 2022
P
pardthemonsterJun 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.

S
SemiColonWebSTAFFJun 22, 2022

Hello,

This is something that is not included by default and require Customizations. Consider using the following code at the bottom of the Page:

<script>
	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) );
</script>

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.

P
pardthemonsterJun 22, 2022

That did not work (I tried with and without data-animate="fadeIn"), but I understand if this beyond scope of product.

S
SemiColonWebSTAFFJun 24, 2022

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.

P
pardthemonsterJun 24, 2022

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.

S
SemiColonWebSTAFFJun 25, 2022

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.

P
pardthemonsterJun 25, 2022

I have made the changes, but still neither of the pages (linked above) lazy load the item overlay.

S
SemiColonWebSTAFFJun 27, 2022

Hello,

Thanks for your Kind Patience!

We have made some changes to the code. Consider using the following JS Code:

<script>
	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) );
</script>

and the following CSS Code:

.portfolio-item .sale-flash {
	display: none;
}

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.

P
pardthemonsterMar 17, 2023

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.

S
SemiColonWebSTAFFMar 17, 2023

Hello,

This should be the updated code:

<script>
	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) );
</script>

and consider using this CSS instead:

.portfolio-item .sale-flash {
	opacity: 0;
}

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.

S
SemiColonWebSTAFFMar 18, 2023

Hello,

Simply replace:

portfolioOverlay.classList.add('op-ts', 'op-1');

with:

portfolioOverlay && portfolioOverlay.classList.add('op-ts', 'op-1');

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