Изображение, которое расширяется при нажатии, переходит в полную ширину и превращается в галерею.
Мы часто рассматриваем подход «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 для запуска режима слайд-шоу, когда пользователь щелкает изображение предварительного просмотра. Кроме того, мы реализовали базовый слайдер для галереи изображений (с навигацией по клавиатуре и сенсорному экрану, предыдущей / следующей и поисковой навигацией).
