Автор

Галерея с эффектом скольжения фото на jQuery

Галерея с эффектом скольжения фото на jQuery


 

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

 

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

 

Такой вариант галереи будет отличным решением для мультимедийного сайта или сайта портфолио. И так, давайте приступим.

Шаг 1. HTML

Нам необходимо, впрочем как всегда, создать список с порядком вывода изображений:

<div class="slider">
 <ul>
 <li class="active">
 <img src="1.jpg" />
 </li>
 <li>
 <img src="2.jpg" />
 </li>
 <li>
 <img src="3.jpg" />
 </li>
 <li>
 <img src="4.jpg" />
 </li>
 <li>
 <img src="5.jpg" />
 </li>
 </ul>
 </div>

У нас есть класс active который будет указывать активное изображение.

Шаг 2. CSS

Нам необходимо добавить общие параметры для галереи, которые будут содержать правильное отображение галереи с права на лево, окантовка для изображений, и размер полускрытых изображений:

.slider {
 position: relative;
 left: -320px;
 margin-left: 50%;
}
ul {
 white-space: nowrap;
 overflow: visible;
 position: relative;
 left: 0;
 transition: left 1s;
}
li {
 display: inline-block;
 margin: 20px;
 cursor: pointer;
 height: 422px;
}
li img {
 border: 10px solid #FFF;
 box-shadow: 0 3px 6px 0 #999;
 display: block;
 height: 300px;
 opacity: 0.6;
 margin-top: 50px;
 transition: height 1s, opacity 0.5s, margin-top 1s;
}

li:hover img {
 box-shadow: 0 3px 6px 0 #333;
}

li.active img {
 margin-top: 0;
 height: 400px;
 opacity: 1;
}

 

Шаг 3. JavaScript

 

Нам необходимо простые функции для правильного отображения активного изображения и направленного движения галереи:

(function() {

$("li").on("click", function(){

var item = $(this),
 pos = "-"+(item.index() * 515)+"px";

item.addClass("active");
 item.siblings().removeClass("active");

$("ul").css("left", pos);

});

})();

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


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



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

Галерея с эффектом скольжения фото на jQuery

Эффект погружения, основанный на масках изображений и CSS-преобразованиях.


Галерея с эффектом скольжения фото на jQuery

Генератор бэкграунда для сайта позволяет вам разрабатывать собственные изображения используя треугольники и цветные градиенты. Вы можете настраивать ширину и высоту финального изображения, а также вариации и формы треугольников, размеры ячеек и цветовую палитру. Пользуйтесь :)


Галерея с эффектом скольжения фото на jQuery

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


Галерея с эффектом скольжения фото на jQuery

Если вы хотите объедение приятное с красивым на своем блоге то этот  урок станет вам весьма полезен. Мы рассмотрим процесс создания простого автоматического слайдера с прикрепленным к нему аккордеоном вкладок с плавным раскрытием и выводом дополнительной информации. Для этого мы будем использовать плагин Slidorion. Имеется несколько опций, которые дают возможность настроить время показа слайдов, эффекты переходов между слайдами и включить/выключить автоматическое проигрывание.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close