Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

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

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Шаблоны » Скрипты » Слайдеры » Галерея с эффектом скольжения фото на JQUERY

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

Опубликовал: artCreative™
Категория: Слайдеры
Дата:Четверг, 14 Марта 2013 в 22:22

0 голосов

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

Шаг 1. HTML

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

Код

У нас есть класс 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);

});

})();

Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs

Ссылка на источник материала

Ссылка на ДЕМО

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 1092 | Скачали: 2 « Назад

Теги материала: фото, галерея, скольжения, на, jquery, слайдеры, эффектом

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Шаблоны » Скрипты » Слайдеры » Галерея с эффектом скольжения фото на JQUERY

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

Комментарии пользователей