Приветствую тебя – дорогой читатель! В этом уроке я покажу, как сделать легкую и красивую галерею из плиток на javascript!
Как и во всех остальных уроках по 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 до 2
- От 3 до 5
- От 6 до 8
- От 9 до 10
Переменная “obmen” необходима для сохранения ссылки текущей картинки.
Для небольшого визуального эффекта используется анимация, которая в течение 500 миллисекунд делает картинку прозрачной на 75 процентов, после чего, уже за 300 мс делает её полностью непрозрачной.
Demo пример
Скачать исходники
На этом у меня все, подписывайтесь на обновления, пока!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.