23:21
Очень красивая и грамотно оформленная галерея на HTML 5, Jquery и CSS3!
Для начала посмотрите ДЕМО
Установка:
После /head на нужных вам страницах вставляйте:
Code
<link rel="stylesheet" href="/css/grid.css" type="text/css">
<link rel="stylesheet" href="/css/html5.css" type="text/css" />
<link rel="stylesheet" href="/css/master.css" type="text/css" />
<script type='text/javascript' src='/js/fancyzoom.js'></script>
<script type='text/javascript' src='/js/demo.js'></script>
Следующий код в то место, где будет ваша галерея:
Code
<div class="span-18 column rounded">
<div class="span-6 column rotated">
<a id="image1" class="cms-editable polaroid" href="#pic-1" rel="lightbox" title="first image"> <img src="Ссылка на уменьшенное изображение 1" alt="image" /> </a>
</div>
<div class="span-6 column rotated">
<a id="image2" class="cms-editable polaroid" href="#pic-2" rel="lightbox" title="second image"> <img src="Ссылка на уменьшенное изображение 2" alt="image" /> </a>
</div>
<div class="span-6 column rotated last">
<a id="image3" class="cms-editable polaroid" href="#pic-3" rel="lightbox" title="third image"> <img src="Ссылка на уменьшенное изображение 3" alt="image" /> </a>
</div>
<div class="span-6 column rotated">
<a id="image4" class="cms-editable polaroid" href="#pic-4" rel="lightbox" title="first image"> <img src="Ссылка на уменьшенное изображение 4" alt="image" /> </a>
</div>
<div class="span-6 column rotated">
<a id="image5" class="cms-editable polaroid" href="#pic-5" rel="lightbox" title="first image"> <img src="Ссылка на уменьшенное изображение 5" alt="image" /> </a>
</div>
<div class="span-6 column rotated last">
<a id="image6" class="cms-editable polaroid" href="#pic-6" rel="lightbox" title="first image"> <img src="Ссылка на уменьшенное изображение 6" alt="image" /> </a>
</div>
<div id="pic-1">
<img src="Ссылка на увеличенное изображение 1" alt="image" />
</div>
<div id="pic-2">
<img src="Ссылка на увеличенное изображение 2" alt="image" />
</div>
<div id="pic-3">
<img src="Ссылка на увеличенное изображение 3" alt="image" />
</div>
<div id="pic-4">
<img src="Ссылка на увеличенное изображение 4" alt="image" />
</div>
<div id="pic-5">
<img src="Ссылка на увеличенное изображение 5" alt="image" />
</div>
<div id="pic-6">
<img src="Ссылка на увеличенное изображение 6" alt="image" />
</div>
</div>
</section>
<div style="clear:both;"></div>
Далее залейте два скрипта из прикреплённого архива в папку js, три стиля в папку css и все картинки в папку images
