Галерея як у google

У цьому уроці ми створимо галерею, яка буде представлена у вигляді плаваючих блоків, як ніби цеглинки. Ви, напевно, вже бачили сайти з таким оформленням. Звичайно, так можна оформити новини, але от мені більше до душі зробити в такому вигляді галерею зображень. У кожного зображення буде докладний опис і при натисканні на нього, відкривається спливає блок з повним розміром зображення і можливістю переміщатися до наступного і попереднього. Крім цього переміщення може здійснюватися за допомогою стрілок на клавіатурі.

Приклад можна побачити тут:

Подивитися прімерСкачать

Як користуватися?

HTML частина

У блоці знаходиться невпорядкований список з класом grid, в якому необхідно розміщувати мініюатюру зображення і опис в окремому пункті меню наступним чином:

123456789101112

class="Grid-wrap"gt;lt;ul class="Grid"gt;lt;li class="Grid-sizer"gt; lt;/ligt;lt;ligt;lt;img src="Img / thumb / 1.jpg" alt="Img01"/gt;lt;h3gt; Назваlt;/h3gt; lt;pgt; Описlt;/pgt; lt;/figcaptiongt;lt;/figuregt;lt;/ligt; ...lt;/ulgt;lt;/sectiongt;

Після того, як закінчили зі слайдами зображень і вступним описом, переходимо до висновку повного опису і у повний розмір. Вони розташовуються в блоці з ідентифікатором slideshow, а всередині також знаходиться невпорядкований список:

У меню можна додати підпункти наступним чином:

12345678910111213

class="Slideshow"gt;lt;ulgt;lt;ligt;lt;h3gt; Назваlt;/h3gt;lt;pgt; Детальний описlt;/pgt;lt;/figcaptiongt;lt;img src="Img / large / 1.jpg" alt="Img01"/gt;lt;/figuregt;lt;/ligt;lt;/ulgt;lt;/sectiongt;

А також перед тим як закрити даний блок вставимо підказку про те, що можна переглядати галерею за допомогою стрілок на клавіатурі:

lt;span class="Icon nav-prev"gt; lt;/spangt;lt;span class="Icon nav-next"gt; lt;/spangt;lt;span class="Icon nav-close"gt; lt;/spangt;lt;/navgt;lt;div class="Info-keys icon"gt; Керуйте за допомогою стрілок на клавіатуріlt;/divgt;

Дана підказка знаходиться в лівому верхньому кутку:

Відео: How to save picture # 39; s from google to gallery

Керуйте за допомогою стрілок на клавіатурі

CSS частина

Структура меню у нас визначена. Зараз додамо цього всього красивий вид.

Підключаємо з файлу спеціальні шрифти, щоб використовувати стрілки «вліво», «вправо» і значок «закрити»:

12345678910

@ Font-face {font-family: `Fontawesome`-src:url(`../fonts/fontawesome/fontawesome.eot?-e43dk9`)-src:url(`../fonts/fontawesome/fontawesome.eot?#iefix-e43dk9`) format(`Embedded-opentype`),url(`../fonts/fontawesome/fontawesome.woff?-e43dk9`) format(`Woff`),url(`../fonts/fontawesome/fontawesome.ttf?-e43dk9`) format(`Truetype`),url(`../fonts/fontawesome/fontawesome.svg?-e43dk9#fontawesome`) format(`Svg`)-font-weight: normal-font-style: normal-}

Далі задаємо стилі для блоку, в якому знаходяться мініатюри записів і зображень:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

