Смена превью фотоальбома при наведении курсора на JavaScript

19.07.2018 02:41:33 am

Здравствуйте. Являюсь владелицей нескольких сайтов, один из которых фотогалерея. Главная страница представляет из себя список фотоальбомов, где отображены превью самих альбомов, в качестве превью альбома, берется первое фото-превью из альбома. Фото галерея на сегодняшний день, устарела, и хочется её немного сделать современнее.

На многих фотогалереях можно наблюдать, как меняются по очереди превью, одна картинка сменяет другую при наведении курсора на превью альбома. Такая смена картинок будет лучше всякого описания альбома, пользователи могут видить, что находится на странице и поймут, надо ли им переходить в этот альбом или продолжать поиск альбома.

Я Вас хочу попросить написать именно такой JavaScript, который бы сменял превью фотографий из альбома, при наведении на превью альбома.

Код блока для превью альбома составлен так:

<div class="preview_album" id="album_3739">
	<div class="preview_album_title">Название альбома</div>
	<div class="preview_image">
		<img src="./albums/3739/preview/1.jpg" class="preview_img">
	</div>
	<div class="mini_like">
		<!-- Mini Like Code -->
	</div>
</div>

Цифры в идентификаторе блока: "album_3739" всегда совпадают со всеми фотографиями из альбома: "./albums/3739/preview/1.jpg". Превью фотографий имеют один формат картинки "jpg", даже, если оригиналы имеют другой формат.

Спасибо за разработку.

Жалоба

20.07.2018 04:08:21 pm

Здравствуйте, Эмили! Вот, что я набросал:

var previewAlbum = document.getElementsByClassName('preview_album'), run = [];

for (var i = 0; previewAlbum.length > i; i++) {
	previewAlbum[i].onmouseover = function() {
		var img = this.querySelector('.preview_img');
		var detailUrl = img.src.split('/');
		var album = parseInt(this.id.replace(/\D+/g, ''));
		var photo = parseInt(detailUrl[detailUrl.length - 1].replace(/\D+/g, ''));

		run[i] = setInterval(function() {
			photo++;
			img.src = './albums/' + album + '/preview/' + photo + '.jpg';	
		}, 3000);
	};

	previewAlbum[i].onmouseout = function() {
		clearInterval(run[i]);
	};
};

Недочет в том, что неизвестно количество фотографий в альбоме... Получается, когда сценарий дойдет до последней фотографии, дальше он будет выдавать ложные пути (фотографии, которых не существует). Чтобы этого не допустить, предлагаю добавить значение - количество фото в альбоме, например, добавив атрибут data-count в блок:

<div class="preview_album" id="album_3739" data-count="3">

Цифра 3 - значит три фотографии в альбоме. Дальше в сценарий, кусок кода:

		run[i] = setInterval(function() {
			photo++;
			img.src = './albums/' + album + '/preview/' + photo + '.jpg';	
		}, 3000);

Меняем на:

		var dataCount = this.getAttribute('data-count');

		run[i] = setInterval(function() {
			photo++;
			img.src = './albums/' + album + '/preview/' + photo + '.jpg';
			if (dataCount == photo) {
				photo = 0;
			};
		}, 3000);

И теперь фотографии будут заменяться без ошибок, после последней фотографии, замена картинок начнется заново, с первой фотографии.

Жалоба

23.07.2018 02:07:11 pm

Slash, спасибо за работу.

Жалоба