вВерстка

АДАПТИВНАЯ ГАЛЕРЕЯ LEAST.JS

АДАПТИВНАЯ ГАЛЕРЕЯ LEAST.JS

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

HTML

 

CSS

Все стили для галереи уже прописаны в поставляемом с ней файле least.min.css, но для нашей Демо страницы мы переопределили несколько классов:

 

javascript

Для работы галереи подключаем следующие скрипты:

 

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

 

Опции

Имеется и парочка опций:

  • random‘: true/false (по умолчанию true – включено)
  • lazyload‘: true/false  (по умолчанию true – включено)

 

[aio_button align=”left” animation=”swing” color=”blue” size=”small” icon=”search” text=”ДЕМО” relationship=”dofollow” url=”https://romua1d.ru/examples/resp_gallery/”]

[wpfilebase tag=file id=31 /]

Источник: http://pcvector.net/scripts/image-effects/424-adaptivnaya-galereya-leastjs.html

Пожалуйста, оцените материал

Внимание! Если Вы обнаружили ошибки или нерабочие ссылки в тексте, пожалуйста, сообщите мне.

Похожие посты

Автор:

Веб-разработчик. Работа с проектами простой и средней сложности. Верстка, программирование. Simpla, Drupal, Wordpress.

Оставить комментарий

Ваш e-mail не будет опубликован.