Сегодня мы рассмотрим создание простой галереи на jQuery. В ней мы не будем использовать какие-то дополнительные плагины для jQuery, поэтому ее вес будет небольшим.
Шаг 1.
Подключим к документу фреймворк jQuery. Для этого между тегами <head> пропишем следующий код:
<script type="text/javascript" src="example/jquery.js"></script>
Далее следует прописать такой скрипт:
<script type="text/javascript">
$(document).ready(function(){
$("#thumbnail li a").click(function(){
$("#large img").hide().attr({"src": $(this).attr("href"), "title": $("> img", this).attr("title")});
$("#large h2").html($("> img", this).attr("title"));
return false;
});
$("#large>img").load(function(){$("#large>img:hidden").fadeIn("slow")});
});
</script>
Шаг 2.
В отдельной таблице стилей или в этом же файле между тегами <head> напишем CSS-стили для вывода галереи. Вы можете менять их по своему усмотрению:
#large {
width: 350px;
height: 350px;
float: left;
margin-top: 50px;
margin-left: 50px;
background: url(example/indicato.gif) no-repeat 50% 40%;
}
#large img {
width: 350px;
height: 263px;
border: 5px solid #223348;
}
#thumbnail {
width: 210px;
height: 256px;
overflow: auto;
float: left;
list-style: none;
margin-top: 50px;
margin-left: 16px;
_margin-left: 8px;
padding: 5px;
border: 3px solid #223348;
background: #fff;
}
#thumbnail li {
float: left;
width: 79px;
margin: 8px;
_margin: 5px;
}
#thumbnail a {
display: block;
width: 75px;
height: 56px;
padding: 1px;
border: 1px solid #ccc;
}
#thumbnail a:hover {
border-color: #405061;
}
Шаг 3.
Непосредственно сама галерея представляет из себя ненумерованный список.
<div id="large">
<img src="example/image010.jpg" title="" alt="image01.jpg" />
</div>
<ul id="thumbnail">
<li><a href="example/big/image01.jpg"><img src="example/image011.jpg" title="" alt="image01.jpg" /></a></li>
<li><a href="example/big/image02.jpg"><img src="example/image020.jpg" title="" alt="image02.jpg" /></a></li>
<li><a href="example/big/image03.jpg"><img src="example/image030.jpg" title="" alt="image03.jpg" /></a></li>
<li><a href="example/big/image04.jpg"><img src="example/image040.jpg" title="" alt="image04.jpg" /></a></li>
<li><a href="example/big/image05.jpg"><img src="example/image050.jpg" title="" alt="image05.jpg" /></a></li>
<li><a href="example/big/image06.jpg"><img src="example/image060.jpg" title="" alt="image06.jpg" /></a></li>
<li><a href="example/big/image07.jpg"><img src="example/image070.jpg" title="" alt="image07.jpg" /></a></li>
<li><a href="example/big/image08.jpg"><img src="example/image080.jpg" title="" alt="image08.jpg" /></a></li>
<li><a href="example/big/image09.jpg"><img src="example/image090.jpg" title="" alt="image09.jpg" /></a></li>
<li><a href="example/big/image10.jpg"><img src="example/image100.jpg" title="" alt="image10.jpg" /></a></li>
<li><a href="example/big/image11.jpg"><img src="example/image110.jpg" title="" alt="image11.jpg" /></a></li>
<li><a href="example/big/image12.jpg"><img src="example/image120.jpg" title="" alt="image12.jpg" /></a></li>
<li><a href="example/big/image13.jpg"><img src="example/image130.jpg" title="" alt="image13.jpg" /></a></li>
<li><a href="example/big/image14.jpg"><img src="example/image140.jpg" title="" alt="image14.jpg" /></a></li>
</ul>
В блоке large указывается картинка, которая по умолчанию будет большой.
Далее каждый элемент списка представляет собой маленькую картинку (в данном случае 75х56 px), имеющую ссылку на большую (в данном случае 350х263 px).
Разместить эти картинки вы можете или в одной папке, или в двух, например big (для больших) и small (для маленьких). Но не забудьте указать к ним правильные пути.
На этом все! Спасибо за внимание!