Галерея для вашего сайта на 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 галерея Скачать пример
На этом все, желаю удачи и всего наилучшего!


Раздел: Программирование

Дата последнего изменения: 2014-01-22 18:27:14

Просмотров: 14069

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

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*