Мини галерея на JQuery
8 октября 2010 года, Размещено в категории: jQuery / MooTools
Рассмотрим галерею на JQuery плагине clickCarousel. Эта галерея очень проста и в то же время эффектная.
Такую мини галерею на JQuery можно применить у себя на сайте или блоге, для показа последних постов или фото - работ, вообще, где бы Вы ее не применили, она всегда впишется просто замечательно.
Ладно, просто посмотрите демо этой галереи на JQuery:
Шаг 1 JavaScript:
Как всегда первым подключаем фреймворк JQuery (первая строка), а затем и сам плагин click-carousel.js, и JavaScript код между тэгом <head></head>
1 2 3 4 5 6 7 8 | <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"> $(function(){ $("#container").clickCarousel({margin: 10}); }); </script> |
Шаг 2 HTML:
HTML конструкция нашей галереи на jQuery, выглядит так.
1 2 3 4 5 6 7 8 9 10 11 | <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><!-- wrapper --> |
Шаг 3 CSS:
В CSS файле есть всего 4 #. Первый это #container он в себе содержит все изображения, затем #container img в нем мы прописываем размеры изображений 150px-150px, и для кнопок галереи у нас есть #carouselLeft и #carouselRight.
Понятнее будет, если я все изображу в виде схемы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | #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
