Автор

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

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


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

 

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

 

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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Для того, чтобы самым простым способом открыть и скрыть область или текст, можно использовать самый простой Java-скрипт.


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

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


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close