Сетка миниатюр с предосмотром изображений

В последнее время интернет гигант Google стал на путь модернизма, и весьма преобразил свои ресурсы, а именно поиск изображений. Поиск стал более отзывчивым к пользователю, с приятным интерфейсом и продуманными деталями. Основным преимуществом является реакция изображений на нажатие мышки, в результате чего, мы получим выпадающий список с увеличенным изображением, его заголовком, описанием и возможностью перейти на ресурс с изображением. В данном уроке мы рассмотрим как это можно реализовать у себя на сайте.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

</pre>

</a></li>

</a></li>

</ul>

<pre>

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

</pre>

<ul>

<li>

</a>

<h3>Заголовок</h3>

Описание.

<a href="#">Перейти на сайт</a></div>

</div>

</div></li>

</ul>

<pre>

С разметкой мы разобрались, перейдем к следующему шагу.

Шаг 2. CSS

Для начала нам необходимо определить стили сетки, она будет во всю ширину экрана, кроме этого нам необходимо отцентрировать миниатюры, сделаем это мы с помощью “display: inline-block”:

.og-grid {

list-style: none;

padding: 20px 0;

margin: 0 auto;

text-align: center;

width: 100%;

}

.og-grid li {

display: inline-block;

margin: 10px 5px 0 5px;

vertical-align: top;

height: 250px;

}

Нам необходимо отображать ссылки как блоки:

.og-grid li > a,

.og-grid li > a img {

border: none;

outline: none;

display: block;

position: relative;

}

Теперь добавим знак стрелки, который будет появляться когда активируем большой контейнер:

.og-grid li.og-expanded > a::after {

top: auto;

border: solid transparent;

content: " ";

height: 0;

width: 0;

position: absolute;

pointer-events: none;

border-bottom-color: #ddd;

border-width: 15px;

left: 50%;

margin: -20px 0 0 -15px;

}

Блок в сером цвете будет иметь абсолютное позиционирование, кроме этого его высота, изначально, будет равна 0, а опция overflow равна hidden- элемент будет скрыт.

.og-expander {

position: absolute;

background: #ddd;

top: auto;

left: 0;

width: 100%;

margin-top: 10px;

text-align: left;

height: 0;

overflow: hidden;

}

.og-expander-inner {

padding: 50px 30px;

height: 100%;

}

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

.og-close {

position: absolute;

width: 40px;

height: 40px;

top: 20px;

right: 20px;

cursor: pointer;

}

.og-close::before,

.og-close::after {

content: '';

position: absolute;

width: 100%;

top: 50%;

height: 1px;

background: #888;

transform: rotate(45deg);

}

.og-close::after {

transform: rotate(-45deg);

}

.og-close:hover::before,

.og-close:hover::after {

background: #333;

}

Контейнеры для изображения и описания будут 50% в ширину, а также прикреплены друг к другу:

.og-fullimg,

.og-details {

width: 50%;

float: left;

height: 100%;

overflow: hidden;

position: relative;

}

Теперь определим базовые стили для текста и ссылки:

.og-details h3 {

font-weight: 300;

font-size: 52px;

padding: 40px 0 10px;

margin-bottom: 10px;

}

.og-details p {

font-weight: 400;

font-size: 16px;

line-height: 22px;

color: #999;

}

.og-details a {

font-weight: 700;

font-size: 16px;

color: #333;

text-transform: uppercase;

letter-spacing: 2px;

padding: 10px 20px;

border: 3px solid #333;

display: inline-block;

margin: 30px 0 0;

outline: none;

}

.og-details a::before {

content: '\2192';

display: inline-block;

margin-right: 10px;

}

.og-details a:hover {

border-color: #999;

color: #999;

}

Добавим элемент для загрузки изображений, он будет достаточно просто, кроме этого установим теми и немного закруглим:

.og-loading {

width: 20px;

height: 20px;

border-radius: 50%;

background: #ddd;

box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;

position: absolute;

top: 50%;

left: 50%;

margin: -25px 0 0 -25px;

animation: loader 0.5s infinite ease-in-out both;

}

@keyframes loader {

0% { background: #ddd; }

33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }

66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }

}

Добавим несколько медиа-запросов, они необходимы для правильного отображения если размер экрана меньше 650px:

