Автор

03 06.2017
Расширяемая галерея изображений

Расширяемая галерея изображений


Изображение, которое расширяется при нажатии, переходит в полную ширину и превращается в галерею.

 

ДЕМО
ИСХОДНИКИ

 

Мы часто рассматриваем подход «2 блока модулей»: 50% -ное изображение ширины на одной стороне, а текст - на другом. Эти модули могут использоваться для раздела «О нас», для объяснения функций продукта или, как в нашем примере, для разделов изображений и информации о просмотре продукта.

Как правило, пользователь не может взаимодействовать с изображением. Но что, если вы хотите показать больше одного изображения? Опция может заключаться в том, чтобы запускать модальное слайд-шоу при нажатии. Однако переходы CSS позволяют использовать новые UX-решения. Новый подход может заключаться в том, чтобы расширить изображение, сделать его полной шириной, покрывая соседний контент и нажав вниз более низкое положение контента и превращая его в слайд-шоу полной ширины!

 

Создание структуры

HTML структурирован в 2 основных элемента <div> (.cd-slider-wrapper и .cd-item-info) - первый, содержащий галерею изображений, а второй - информацию о продукте (title, action button..) - завернутый внутрь Section.cd-single-item. Оставшееся содержимое вставляется в отдельный раздел .cd-content.

<section class="cd-single-item">
<div class="cd-slider-wrapper">
<ul class="cd-slider">
<li class="selected"><img src="img/img-1.jpg" alt="Product Image 1"></li>
<li><img src="img/img-2.jpg" alt="Product Image 1"></li>
<li><img src="img/img-3.jpg" alt="Product Image 2"></li>
</ul> <!-- cd-slider -->

<ul class="cd-slider-navigation">
<li><a href="#0" class="cd-prev inactive">Next</a></li>
<li><a href="#0" class="cd-next">Prev</a></li>
</ul> <!-- cd-slider-navigation -->

<a href="#0" class="cd-close">Close</a>
</div> <!-- cd-slider-wrapper -->

<div class="cd-item-info">
<h2>Produt Title</h2>
<p>Lorem ipsum dolor sit amet...</p>
<button class="add-to-cart">Add to cart</button>
</div> <!-- cd-item-info -->
</section> <!-- cd-single-item -->

<section class="cd-content">
<!-- other content here -->
</section>

Обратите внимание, что элемент .cd-slider-pagination (навигация для управления поисковым вызовом для каждого слайдера) напрямую не вставлен в html, но создан с использованием jQuery.

 

Добавление стиля

На небольших устройствах CSS довольно прост: оба .cd-slider-wrapper и .cd-item-info имеют полную ширину и следуют стандартным потокам страницы.

На настольных устройствах (ширина окна просмотра более 1024 пикселей) мы назначили позицию: абсолютная и ширина: 50% для .cd-item-info и поместили ее в правую сторону экрана.
Для элемента .cd-slider-wrapper мы устанавливаем ширину: 50%. Когда пользователь нажимает на галерею изображений, мы добавляем класс .cd-slider-active в раздел .cd-single-item: ширина .cd-slider-wrapper устанавливается равной 100%; Таким образом расширяется обертка .cd-slider-wrapper, охватывающая .cd-item-info (которая находится в позиции: абсолютная) и нажимает оставшееся содержимое. CSS3 Переход к значению ширины был добавлен для достижения плавной анимации.

@media only screen and (min-width: 1024px) {
  .cd-slider-wrapper {
    transition: width 0.4s;
    width: 50%; 
  }
  .cd-slider-active .cd-slider-wrapper {
    width: 100%; 
  } 
}
@media only screen and (min-width: 1024px) {
  .cd-item-info {
    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
    padding: 60px 60px 0;
  } 
}

Для правильной работы этой техники изображения галереи должны иметь соотношение сторон выше 1 (ширина выше высоты); Когда изображение находится в режиме слайд-шоу, его высота увеличивается пропорционально ширине. Поэтому изображение с соотношением сторон меньше 1 приведет к большей прокрутке.
Кроме того, поскольку .cd-item-info находится в положении: абсолютное, высота .cd-single-item устанавливается только по высоте галереи; Следовательно, высота .cd-item-info должна быть меньше, чем изображение галереи.

 

Обработка событий

Мы использовали jQuery для запуска режима слайд-шоу, когда пользователь щелкает изображение предварительного просмотра. Кроме того, мы реализовали базовый слайдер для галереи изображений (с навигацией по клавиатуре и сенсорному экрану, предыдущей / следующей и поисковой навигацией).

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

14 05.2017
Расширяемая галерея изображений

Полностраничное меню, которое заменяет текущий контент, вытесняя его с экрана.


06 06.2017
Расширяемая галерея изображений

Простая навигация, которая автоматически скрывается, когда пользователь прокручивается вниз и становится видимой, когда пользователь прокручивается вверх.


19 05.2017
Расширяемая галерея изображений

Простой шаблон, который использует свойство CSS фона для добавления фиксированного фонового эффекта.


09 04.2013
Расширяемая галерея изображений

В данной заметке представляю весьма элегантный способ это сделать. Реализация с помощью небольшого скрипта jQuery, который позволяет плавно прокрутить страницу как вверх, так и вниз. Плюс простое решение на CSS для кнопок "Вверх" и "Вниз", без картинок.

Дынный скрипт хорош тем, как и плагин с предыдущей статьи на эту тему, что когда страница поднята вверх - кнопка "Вверх" скрыта, когда внизу - скрыта кнопка "Вниз", причем параметры высоты, на которой появляются кнопки регулируется.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close