Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать в интернете на создании сайтов и блогов

Галерея на javascript своими руками. Подробное объяснение для новичков

 

Доброго времени суток, мои верные падаваны и гости блога. В некоторых прошлых публикациях я рассказывал вам о создании галерей различными способами. Сегодня же я хочу показать, как создается адаптивная галерея JavaScript-средствами.

Прочитав статью, вы узнаете, в чем главные отличия адаптивной верстки от остальных, узнаете, какие бывают виды галерей, где они могут использоваться и конечно же сможете запустить демо реализованного мной примера. Думаю, пришло время начать обучение!

Виды версток и отличительные черты адаптивности

На сегодняшний день существует несколько видов верстки: фиксированная, адаптивная, резиновая и отзывчивая.

Что касается первого вида верстки сайтов, то тут все предельно ясно и просто. Для всех элементов веб-ресурса, где в стилях нужно задать размер, разработчиком задаются конкретные значения.

Вследствие этого все объекты страницы зафиксированы и в случае уменьшения окна браузера появляется возможность горизонтального и/или вертикального скроллирования.

Как пример можно представить такой кусок кода:

<style>

.baseCont { width: 725px;}

</style>

, где .baseCont – некий класс в разметке html https://romanchueshov.ru/osnovyi-html/html-dlya-novichkov.html.

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

Итак, начну с резиновой верстки. Она позволяет растягивать содержимое веб-страничек в зависимости от размеров окна браузера. Хорошим тоном считается указывать минимальный и максимальный размеры растяжения, иначе в определенный момент объекты вашего сервиса будут или до неузнаваемости растянуты или начнут «наплывать» друг на друга.

<style>

.baseCont { width: 70%;}

</style>

Адаптивность может быть реализована как для всей страницы сайта, так и для конкретных объектов. Изменение последних происходит динамически, так как в стилевых правилах в зависимости от размера экрана прописываются определенные параметры.

Заметьте, это не плавные переходы от состояния к состоянию элементов, а отрывистые, резкие. Адаптивная верстка в основном создается при помощи медиа запросов @Media и функций.

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.baseCont { width: 540px; }
@media (max-width: 1300px) { /* функция max-width говорит о том, что ширина вкладки меньше указанного значения*/
.baseCont { width: 510px; }
}
@media (max-width: 1100px) {
.baseCont { width: 490px; }
}
@media (max-width: 730px) {
.baseCont { width: 370px; }
}
</style>

Если же объединить предыдущие два вида, то получится отзывчивая верстка. Понятное дело, что такой подход будет содержать в себе все положительные моменты как резиновой, так и адаптивной реализации. Часть кода будет выглядеть примерно вот так:

1
2
3
4
5
6
<style>
.baseCont { width: 70%; }
@media (max-width: 730px) {
.baseCont { width: 85%; }
}
</style>

Сфера применения адаптивных галерей

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

К галереям можно добавлять дополнительную функциональность. Так, в просторах интернета можно встретить множество примеров с выделенными категориями или вложенными альбомами. Очень популярными считаются слайдеры-карусели (реализуются в основном с помощью JavaScript и jQuery). Их еще иногда используют в верхней части сервисов для акцентирования внимания на действующих акциях или выгодных предложениях.

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

Пример адаптивного слайдера

Пример адаптивной галереи

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Example</title>
<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="/js/popup_img.js"></SCRIPT>
<script>
$(document).ready(function() { 
 
	$("img").click(function(){	
	  	var img = $(this);	
		var src = img.attr('src'); 
		$("body").append("<div class='up'>"+
						 "<div class='up_bg'></div>"+ 
						 ""+ 
						 "</div>"); 
		$(".up").fadeIn(380); 
		$(".up_bg").click(function(){	   
			$(".up").fadeOut(380);	
			setTimeout(function() {	
			  $(".up").remove(); 
			}, 380);
		});
	});
 
});
</script>
 <style>
body { background: #BDB76B;}
.cont {
	width: 80%;
	margin: 29px auto;
}
.up {
	display:none;
	position: absolute;
	height:100%;
	top:0;
	width:100%;
	left:0;
	text-align:center;
}
.up_bg {
	background:rgba(1,1,0,0.63);
	width:100%;
	position:absolute;
	height:100%;
}
.up_img {
	position: relative;	
	z-index:5;
	max-height:97%;
	margin:7% 0 0 0;
	max-width:97%;
}
.gItem h3 {
	text-transform: uppercase;
       	color: #710009;
	font: 11px;	
}
 
.gItem img {
     width: 200px; 
     height: 130px;
     max-width: 100%;
     -moz-border-radius: 7px;
     -webkit-border-radius: 7px;
     border-radius: 7px;      
}
.gItem {
	margin:  2% 2% 50px 2%;	
	float: left;
	width: 16%;
 
}
 
@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
	.gItem {width: 21%;}
}
 
@media only screen and (max-width : 710px),
only screen and (max-device-width : 710px){
	.gItem {width: 29%;}
}
 
@media only screen and (max-width : 520px),
only screen and (max-device-width : 520px){
	.gItem {width: 46%;}
}
 
@media only screen and (max-width : 310px),
only screen and (max-device-width : 310px){
	.gItem {width: 96%;}
	.gItem img {width: 96%;}
	.gItem h3 {font-size: 19px;}
}
 
 
</style>
 </head> 
 <body>
  <div class="cont">
	<div class="gItem">
		<a href="#"><img src="http://img2.goodfon.su/original/3900x2381/a/8e/3d-grafika-rendering-korabl.jpg?d=1" alt="" /></a>
		<h3>Первая</h3>
	</div>
 
	<div class="gItem">
		<a href="#"><img src="http://drobs.ru/opyat/48/gory_zakat_peyzazh_priroda_1680x1050.jpg" alt="" /></a>
		<h3>Вторая</h3>
	</div>
<div class="gItem">
		<a href="#"></a>
		<h3>Третья</h3>
	</div>
<div class="gItem">
		<a href="#"><img src="http://oboi-colibri.ru/wp-content/uploads/2014/03/mountain.jpg" alt="" /></a>
		<h3>Четвертая</h3>
	</div>
<div class="gItem">
		<a href="#"><img src="http://www.nastol.com.ua/pic/201210/1920x1080/nastol.com.ua-33597.jpg" alt="" /></a>
		<h3>Пятая</h3>
	</div>
<div class="gItem">
		<a href="#"><img src="http://www.fresher.ru/mary/11-2015/aspen-puteshestvennik-ili-priklyucheniya-zolotogo-retrivera/big/1.jpg" alt="" /></a>
		<h3>Шестая</h3>
	</div>
<div class="gItem">
		<a href="#"><img src="http://www.onlineigri.ru/images/imgc/kategory_small/24.jpg" alt="" /></a>
		<h3>Седьмая</h3>
	</div>
<div class="gItem">
		<a href="#"><img src="http://mainfun.ru/uploads/images/01/59/72/2015/03/24/547fd1.jpg" alt="" /></a>
		<h3>Восьмая</h3>
	</div>
<div class="gItem">
		<a href="#"><img src="http://elitefon.ru/images/201211/elitefon.ru_8848.jpg" alt="" /></a>
		<h3>Девятая</h3>
	</div>
<div class="gItem">
		<a href="#"></a>
		<h3>Десятая</h3>
	</div>
</div>
 
 </body> 
</html>

На этом публикация подошла к концу. Надеюсь она была вам полезной. Обязательно подписывайтесь на обновления моего блога вместе с коллегами и друзьями и следите за выходом новых статей. Удачи. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 756 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: