Эффекты на основе Java Script

Вернуться в каталог >>>

Галерея с предосмотром (миниатюрами)

Картинка

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

<style type="text/css">
/* общие параметры галерейки */
img {border: none;}
.container {
	height: 360px;
	width: 910px;
	margin: 0;
/*	top: 50%; left: 50%;
	position: absolute;    */
}
/* зона миниатюр */
ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 10px;
	width: 360px;
}
ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;
	width: 110px;
	height: 110px;
}
/* параметры вывода миниатюр */
ul.thumb li img {
	width: 100px; height: 100px;
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
	-ms-interpolation-mode: bicubic; 
}
ul.thumb li img.hover {border: #888 1px solid;
	background:url(thumb_bg.png) #f0f0f0 no-repeat center center;
	/* border: none; */
}
/* зона вывода картинки */
#main_view {
	float: left;
	padding: 9px 0;
	margin-left: -10px;
}
</style>
<script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {    // выезд иконки
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({          // местоположение иконки
			marginTop: '-110px', 
			marginLeft: '-110px', 
			top: '50%', 
			left: '55%', 
			width: '174px',       // размер по горизонтале выехавшей иконки
			height: '174px',      // размер по вертикале выехавшей иконки
			padding: '10px'       // ширина бордюра
		}, 200);                  // скорость выезда иконки
	
	} , function() {           // заезд иконки
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({     // местоположение иконки
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '100px',      // размер иконки по горизонтале
			height: '100px',     // размер иконки по вертикале
			padding: '5px'
		}, 400);                  // скорость заезда иконки
});

//Swap Image on Click
	$("ul.thumb li a").click(function() {
		
		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main_view img").attr({ src: mainImage });
		return false;		
	});
 
});
</script>

Основное всё подписано, проблем быть не должно.

Внутри тега <BODY> - </BODY> там где у Вас будет галерея.

<div class="container">
<ul class="thumb"> 
	<li><a href="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/main_image1.jpg"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/thumb1.jpg" alt="Миниатюра 1" title="Подсказка к миниатюре 1"></a></li>
	<li><a href="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/main_image2.jpg"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/thumb2.jpg" alt="Миниатюра 2" title="Подсказка к миниатюре 2"></a></li>
	<li><a href="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/main_image3.jpg"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/thumb3.jpg" alt="Миниатюра 3" title="Подсказка к миниатюре 3"></a></li>
	<li><a href="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/main_image4.jpg"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/thumb4.jpg" alt="Миниатюра 4" title="Подсказка к миниатюре 4"></a></li>
	<li><a href="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/main_image5.jpg"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/thumb5.jpg" alt="Миниатюра 5" title="Подсказка к миниатюре 5"></a></li>
	<li><a href="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/main_image6.jpg"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/thumb6.jpg" alt="Миниатюра 6" title="Подсказка к миниатюре 6"></a></li>
	<li><a href="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/main_image7.jpg"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/thumb7.jpg" alt="Миниатюра 7" title="Подсказка к миниатюре 7"></a></li>
	<li><a href="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/main_image8.jpg"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/thumb8.jpg" alt="Миниатюра 8" title="Подсказка к миниатюре 8"></a></li>
	<li><a href="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/main_image9.jpg"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_galerei/1074/thumb9.jpg" alt="Миниатюра 9" title="Подсказка к миниатюре 9"></a></li>
</ul>
<div id="main_view">  
	<a href="#"><img src="main_image1.jpg" alt="Картинка" /></a><br />
</div>
</div>

Задаём картинки миниатюр и, если нужно, подсказки к ним. Задаём контейнер просматриваемой миниптюры и исходную просматриваемую картинку(в примере это картинка миниатюры 1).

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.