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

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

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

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

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

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

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

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

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

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

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

JavaScript код галереи

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

<script type="text/javascript">  

			//Массив, в котором содержатся ссылки на изображения
	var imageArray = [
	
		"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/1.jpg",		
		"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/2.jpg",		
		"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/3.jpg",		
		"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/4.jpg",		
		"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/5.jpg",		
		"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/6.jpg",		
		"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/7.jpg",		
		"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/8.jpg",		
		"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/9.jpg",		
		"http://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 галерея

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

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


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

  1. Аксинья пишет:

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

  2. Toxa пишет:

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

  3. Александр пишет:

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

Оставить комментарий

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

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>