Автор

23 04.2013
Карусель-галерею с помощью JQuery

Карусель-галерею с помощью JQuery


 

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

 

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

 

Как всегда первым подключаем фреймворк JQuery (первая строка), а затем и сам плагин click-carousel.js, и JavaScript код между тэгом head /head :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="click-carousel.js"></script> <script type="text/javascript">// <![CDATA[ $(function(){ $("#container").clickCarousel({margin: 10}); }); // ]]></script>

Шаг 2 HTML:

HTML конструкция нашей галереи на jQuery, выглядит так:

<div id="wrapper">
<div id="container"><img src="img1.jpg" alt="Cuba" />
 <img src="img2.jpg" alt="Cuba" />
 <img src="img3.jpg" alt="Cuba" />
 <img src="img4.jpg" alt="Cuba" />
 <img src="img5.jpg" alt="Cuba" /></div>
<!-- container -->
 <img id="carouselLeft" src="leftArr.jpg" alt="Left Arrow" />
 <img id="carouselRight" src="rightArr.jpg" alt="Right Arrow" /></div>

Шаг 3 CSS: 

В CSS файле есть всего 4 #. Первый это #container он в себе содержит все изображения, затем #container img в нем мы прописываем размеры изображений 150px-150px, и для кнопок галереи у нас есть #carouselLeft и #carouselRight.

#container{
position: absolute;
top: 10px;
left: 60px;
height: 150px;
width: 470px; /* 3 изоб. по 150px в ширину и 10px отступа между ними = 3*(150) + 2*(10) = 470 */
overflow: hidden;
}

#container img{
position: absolute;
top: 0px;
height: 150px;
width: 150px;
cursor: pointer;
overflow: hidden;
}

#carouselLeft{
position: absolute;
top: 60px;
left: 0px;
cursor: pointer;
}

#carouselRight{
position: absolute;
top: 60px;
left: 540px;
cursor: pointer;
}

Настройка галереи на jQuery

Заходим в файл click-carousel.js и на 200-ый строке редактируем:
direction: направление сдвига изображения. Имеет значение «left» и «right».
margin: пространство между смещениям изображений в пикселях.
hideSpeed: скорость исчезновения изображения в миллисекундах. Значение по умолчанию: 500
shiftSpeed: скорость перемещения изображений в миллисекундах. Значение по умолчанию: 500

Мини галерея на jQuery плагин clickCarousel работает в таких браузерах как:

IE 6.0+
Opera 9.0+
Firefox 3.0+
Google Chrome
Safari

 

Материал предоставлен сайтом www.rudebox.org.ua


vk.com/club.ssdru

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


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

03 12.2016
Карусель-галерею с помощью JQuery

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


06 06.2013
Карусель-галерею с помощью JQuery

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


13 12.2015
Карусель-галерею с помощью JQuery

Небольшой скрипт автоматически изменит год в нижней части (футере) вашего сайта. Не нужно каждый год менять его в шаблоне сайта — обновится сам, в зависимости от настроек посетителя.


24 03.2013
Карусель-галерею с помощью JQuery

Скрипт представляет собой нечто вроде плагина. Для чего можно использовать выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов с портфолио.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close