Автор

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

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

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


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

Вариант реализации CSS3 градиента на тексте. Нужный эффект достигается за счет такой подборки цвета заднего фона, что накладываемый на него градиент практически не виден, а текст приобретает градиент, за счет более светлого цвета используемого для самого текста.


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

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


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

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close