Автор

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

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

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


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

Здесь можно бесплатно воспользоваться готовыми примерами блочной css верстки слоями. Каждый шаблон ниже содержит готовую резиновую и не резиновую верстку в две или три колонки с различным расположением. Во всех верстках css footer прижат к низу. Каждая div, блочная, дивная верстка валидна и проверена на кроссбраузерность.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close