Exore LTD » CSS3 » Галерея как у Google
Лого SiteHere.ru

Октябрь 25, 2019 Запись была обновлена

Время чтения: 4 мин. Прочитать позже

Галерея как у Google

Google галерея

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

Пример можно увидеть здесь:

Посмотреть примерСкачать



Как пользоваться?

HTML часть

В блоке <section> находится неупорядоченный список с классом grid, в котором необходимо размещать миниюатюру изображения и описание в отдельном пункте меню следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12

<section class="grid-wrap">
    <ul class="grid">
        <li class="grid-sizer"></li>
        <li>
            <figure>
                <img src="img/thumb/1.png" alt="img01"/>
                <figcaption><h3>Название</h3> <p>Описание</p></figcaption>
            </figure>
        </li>
        ...
    </ul>
</section>

После того, как закончили с миниатюрами изображений и вводным описанием, переходим к выводу полного описания и полноразмерного изображения. Они располагаются в блоке <section> с идентификатором slideshow, а внутри также находится неупорядоченный список:

В меню можно добавить подпункты следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13

<section class="slideshow">
    <ul>
        <li>
            <figure>
                <figcaption>
                    <h3>Название</h3>
                    <p>Подробное описание</p>
                </figcaption>
                <img src="img/large/1.png" alt="img01"/>
            </figure>
        </li>
    </ul>
</section>

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

1
2
3
4
5
6

<nav>
    <span class="icon nav-prev"></span>
    <span class="icon nav-next"></span>
    <span class="icon nav-close"></span>
</nav>
<div class="info-keys icon">Управляйте с помощью стрелок на клавиатуре</div>

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

Управляйте с помощью стрелок на клавиатуре


CSS часть

Структура меню у нас определена. Сейчас придадим этому всему красивый вид.

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

1
2
3
4
5
6
7
8
9
10

@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;
}

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

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

.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;
}
Неполные новости

Затем стили для полной записи:

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

.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;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.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";
}
Значки "влево", "вправо" и "закрыть"

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

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

.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 плагины, чтобы создать блоки разных размеров без пустого места:

1
2
3
4

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpGridGallery.js"></script>

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

1
2
3

<script>
    new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
</script>


Вывод

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


Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2014/03/21/google-grid-gallery/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

8 комментариев к записи
  • Slader

    Респект и огромная благодарность! Автор не устает радовать нас! Обязательно возьму на вооружение, давно искал нечто подобное! Успехов Вам и зеленого света во всех начинаниях!

     
    Ответить
    • Юрий

      Спасибо! 🙂

       
      Ответить
      • Роман

        Юрий!
        Думаю, что разместить ссылку на оригинал статьи было-бы очень правильно! Не так-ли?

         
        Ответить
        • Юрий

          Роман, ссылка на оригинал есть. Она находится над кнопками социальных сетей. Из-за того что дизайн сайта изменился — шрифт стал маленьким. 🙂

           
          Ответить
          • ИЛЮШКА

            Кстати! Можно еще немного поменьше размер ссылки! Так поситители не будут ее просто замечать!

             
            Ответить
  • Константин

    Спасибо, возьму себе, пригодится! 😮

     
    Ответить
  • Азамат

    Здравствуйте, а как можно сделать кросбраузерным? то есть на мобильнике показывает как на компе.

     
    Ответить
  • Юрий Немец

    Здравствуйте, Азамат!
    Ведь на мобильных устройствах отображение точно такое же. Что вы имеете ввиду?

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *