Как сделать динамическую галерею из плиток на javascript?

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

Как сделать динамическую галерею из плиток на javascript (jquery)?

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

Наша галерея будет состоять из плиток (квадратиков) разного размера – на месте этих квадратиков будут изображения, которые, динамически, будут меняться каждые 4 секунды.

Давайте рассмотрим схему, по которой будут сверстаны элементы общего квадрата:

Схема расположения изображений

 

HTML верстка:

<div class="wrap">

	<img id="img_1" src="img/1.jpg">
	<img id="img_2" src="img/2.jpg">
	<img id="img_3" src="img/3.jpg">
	<img id="img_4" src="img/4.jpg">
	<img id="img_5" src="img/5.jpg">
	<img id="img_6" src="img/6.jpg">
	<img id="img_7" src="img/7.jpg">
	<img id="img_8" src="img/8.jpg">
	<img id="img_9" src="img/9.jpg">
	<img id="img_10" src="img/10.jpg">
	
</div>

В div обертке находятся изображения, и поэтому, чтобы заменить картинки на свои, достаточно изменить ссылку на изображение в атрибуте src.

 

CSS стили:

	.wrap{
    width: 640px;
    height: 640px;
	margin: 30px auto;
	box-shadow: 0 0 10px rgba(158, 143, 143, 0.5);
	border-radius: 20px;
	}
	
	.wrap img{
	position: absolute;
	}
	
   	#img_1{		
	border-radius: 20px 0 0 0;
	-moz-border-radius: 20px 0 0 0;
	-webkit-border-radius: 20px 0 0 0;
	}
   
	#img_1,#img_9,#img_10{		
    width: 240px;
    height: 240px;
	}
	
	#img_2{		
    width: 400px;
    height: 400px;
	margin: 0 0 0 240px;
	border-radius: 0 20px 0 0;
	-moz-border-radius: 0 20px 0 0;
	-webkit-border-radius: 0 20px 0 0;
	}
	
	#img_3,#img_8{		
    width: 160px;
    height: 160px;
	}
	
	#img_3{
    margin: 240px 0 0 0;
	}
	
	#img_4,#img_5,#img_6,#img_7{		
    width: 80px;
    height: 80px;
	}
	
	#img_4{
	margin: 240px 0 0 160px;
	}
	
	#img_5{
	margin: 320px 0 0 160px;
	}
	
	#img_6{
	margin: 400px 0 0 0;
	}
	
	#img_7{
	margin: 400px 0 0 80px;
	}
	
	#img_8{
	margin: 480px 0 0 0;
	border-radius: 0 0 0 20px;
	-moz-border-radius: 0 0 0 20px;
	-webkit-border-radius: 0 0 0 20px;
	}
	
	#img_9{		
    margin: 400px 240px 0 160px;
	}
	
	#img_10{
    margin: 400px 0 0 400px;
	border-radius: 0 0 20px 0;
	-moz-border-radius: 0 0 20px 0;
	-webkit-border-radius: 0 0 20px 0;
	}

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

Цифрами, на схеме выше, обозначены номера элементов, соответствующих идентификаторам в стилях (например, картинка с цифрой 5, соответствует id = img_5).

 

Рассмотрим JavaScript код (jquery):

$(document).ready(function(){

	function dynamic_gallery() { 
	
		r1 = Math.round(Math.random() * (2 - 1) + 1);
		r2 = Math.round(Math.random() * (5 - 3) + 3);
		r3 = Math.round(Math.random() * (8 - 6) + 6);
		r4 = Math.round(Math.random() * (10 - 9) + 9);
		
		obmen = $('#img_' + r1 ).attr('src');
		$('#img_' + r1 ).attr('src', $('#img_' + r3 ).attr('src')).animate({opacity: 0.75},500).animate({opacity: 1},300);
		$('#img_' + r3 ).attr('src', obmen).animate({opacity: 0.75},500).animate({opacity: 1},300);
		
		obmen = $('#img_' + r2 ).attr('src');
		$('#img_' + r2 ).attr('src', $('#img_' + r4 ).attr('src')).animate({opacity: 0.75},500).animate({opacity: 1},300);
		$('#img_' + r4 ).attr('src', obmen).animate({opacity: 0.75},500).animate({opacity: 1},300);
	}
	
	setInterval(dynamic_gallery, 4000);	
});

Здесь мы устанавливаем интервал в 4 секунды на выполнение функции – “dynamic_gallery”.

В этой функции мы обмениваем 4 картинки, с помощью создания четырех случайных чисел:

  1. От 1 до 2
  2. От 3 до 5
  3. От 6 до 8
  4. От 9 до 10

Переменная “obmen” необходима для сохранения ссылки текущей картинки.

Для небольшого визуального эффекта используется анимация, которая в течение 500 миллисекунд делает картинку прозрачной на 75 процентов, после чего, уже за 300 мс делает её полностью непрозрачной.

Demo пример

Скачать исходники


На этом у меня все, подписывайтесь на обновления, пока!


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


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

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

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

*

code

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