• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Простая адаптированая галерея картинок (Простая адаптивная галерея изображений на JavaScript)
Простая адаптированая галерея картинок
workman
Четверг, 28 Июня 2018 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Сидел как-то над сайтом и подумал. А почему бы не заскочить до брата Kostena и не закинуть что-нибудь такое интересненькое... Так вот делюсь простенькой галереей картинок для сайта. Кому необходимо, размеры картинок выставляем под свой вкус
Код
<ul id="gallereya">
<li><img src="ссылка на картинку" alt="$SITE_NAME$" /></li>
<li><img src="ссылка на картинку" alt="$SITE_NAME$" /></li>
<li><img src="ссылка на картинку" alt="$SITE_NAME$" /></li>
<li><img src="ссылка на картинку" alt="$SITE_NAME$" /></li>
<li><img src="ссылка на картинку" alt="$SITE_NAME$" /></li>
.... сколько угодно душе))
</ul>


CSS
Код
ul#gallereya {
width:100%;
padding:0;
text-align:center
}

ul#gallereya li {
display:inline-block;
width:24%;
height:200px;
object-fit:cover;
margin:5px 2px;
overflow:hidden
}

ul#gallereya li img {
width:100%;
height:100%;
object-fit:cover;
-moz-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out
}

ul#gallereya li img:hover {
-webkit-transform:scale(1.9);
-moz-transform:scale(1.9);
-o-transform:scale(1.9)
}

@media only screen and (max-width:480px) {
ul#gallereya li {
width:44%;
margin:1%
}
}

@media only screen and (max-width:960px) {
ul#gallereya li {
width:30%;
height:135px
}
}


JS ставим в самый низ сайта. Данное отвечает за увеличение картинки по клику
Код
<script type="text/javascript">$("#gallereya img").each(function () {
    if ($(this).attr("src").length > 0) {
  var a = "undefined" != typeof this.title ? ' title="' + this.title + '"' : "undefined" != typeof this.alt ? ' title="' + this.alt + '"' : "";
  $(this).wrap('<a href="' + this.src + '" class="ulightbox" target="_blank"' + a + "></a>")
    }
});</script>


Просмотреть демо галереи картинок

Прикрепления: 7161919.jpg (195.2 Kb)


Сообщение отредактировал
workman - Четверг, 28 Июня 2018, 20:32
Страна: (RU)
Kosten
Четверг, 28 Июня 2018 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Это отлично, когда материал изначально идет адаптивный.
Страна: (RU)
workman
Четверг, 28 Июня 2018 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
изначально идет адаптивный.

Ну для себя же писал все-таки )) Сразу под просмотр с мобилы настроил))
Страна: (RU)
Kosten
Четверг, 28 Июня 2018 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
workman, Надо заскринить и потом на главную прописать, так как адаптивного материала должно больше.

А если для себя писал, но это круто, знать косяков нет. 09a
Страна: (RU)
workman
Четверг, 28 Июня 2018 | Сообщение 5
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
А если для себя писал, но это круто, знать косяков нет

НУ ты же знаешь, что, то что пишу для себя никогда не косячу и не впиХУЮ разнуюгадость в коды )) 11a
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Простая адаптированая галерея картинок (Простая адаптивная галерея изображений на JavaScript)
  • Страница 1 из 1
  • 1
Поиск: