23:53
Неплохая галерея с интересным эффектом смены изображений. Есть небольшой минус - неопытные пользователи, плохо разбирающиеся в css навряд ли смогут адаптировать под свои нужды
Для начала посмотрите ДЕМО
Установка:
После /head на нужных страницах вставляйте:
Code
<script type="text/javascript" src="/js/jquery.jswitch.js"></script>
<script>
$(document).ready(function(){
$('#myGallery').jswitch({
callback:function(jswitch){
$('#next').click(function(){
jswitch.nextImage();
});
$('#prev').click(function(){
jswitch.prevImage();
});
}
});
});
</script>
<style>
#myGallery{border:4px solid #eee;width:940px;height:360px;overflow:hidden;position:relative;padding:0;margin:0;background:#000;margin:20px;}
.controls{text-indent:-10000px;background:url(/images/controls.png) no-repeat;width:30px;height:56px;display:block;position:absolute;}
.controls#prev{margin-top:160px;margin-left:-10px;}
.controls#next{background-position:-30px 0;margin-top:-230px;margin-left:970px;}
</style>
Следующий код в то место, где будет сама галерея:
Code
<a href="#" class="controls" id="prev"> Prev image</a>
<div id="myGallery">
<ul>
<li><img src="Ссылка на картинку" alt="" /></li>
<li><img src="Ссылка на картинку" alt="" /></li>
<li><img src="Ссылка на картинку" alt="" /></li>
<li><img src="Ссылка на картинку" alt="" /></li>
<li><img src="Ссылка на картинку" alt="" /></li>
</ul>
</div>
<a href="#" class="controls" id="next">Next image</a>
Осталось лишь залить скрипт из прикреплённого архива в папку js и картинку в папку images
