Доброго времени суток, мои верные падаваны и гости блога. В некоторых прошлых публикациях я рассказывал вам о создании галерей различными способами. Сегодня же я хочу показать, как создается адаптивная галерея 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> |
На этом публикация подошла к концу. Надеюсь она была вам полезной. Обязательно подписывайтесь на обновления моего блога вместе с коллегами и друзьями и следите за выходом новых статей. Удачи. Пока-пока!
С уважением, Роман Чуешов