個別に画像の拡大縮小ができるリストをjQueryで作ってみました。

画像をクリックすると拡大します。

↓以下が実際のソースサンプルです。

<script>
$(function () {
	var x = 100,
		zoom = 1.2,
		imgWidthInit = parseInt($("img").css("width")),
		imgWidth = 100;

	$("ul li img").wrap("<div class='box'></div>").before("<div class='init'>元に戻す</div>").after("<div class='out'>縮小する</div>");

	$("ul li img").click(function(){
		var $this = $(this);
		imgWidth = parseInt($this.css("width"));

		if (imgWidth === imgWidthInit) {
			x = 100;
			$this.animate({
				"width": x * zoom + "%"
			},500);
		} else {
			$this.animate({
				"width": x * ((imgWidth / imgWidthInit) + (zoom - 1)) + "%"
			},500);
		}
	});

	$(document).on("click", ".init",function(){
		var $this = $(this);
		$this.next("img").animate({
			"width": "100%"
		},1000);
	});

	$(document).on("click", ".out",function(){
		var $this = $(this);
		imgWidth = parseInt($this.prev("img").css("width"));

		if (imgWidth === imgWidthInit) {
			x = 100;
			$this.prev("img").animate({
				"width": x / zoom + "%"
			},500);
		} else {
			$this.prev("img").animate({
				"width": x / ((imgWidthInit / imgWidth) + (zoom - 1)) + "%"
			},500);
		}
	});
});
</script>

<style>
		* {
			margin: 0;
			padding: 0;
			border: 0;
		}

		#main {
			position: relative;
			width: 960px;
			border: 1px solid #000;
			margin: 0 auto;
			overflow: hidden;
		}

		#main ul li {
			position: relative;
			width: 960px;
			height: 415px;
		}

		#main ul li img {
			display: block;
			width: 100%;
			height: auto;
			vertical-align: bottom;
		}

		.box {
			width: 960px;
			height: 400px;
			overflow: scroll;
		}

		.init {
			position: absolute;
			top: 0;
			display: inline-block;
			padding: 5px;
			background: rgba(200,200,200,0.5);
		}

		.out {
			position: absolute;
			top: 0;
			right: 0;
			display: inline-block;
			padding: 5px;
			background: rgba(200,200,200,0.5);
		}
</style>

<div id="main">
<ul><!--
--><li><img src="image/topimg1.jpg"></li><!--
--><li><img src="image/topimg2.jpg"></li><!--
--><li><img src="image/topimg3.jpg"></li><!--
--><li><img src="image/topimg4.jpg"></li><!--
--><li><img src="image/topimg5.jpg"></li><!--
--></ul>
</div>

デモページは、こちら