.grid-gallery ul {list-style: none-margin: 0-padding: 0-}.grid-gallery figure {margin: 0-}.grid-gallery figure img {display: block-width: 100%-}.grid-gallery figcaption h3 {margin: 0-padding: 0 0 0.5em-}.grid-gallery figcaption p {margin: 0-}.grid-wrap {max-width: 69em-margin: 0 auto-padding: 0 1em 1.875em-}.grid {margin: 0 auto-}.grid li {width: 25%-float: left-cursor: pointer-}.grid figure {padding: 15px--webkit-transition: opacity 0.2s-transition: opacity 0.2s-}.grid li: hover figure {opacity: 0.7-}.grid figcaption {background: # e4e4e4-padding: 25px-}

Потім стилі для повного запису:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123

.slideshow {position: fixed-background: rgba(0,0,0,0.6)-width: 100%-height: 100%-top: 0-left: 0-z-index: 500-opacity: 0-visibility: hidden-overflow: hidden--webkit-perspective: 1000px-perspective: 1000px--webkit-transition: opacity 0.5s, visibility 0s 0.5s-transition: opacity 0.5s, visibility 0s 0.5s-}.slideshow-open .slideshow {opacity: 1-visibility: visible--webkit-transition: opacity 0.5s-transition: opacity 0.5s-}.slideshow ul {width: 100%-height: 100%--webkit-transform-style: preserve-3d-transform-style: preserve-3d--webkit-transform: translate3d(0,0,150px)-transform: translate3d(0,0,150px)--webkit-transition: -webkit-transform 0.5s-transition: transform 0.5s-}.slideshow ul.animatable li {-webkit-transition: -webkit-transform 0.5s-transition: transform 0.5s-}.slideshow-open .slideshow ul {-webkit-transform: translate3d(0,0,0)-transform: translate3d(0,0,0)-}.slideshow li {width: 660px-height: 560px-position: absolute-top: 50%-left: 50%-margin: -280px 0 0 -330px-visibility: hidden-}.slideshow li.show {visibility: visible-}.slideshow li: after {content: ``-position: absolute-width: 100%-height: 100%-top: 0-left: 0-background: rgba(255,255,255,0.8)--webkit-transition: opacity 0.3s-transition: opacity 0.3s-}.slideshow li.current: after {visibility: hidden-opacity: 0--webkit-transition: opacity 0.3s, visibility 0s 0.3s-transition: opacity 0.3s, visibility 0s 0.3s-}.slideshow figure {width: 100%-height: 100%-background: #fff-border: 50px solid #fff-overflow: hidden-}.slideshow figcaption {padding-bottom: 20px-}.slideshow figcaption h3 {font-weight: 300-font-size: 200%-}.slideshow nav span {position: fixed-z-index: 1000-color: # 59656c-text-align: center-padding: 3%-cursor: pointer-font-size: 2.2em-}.slideshow nav span.nav-prev,.slideshow nav span.nav-next {top: 50%--webkit-transform: translateY(-50%)-transform: translateY(-50%)-}.slideshow nav span.nav-next {right: 0-}.slideshow nav span.nav-close {top: 0-right: 0-padding: 0.5em 1em-color: # 31373a-}

Іконки «вліво», »вправо» і «закрити» ми будемо брати з тих шрифтів, що підключили спочатку файлу стилів:

123456789101112131415161718192021222324

.icon: before,.icon: after {font-family: `Fontawesome`-speak: none-font-style: normal-font-weight: normal-font-variant: normal-text-transform: none-line-height: 1--webkit-font-smoothing: antialiased--moz-osx-font-smoothing: grayscale-}span.nav-prev: before {content: " e601"-}span.nav-next: before {content: " e600"-}span.nav-close: before {content: " e602"-}

Далі оформляємо підказку в лівому верхньому кутку, так як там також є стрілки:

12345678910111213141516171819202122232425262728293031323334

.info-keys {position: fixed-top: 10px-left: 10px-width: 60px-font-size: 8px-padding-top: 20px-text-transform: uppercase-color: #fff-letter-spacing: 1px-text-align: center-}.info-keys: before,.info-keys: after {position: absolute-top: 0-width: 16px-height: 16px-border: 1px solid #fff-text-align: center-line-height: 14px-font-size: 12px-}.info-keys: before {left: 10px-content: " e603"-}.info-keys: after {right: 10px-content: " e604"-}

javascript частина

Структура меню та стилі є. Зараз залишилося зовсім небагато - це підключити необхідні jQuery плагіни, щоб створити блоки різних розмірів без порожнього місця:

lt;script src="Js / imagesloaded.pkgd.min.js"gt;scriptgt;lt;script src="Js / masonry.pkgd.min.js"gt;scriptgt;lt;script src="Js / classie.js"gt;scriptgt;lt;script src="Js / cbpGridGallery.js"gt;scriptgt;

А потім вибираємо ідентифікатор, в якому знаходяться блоки з неповними записами, так і блоки з повними:

123	lt;scriptgt; new CBPGridGallery (document.getElementById ( `grid-gallery`)) -lt;/scriptgt;

висновок

Дуже нестандартне оформлення новин чи галереї. Мені більше до душі оформити в такому стилі галерею, але і сайти є, де новини в такому вигляді виводяться (наприклад pinterest.com).