prettyGallery - слайдер
prettyGallery - очередной слайдер изображений с навигацией по слайдам. Внешне неказист, но оформить с помощью CSS можно всё что угодно.
HTML
<ul class="gallery">
<li><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="T 1" /></li>
<li><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="T 2" /></li>
<li><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="T 3" /></li>
<li><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="T 4" /></li>
<li><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="T 5" /></li>
</ul>CSS
.prettyGalleryContainer {
clear: both;
float: left;
margin: 0 0 10px 0;
}
.prettyGalleryContainer a:focus { outline: none; }
.prettyGalleryContainer img { border: 0; }
.prettyGalleryContainer ul {
margin: 0;
padding: 0;
}
.prettyGalleryContainer ul li {
display: block;
float: left;
}
.prettyGalleryContainer ul li a,
.prettyGalleryContainer ul li a img { display: block; }
.prettyGalleryBackground {
background: url(../images/prettyGallery/content_background.png) top left repeat;
padding: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin: 0 0 10px 0;
}
.pp_alignleft { float: left; }
.pp_alignright { float: right; }
.pp_aligncenter { margin: 0 auto; }
.pg_paging .pg_previous {
background: url(../images/prettyGallery/pagingNav.png) top left no-repeat;
display: block;
float: left;
height: 14px;
margin: 1px 3px 5px 0;
overflow: hidden;
text-indent: -10000px;
width: 9px;
}
.pg_paging .pg_previous:hover { background-position: 0 -14px; }
.pg_paging .pg_next {
background: url(../images/prettyGallery/pagingNav.png) top right no-repeat;
display: block;
float: left;
height: 14px;
margin: 1px 0 0 3px;
overflow: hidden;
text-indent: -10000px;
width: 9px;
}
.pg_paging .pg_next:hover { background-position: 100% -14px; }
.pg_paging li { text-align: center; }
.pg_pages {
background: url(../images/prettyGallery/pagingBackgroundLeft.png) top left no-repeat;
float: left;
padding-left: 8px;
}
.pg_pages ul {
background: url(../images/prettyGallery/pagingBackgroundRight.png) top right no-repeat;
float: left;
height: 15px;
padding-right: 9px;
}
.pg_pages ul li { line-height: 15px; }
.pg_pages ul li.selected { font-weight: bold; }
.pg_pages a {
color: #fff;
font-family: Arial;
font-size: 11px;
text-decoration: none;
padding: 2px;
}
.pg_pages a:hover { color: #c4c4c4; }
.pg_pages a.circle {
display: block;
background: url(../images/prettyGallery/pagingPageNumber.png) top left no-repeat;
height: 8px;
margin: 3px 1px 0 3px;
padding: 0;
text-indent: -10000px;
width: 8px;
}
.pg_pages a.circle:hover,
.pg_pages .selected a.circle { background-position: bottom left; }jаvascript
Подключаем jQuery и плагин:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.prettyGallery.js" type="text/javascript"></script>Выполняем инициализацию prettyGallery:
$(document).ready(function(){
$("ul.gallery").prettyGallery();
});Опции
$(document).ready(function(){
$("ul.gallery").prettyGallery({
itemsPerPage : 2,
animationSpeed : 'normal', /* fast/normal/slow */
navigation : 'top', /* top/bottom/both */
of_label: ' of ', /* The content in the page "1 of 2" */
previous_title_label: 'Previous page', /* The title of the previous link */
next_title_label: 'Next page', /* The title of the next link */
previous_label: 'Previous', /* The content of the previous link */
next_label: 'Next' /* The content of the next link */
});
});Ссылки
