alexmixaylov, вариант ...
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
a.jea_modal {
width: 100%;
height: 100%;
display: block;
}
#modal100 {
display: none;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
z-index: 9999999;
}
#modal100 img{display: none;}
li{
float: left;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<div id="modal100">
<p id="image-insert"><img id="big-foto"></p>
</div>
<div id="large">
<a class="jea_modal" href="http://realtysea.esy.es/images/com_jea/images/5/main-282-1-960x680-big.jpg" >
<img src="http://realtysea.esy.es/images/com_jea/thumb-medium/5-main-282-1-960x680-big.jpg"
id="jea-preview-img"/>
</a>
</div>
<ul id="thumbnail">
<li >
<a class="gallery-min" href="http://realtysea.esy.es/images/com_jea/thumb-medium/5-dom_moey_mechti1.jpg"
name="http://realtysea.esy.es/images/com_jea/images/5/dom_moey_mechti1.jpg">
<img src="http://realtysea.esy.es/images/com_jea/thumb-min/5-dom_moey_mechti1.jpg"/>
</a>
</li>
<li >
<a class="gallery-min" href="http://realtysea.esy.es/images/com_jea/thumb-medium/5-x_df391ec2.jpg"
name="http://realtysea.esy.es/images/com_jea/images/5/x_df391ec2.jpg">
<img src="http://realtysea.esy.es/images/com_jea/thumb-min/5-x_df391ec2.jpg"/>
</a>
</li>
</ul>
<script>
jQuery(function($) {
jQuery.fn.center = function() {
var w = $(window);
this.css("position", "absolute");
this.css({
"top": (w.height() - this.height()) / 2 + w.scrollTop() + "px",
"left": (w.width() - this.width()) / 2 + w.scrollLeft() + "px"
});
return this
};
var $img = $("#thumbnail a.gallery-min img"),
$large = $('#large img'),
$big = $('#big-foto'),
$modal = $('#modal100');
$large.load(function() {
$large.fadeIn("slow")
}).click(function(event) {
event.preventDefault();
$modal.show();
$big.stop().show({'duration' : 1500, 'step' : function ()
{
$big.center();
}
})
})
$img.click(function(event) {
event.preventDefault();
var src = this.src.replace('thumb-min', 'thumb-medium');
var bigSrc = this.src.replace('thumb-min/5-', 'images/5/');
$big[0].src = bigSrc;
new Image().src = src;
$large.fadeOut("slow", function() {
this.src = src;
this.complete && $(this).load()
})
}).get(0).click();
$modal.click(function() {
$modal.hide();$big.stop(true,true).hide()
});
});
</script>
</body>
</html>