@media screen and (max-width: 830px) {

.og-expander h3 { font-size: 32px; }

.og-expander p { font-size: 13px; }

.og-expander a { font-size: 12px; }

}

@media screen and (max-width: 650px) {

.og-fullimg { display: none; }

.og-details { float: none; width: 100%; }

}

Со стилями мы разобрались, перейдем к последнему шагу.

Шаг 3. JavaScript

Для начала нам необходимо определить базовые переменные:

// списки элементов

var $grid = $( '#og-grid' ),

// сами элементы

$items = $grid.children( 'li' ),

// индекс текущего элемента

current = -1,

// позиция раскрывшегося элемента

previewPos = -1,

// количество пикселей, на которое нужно прокрутить страницу

scrollExtra = 0,

marginExpanded = 10,

$window = $( window ), winsize,

$body = $( 'html, body' ),

// события трансформации

transEndEventNames = {

'WebkitTransition' : 'webkitTransitionEnd',

'MozTransition' : 'transitionend',

'OTransition' : 'oTransitionEnd',

'msTransition' : 'MSTransitionEnd',

'transition' : 'transitionend'

transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],

support = Modernizr.csstransitions,

// базовые настройки

settings = {

minHeight : 500,

speed : 350,

easing : 'ease'

};

Нам необходимо загрузить все изображения, после этого мы сможем записать все размеры изображений:

function init( config ) {

// настройки

settings = $.extend( true, {}, settings, config );

// загрузить все изображения

$grid.imagesLoaded( function() {

// сохраняем размер и смещение элементов

saveItemInfo( true );

// получаем размер окна

getWinSize();

// инициализация событий

initEvents();

} );

}

// сохраняем верхнее смещение элемента и его высоту

function saveItemInfo( saveheight ) {

$items.each( function() {

var $item = $( this );

$item.data( 'offsetTop', $item.offset().top );

if( saveheight ) {

$item.data( 'height', $item.height() );

}

} );

}

function getWinSize() {

winsize = { width : $window.width(), height : $window.height() };

}

Функция update нам будет необходима для обновления информации в панели представления:

update : function( $item ) {

// обновить настройки элемента

if( $item ) {

this.$item = $item;

}

// если раскрыта, убираем класс "og-expanded" с текущего элемента

if( current !== -1 ) {

var $currentItem = $items.eq( current );

$currentItem.removeClass( 'og-expanded' );

this.$item.addClass( 'og-expanded' );

// позиция Preview объекта

this.positionPreview();

}

// обновить текущий индекс

current = this.$item.index();

// обновить контент представления

var $itemEl = this.$item.children( 'a' ),

eldata = {

href : $itemEl.attr( 'href' ),

largesrc : $itemEl.data( 'largesrc' ),

title : $itemEl.data( 'title' ),

description : $itemEl.data( 'description' )

};

this.$title.html( eldata.title );

this.$description.html( eldata.description );

this.$href.attr( 'href', eldata.href );

var self = this;

// удалить изображение из панели представления

if( typeof self.$largeImg != 'undefined' ) {

self.$largeImg.remove();

}

// загрузить новое изображение и добавить в панель

if( self.$fullimage.is( ':visible' ) ) {

this.$loading.show();

$( '<img alt="" />' ).load( function() {

self.$loading.hide();

self.$largeImg = $( this ).fadeIn( 350 );

self.$fullimage.append( self.$largeImg );

} ).attr( 'src', eldata.largesrc );

}

Страница должна немного смещаться вниз, когда блок будет развернут:

open : function() {

setTimeout( $.proxy( function() {

// задать высоту блока

this.setHeights();

// сместить позицию страницы

this.positionPreview();

}, this ), 25 );

}

setHeights : function() {

var self = this,

onEndFn = function() {

if( support ) {

self.$item.off( transEndEventName );

}

self.$item.addClass( 'og-expanded' );

};

this.calcHeight();

this.$previewEl.css( 'height', this.height );

this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );

if( !support ) {

onEndFn.call();

}

calcHeight : function() {

var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,

itemHeight = winsize.height;

if( heightPreview < settings.minHeight ) {

heightPreview = settings.minHeight;

itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;

}

this.height = heightPreview;

this.itemHeight = itemHeight;

}

positionPreview : function() {

// сместить страницу

var position = this.$item.data( 'offsetTop' ),

previewOffsetT = this.$previewEl.offset().top - scrollExtra,

scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT;