Автор

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

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


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

 

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

 

Мы часто рассматриваем подход «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

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

Пост был написан мной 25.09.2011 и я его немного обновил и описал результаты этого неприятного факта. «Сегодня лопатил интернет и набрел на клон моего сайта. Дело в том, что этот домен (www.studio25kadr.ru) ранее принадлежал мне, но мне пришлось его поменять на существующий <a href="/">www.s-sd.ru</a>...


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

Это интро-страница, ориентированная на фоновое изображение полной ширины и жирное анимированное меню. И для браузеров, которые его поддерживают, хороший внешний вид, похожий на iOS, за навигацию.


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

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


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

Просматривая слайдер контента вы наверняка замечали навигацию в нем, которая позволяет осуществить быструю перемотку в нужное место. Зачастую эта навигация представлена в виде простых точек, или обычных стрелок, что не дает посетителю представления о том, какой элемент будет следующим. Сегодня мы рассмотрим как добиться красивого эффекта при наведении на изображение в меню навигации, который будет реализован с помощью CSS3. Идея заключается в раскрытии круговой навигации со стрелкой, а также пузырика с миниатюрой.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close