Галерея для вашего сайта на javascript!



Пример галереи на javascript

Приветствую вас — дорогой читатель! В этой статье я расскажу и приведу готовый рабочий код простой галереи для сайта!

Как и в статьях о счастливом билете и тесте на javascript, в конце статьи будет пример работы данной галереи.

Сначала, немного расскажу про галерею, а потом приведу код и немного расскажу о нем.

Особенности галереи

Первое: изображения можно «перещелкивать» кликами мыши на соответствующие кнопки (Back и Next).

Второе: Картинки можно перелистывать на стрелочки.

Третье: Стрелочки появляются только при наведении на изображение.

Четвертое: Если мы «Дошли» до последней в галерее картинки, то стрелочка — «Далее» исчезает, тоже самое и со стрелкой — «Назад».



Пятое: Для изменения галереи (добавление новых картинок либо наоборот — извлечение ненужных) достаточно добавить в массив новый элемент — ссылку на изображение.

JavaScript код галереи

Давайте рассмотрим и разберемся в коде..

<script type="text/javascript">  

			//Массив, в котором содержатся ссылки на изображения
	var imageArray = [
	
		"https://sergey-oganesyan.ru/wp-content/uploads/2014/01/1.jpg",		
		"https://sergey-oganesyan.ru/wp-content/uploads/2014/01/2.jpg",		
		"https://sergey-oganesyan.ru/wp-content/uploads/2014/01/3.jpg",		
		"https://sergey-oganesyan.ru/wp-content/uploads/2014/01/4.jpg",		
		"https://sergey-oganesyan.ru/wp-content/uploads/2014/01/5.jpg",		
		"https://sergey-oganesyan.ru/wp-content/uploads/2014/01/6.jpg",		
		"https://sergey-oganesyan.ru/wp-content/uploads/2014/01/7.jpg",		
		"https://sergey-oganesyan.ru/wp-content/uploads/2014/01/8.jpg",		
		"https://sergey-oganesyan.ru/wp-content/uploads/2014/01/9.jpg",		
		"https://sergey-oganesyan.ru/wp-content/uploads/2014/01/10.jpg",				
	];
	
	window.number = '0';

				//Привязываем количество картинок к размеру массива
	var imageCount = imageArray.length;
					
	function image(num){
	
			//Если выбрана следующая картинка
		if(num == 1){
		
				//Если это последняя картинка, то не увеличиваем счетчик number
			if(number < imageCount - 1){
			
				number++;

				document.getElementById('images').src = imageArray[number];
				document.getElementById('num_img').innerHTML= number + 1 + '/' + imageCount;
			}
		}					 
		else{  //Если выбрана предыдущая картинка
		
					//Если это первая картинка, то не уменьшаем счетчик number
			if(number > 0){
			
				number--;
				document.getElementById('images').src = imageArray[number];
				document.getElementById('num_img').innerHTML= number + 1 + '/' + imageCount;
			}
		}
	}
	
			//Функция для показа стрелочек
	function btn_show(){

		if(number != 0) document.getElementById('left').style.display='block';
		if(number != imageCount - 1) document.getElementById('right').style.display='block';
	}
	
			//Функция, которая прекращает показ стрелочек
	function btn_noshow(){

		document.getElementById('left').style.display='none';
		document.getElementById('right').style.display='none';
	}
		
		//Выводим картинки
	document.write('<img id="images" src="' + imageArray[0] + '">');
</script>

imageArray — массив, в котором содержаться ссылки на изображения. Чтобы добавить, убрать, изменить порядок и так далее и тому подобное, достаточно изменить этот массив и все! Больше менять ничего не требуется.

number — переменная, которая отвечает за номер текущей картинки.

image(num) — данная функция принимает числовой параметр, и отвечает за перелистывание картинок (влево, вправо), то есть:

image(1) — показать следующую картинку за счет инкрементирования (увеличения на единицу) переменной number

Если передать любой другой параметр, отличный от 1, то покажется предыдущая картинка.

btn_show — функция, которая показывает стрелочки при наведении на изображения — событие onMouseOver.

btn_noshow — это функция прекращает показ картинок и вызывается событием onMouseOut, когда мы убираем мышь из зоны картинок.

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

В принципе, сложностей в использовании данной галереи возникнуть не должно, в коде я привел комментарии и вы с легкостью сможете изменить количество, порядок, оставить только вариант перелистывания с помощью кнопок или с помощью только стрелок, размеры изображения и т.д. и т.р.

Пример работы галереи

Вот так выглядит галерея в работе..

Demo галерея

Скачать пример

На этом все, желаю удачи и всего наилучшего!

Комментарий (8)

  • Аксинья| 10 ноября 2014

    Здравствуйте!Очень понравилась ваша задумка, но, вставив свои изображения с ноута, картинки не отображаются :( Помогите пожалуйста :( Студентка, 18 лет

  • Toxa| 9 октября 2015

    У меня тоже самое указав картинки в массиве «img src=images/название картинки» код ваш полностью я навичек не ругайте сильно)))

    • Сергей Оганесян| 11 октября 2015

      Добрый день! Нужно указывать Абсолютный путь к картинке. В вашем случае в корне сайта должна быть папка — «images», а в ней уже картинки с нужными названиями.

  • Александр| 8 декабря 2015

    Здравствуйте. Подскажите, как реализовать увеличение картинки поверх страницы в n количество раз (в процентом соотношении). Думаю, многим будет полезна эта информация. Попытался сам, да знаний не хватает. Думал сделать по клику оригинальный размер изображения, но до этго тоже не додумался)))

  • Валерий| 25 мая 2017

    Спасибо

  • Оставить ответ

    Ваш e-mail не будет опубликован. Обязательные поля помечены *