agoalofalife/увеличение картинок

## увеличение картинок
<!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>