Галерея всегда отыгрывает весомую роль в дизайне портфолио или фотосайта. Но каждый веб-мастер хочет уникально оформить свой ресурс придав ему эксклюзивности в дизайне. В данном уроке мы рассмотрим процесс создания замечательной карусель-галереи с помощью 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
