В этом уроке мы рассмотрим создание галереи при помощи плагина к jQuery, который называется interface. Внешне галерея может показаться простой, но свои функции выполняет исправно.
Шаг 1.
Подключим фреймворк jQuery и плагин interface к нашему документу, прописав следующий код между тегами <head>:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
Шаг 2.
В отдельную таблицу стилей CSS или между тегами <head> пропишем следующие стили:
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
a {
text-decoration: none;
}
#slideShow2 {
width: 300px;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
background-color: #fff;
margin: 10px;
}
.pagelinks a {
font-weight: bold;
color: #666;
}
.slideCaption {
background-color: #FFFFCC;
padding: 4px;
text-align: center;
font-weight: bold;
}
.pagelinks a.activeSlide {
color: #f90;
}
/* this is for IE so the prev/next links can be hovered*/
.nextSlide,.prevSlide {
background-image: url(images/spacer.gif);
}
.nextSlide:hover {
background-image: url(images/nextslide.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
.prevSlide:hover {
background-image: url(images/prevslide.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
.inputsTooltip {
border: 1px solid #ccc;
background-color: #eee;
padding: 4px;
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
}
#tooltipURL {
display: none;
}
Шаг 3.
Сама галерея представляет собой пустой блок с идентификатором slideShow2. Вставим этот блок в том месте, где мы хотим видеть галерею.
<div id="slideShow2">
</div>
Шаг 4.
После этого блока вставим следующий код скрипта:
<script type="text/javascript">
$(document).ready(
function() {
$.slideshow({
container : 'slideShow2',
loader: 'images/loader.jpg',
linksPosition: 'top',
linksClass: 'pagelinks',
linksSeparator : ' | ',
fadeDuration : 400,
activeLinkClass: 'activeSlide',
nextslideClass: 'nextSlide',
prevslideClass: 'prevSlide',
captionPosition: 'bottom',
captionClass: 'slideCaption',
autoplay: 5,
images : [
{
src: 'images/Panda.jpg',
caption: 'Fiat Panda'
},
{
src: 'images/Active.jpg',
caption: 'Panda Active'
},
{
src: 'images/Actual.jpg',
caption: 'Panda Actual'
},
{
src: 'images/Dynamic.jpg',
caption: 'Panda Dynamic'
}
]
}
)
$('a').ToolTip({
className: 'inputsTooltip',
position: 'mouse'
}
);
}
);
</script>
В этом скрипте по аналогии, т.е. добавляя следующий кусок кода:
{
src: 'images/Actual.jpg',
caption: 'Panda Actual'
},
можно увеличить количество картинок галереи (естественно, путь к картинкам и их название нужно изменять на свои). Размер всех изображений должен быть 300х200 px.
Скорость смены картинок (задается параметром autoplay) Вы можете регулировать по своему желанию.
Галерея готова! Надеюсь, она найдет свое место и на ваших сайтах!