Here, I will show you how to preview Image with grey out background effect. I mean, you will be able to preview large image when you click the thumbnail image. The background of the page will be greyed and the image will be displayed as popup.
The following code will centerlize the popup large image.
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
The css id ‘background’ has black background color and initially it is hidden. When the thumbnail image is clicked, the div with the id ‘background’ is made visible with fadeIn effect. The opacity is set 0.7 which makes the div slightly transparent and somewhat grey in color.
The div with id ‘large’ is made to display at center with fadeIn effect. The large image is displayed in this div. The image source will be the href link of the thumbnail image. The rel tag is taken as the caption and is displayed just below the image.
$(document).ready(function() {
$("#thumbnail img").click(function(e){
$("#background").css({"opacity" : "0.7"})
.fadeIn("slow");
$("#large").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
.center()
.fadeIn("slow");
return false;
});
$(document).keypress(function(e){
if(e.keyCode==27){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
}
});
$("#background").click(function(){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});
$("#large").click(function(){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});
});
Here’s the full source code:
<html>
<head>
<title>jQuery: Image preview in popup with Grey out background</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" language="javascript">
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$(document).ready(function() {
$("#thumbnail img").click(function(e){
$("#background").css({"opacity" : "0.7"})
.fadeIn("slow");
$("#large").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
.center()
.fadeIn("slow");
return false;
});
$(document).keypress(function(e){
if(e.keyCode==27){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
}
});
$("#background").click(function(){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});
$("#large").click(function(){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});
});
</script>
<style>
img {
border: none;
}
#thumbnail img {
cursor: pointer;
}
#large {
display: none;
position: absolute;
background: #FFFFFF;
padding: 5px;
z-index: 10;
min-height: 200px;
min-width: 200px;
color: #336699;
}
#background{
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 1;
}
</style>
</head>
<body>
<div align="center">
<div id="thumbnail">
<h3>Click on the image</h3>
<a href="images/hills.jpg"><img src="images/thumbnails/hills-thumb.jpg" alt="hills" rel="Hills Image" /></a>
<a href="images/lilies.jpg"><img src="images/thumbnails/lilies-thumb.jpg" alt="lilies" rel="Lilies Image" /></a>
<a href="images/sunset.jpg"><img src="images/thumbnails/sunset-thumb.jpg" alt="sunset" rel="Sunset Image" /></a>
<a href="images/winter.jpg"><img src="images/thumbnails/winter-thumb.jpg" alt="winter" rel="Winter Image" /></a>
<p id="large"></p>
</div>
<div id="large"></div>
<div id="background"></div>
</div>
</body>
</html>
Thanks.