A request for image slider modal

Wishlist Photo Gallery
1

There should be a feature to display thumbnail image as main image on hover, so that the product image slider functions like amazon on desktop.

1 Like
2

Hi @Kyle_Bergthold, thank you for sharing your idea!

Am I right that you’d like to have thumbnails below the main image, which change the main image when you hover over them?

image
image353×478 33.6 KB

3

Yes exactly, does this feature already exist in Elfsight and I’m just missing it?

Thanks,

4

I’m afraid we don’t have a built-in feature to support your use case, but it can be done with some customization!

To make it work the way you need, you need to:

  1. Switch to the Thumbnails layout on the Layout tab

  2. Then add the following script to your widget’s Custom JS section on the Style tab:

const LISTEN_TYPES = {
	one: {
		select: (selector, root) => root.querySelector(selector),
		validate: (node) => !!node,
	},
	all: {
		select: (selector, root) => root.querySelectorAll(selector),
		validate: (node) => node?.length > 0,
	},
};

function listenStep(args) {
	args.node = args.select(args.selector, args.root);

	if (!args.validate(args.node)) {
		args.step++;
		if (args.step < args.limit)
			setTimeout(() => {
				listenStep(args);
			}, args.delay);
		else args.reject();
	} else {
		args.resolve(args.node);
	}
}

async function asyncListenFor(selector, type = 'one', customArgs = {}) {
	const args = {
		root: document,
		node: undefined,
		selector,
		delay: 100,
		limit: 50,
		step: 0,
		select: LISTEN_TYPES[type].select,
		validate: LISTEN_TYPES[type].validate,
		reject: () => {},
		...customArgs,
	};

	if (type === 'one' || type === 'all') {
		return new Promise((resolve) => {
			listenStep({ ...args, resolve });
		});
	}
}

const secondThumbnailsSelector = '.eapp-photo-gallery-thumbnails-second';
const notActiveThumbnailSelctor =
	'.eapp-photo-gallery-thumbnails-thumbnailImageContainer:not(.eapp-photo-gallery-thumbnails-thumbnailActive)';

asyncListenFor(secondThumbnailsSelector).then((secondThumbnails) => {
	secondThumbnails.addEventListener('mouseover', (e) => {
		const notActiveThumbnail = e.target.closest(notActiveThumbnailSelctor);
		if (notActiveThumbnail) {
			notActiveThumbnail.dispatchEvent(
				new MouseEvent('mouseup', {
					bubbles: true,
					cancelable: true,
					view: window,
				})
			);
		}
	});
});

Please note that Custom JS operates only upon widget installation, so it won’t work in the preview mode.

Let me know if it worked! :slight_smile: