06:33
Отличная галерея, которая занимает мало места и в то же время является вполне функциональной
Для начала посмотрите ДЕМО
Установка:
После /head на нужных страницах вставляйте:
Code
<script src="/js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#products').slides({
preload: true,
preloadImage: '/images/loading.gif',
effect: 'slide, fade',
crossfade: true,
slideSpeed: 200,
fadeSpeed: 500,
generateNextPrev: true,
generatePagination: false
});
});
</script>
<link rel="stylesheet" href="/css/global.css">
Следующий код в то место, где будет галерея:
Code
<div id="products_example">
<div id="products">
<div class="slides_container">
<a href="Ссылка" target="_blank"><img src="Ссылка на большое изображение" width="366"></a>
<a href="Ссылка" target="_blank"><img src="Ссылка на большое изображение" width="366"></a>
<a href="Ссылка" target="_blank"><img src="Ссылка на большое изображение" width="366"></a>
<a href="Ссылка" target="_blank"><img src="Ссылка на большое изображение" width="366"></a>
<a href="Ссылка" target="_blank"><img src="Ссылка на большое изображение" width="366"></a>
</div>
<ul class="pagination">
<li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li>
<li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li>
<li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li>
<li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li>
<li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li>
</ul>
</div>
</div>
Осталось лишь залить скрипт из прикреплённого архива в папку js, стиль в папку css и все картинки в папку images
