agoalofalife · May 4, 2016 12:41
diff --git a/увеличение картинок b/увеличение картинок
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 // Обрабатывает клик на картинке
 $('.img_block img').click(function() {
 // Получаем адрес картинки
 var imgAddr = $(this).attr("src");
 // Задаем свойство SRC картинке, которая в скрытом диве.
 $('#img_big_block img').attr({src: imgAddr});
 // Показываем скрытый контейнер
 $('#img_big_block').fadeIn('slow');
 });
 // Обрабатывает клик по большой картинке
 $('#img_big_block').click(function() {
 $(this).fadeOut();
 });
 });
 </script>
 
 <style type="text/css">
 .img_block {
 padding: 5px 5px 5px 5px;
 }
 /* Отображение миниатюр */
 .img_block img {
 width:300px;
 border: 2px solid #ccc;
 }
 /* Выделение миниатюры при наведении */
 .img_block img:hover {
 width:300px;
 border: 2px solid #D4DEE8;
 cursor: pointer;
 }
 /* Скрытый контейнер с большим изображением */
 #img_big_block {
 position: absolute;
 display: none;
 left: 50%;
 margin-left: -350px;
 z-index: 999;
 top: 100px;
 border: 1px solid #D4DEE8;
 }
 </style>
 
 </head>
 
 <!-- Блок в котором мы будем отображать большую картинку -->
 <div id="img_big_block"><img src="" width="800px"></div>
 
 <!-- Блок с миниатюрами -->
 <div class="img_block">
 <img src="zoo2394.jpg">
 </div>
 
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>

	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	// Обрабатывает клик на картинке
	$('.img_block img').click(function() {
	// Получаем адрес картинки
	var imgAddr = $(this).attr("src");
	// Задаем свойство SRC картинке, которая в скрытом диве.
	$('#img_big_block img').attr({src: imgAddr});
	// Показываем скрытый контейнер
	$('#img_big_block').fadeIn('slow');
	});
	// Обрабатывает клик по большой картинке
	$('#img_big_block').click(function() {
	$(this).fadeOut();
	});
	});
	</script>

	<style type="text/css">
	.img_block {
	padding: 5px 5px 5px 5px;
	}
	/* Отображение миниатюр */
	.img_block img {
	width:300px;
	border: 2px solid #ccc;
	}
	/* Выделение миниатюры при наведении */
	.img_block img:hover {
	width:300px;
	border: 2px solid #D4DEE8;
	cursor: pointer;
	}
	/* Скрытый контейнер с большим изображением */
	#img_big_block {
	position: absolute;
	display: none;
	left: 50%;
	margin-left: -350px;
	z-index: 999;
	top: 100px;
	border: 1px solid #D4DEE8;
	}
	</style>

	</head>

	<!-- Блок в котором мы будем отображать большую картинку -->
	<div id="img_big_block"><img src="" width="800px"></div>

	<!-- Блок с миниатюрами -->
	<div class="img_block">
	<img src="zoo2394.jpg">
	</div>

	</html>