Home » jQuery13 February 2010

jQuery: Grey out background and preview image as popup

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.

View Demo || Download Code

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="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="hills.jpg"><img src="hills-thumb.jpg" alt="hills" rel="Hills Image" /></a>
		<a href="lilies.jpg"><img src="lilies-thumb.jpg" alt="lilies" rel="Lilies Image" /></a>
		<a href="sunset.jpg"><img src="sunset-thumb.jpg" alt="sunset" rel="Sunset Image" /></a>
		<a href="winter.jpg"><img src="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>

View Demo || Download Code

From Mukesh Chapagain's Blog, post jQuery: Grey out background and preview image as popup

php magento mukesh chapagain

Get New Post by Email

Find me on

Facebook Twitter Google+ LinkedIn RSS Feed
  • cool

    Super !!!

  • johnc

    Hi,
    Thanks for putting this together.
    Thought I would ask how can this be implemented with a link to an image rather than a thumbnail?
    I have been trying to make tweaks and am unable to get it working. Have any thoughts?
    Thanks.

  • Kushal Gautam

    NICE ONE ! ! !
    Thanx :-)

  • lavanya

    Thankyou…:-) it was a gr8

  • Bindiyakrishnan

    how will i use this code for popping up a form at the center of the parent window(as a modal window)

  • Danbasker

    Thank you for sharing. its awesome

  • http://www.nvncbl.com/ Antonio

    Thanks! I have one suggestion — make the css position of #background “fixed” instead of “absolute”. That will let it remain visible while the user scrolls the page.

  • http://www.nvncbl.com/ Antonio

    Thanks! I have one suggestion — make the css position of #background “fixed” instead of “absolute”. That will let it remain visible while the user scrolls the page.

  • Harry

    Beautiful, but I’m finding that the center function, on image first load, is not considering the offset from the image’s height and width. Instead it puts the image so its top left corner is in the center of the screen. Anyone else having this issue?

  • Harry

    Correction…on image first load the:

    this.css(“top”, ( $(window).height() – this.height() ) / 2+$(window).scrollTop() + “px”);
    this.css(“left”, ( $(window).width() – this.width() ) / 2+$(window).scrollLeft() + “px”);

    Lines are pulling the height and width values from:

    min-height: 100px;
    min-width: 100px;

    from the #large CSS definition. How can we make it pull from the image that was clicked, as my images are of different sizes…

  • http://www.facebook.com/profile.php?id=593400075 Ian Marlowe

    Did you find a way to do this?  I changed the min-height and min-width, but, like you, my images are different sizes (even if only be 5 or 6 px on either side)…I don’t know too much about js so I don’t know how I could reference the specific image I’m clicking on for calculating the center.

  • Nan

    Looks like no one can solve this problem? The problem happens on the code where this.css(“top”, ( $(window).height() – this.height() ) / 2+$(window).scrollTop() + “px”);
    this.css(“left”, ( $(window).width() – this.width() ) / 2+$(window).scrollLeft() + “px”);
    But the this.height() returns 0. That’s why every time is the center of the screen

  • Jaimin85india

    my requirement is when i click on image the download popup open and i can download image  can you help me on this.

  • Jelmar Bosscher

    FIXED
    To make every size image usable ( not bigger than the screen ) 

    this is what i have done. - removed two lines and got
        jQuery.fn.center = function () {
            this.css(“top”,”5px”);

            return this;
        } - And changed a few lines in the css and got

     #large {
    display: none;
    position: fixed;
    background: #fff;
    width:100%;
    text-align:center;
    z-index: 10;
    color: #336699;
    }In the javascript u need to leave atleast one line, for it to still work.And in the css u make the width for the lightbox 100% and by putting text-align center, it will center all or .U can change the 5px in the javascript to change the spacing between the image and the top.Hope I haven’t misunderstood your problem and have helped you with this.. or atleast the people who will read this.

  • Kevin Avid

         jQuery.fn.center = function () {
            this.css(“top”,”5%”);
    this.css(“left”,”25%”);

            return this;
        } 
    is how i am centering the large image, if this helps anyone

  • Wallace

    I made some modifications to fix the center issue:

    js:
    jQuery.fn.center = function () {
    this.css(“top”,”5%”);
    return this;
    }

    css:
    #large {
    display: none;
    position: fixed;
    width:100%;
    text-align:center;
    z-index: 10;
    color: #336699;
    }
    #large img {
    border: 5px #FFFFFF solid;
    }

  • boogalou

    Hi, I’ve had the same problem with image centering on first load, my solution is not well tested, but works on a first glimps…

    Just preload the images in the “” section like this:

    if (document.images)
    {
    pic1= new Image();
    pic1.src=”path_to_image1″;

    pic2= new Image();
    pic2.src=”path_to_image2″;


    }

    The page takes longer to load but centers the pics correctly…

  • boogalou

    *preload in the “head” section

  • Iva

    That’s great, works great by me.

  • Jatin Waghela

    Thanks for it. Worked great for me.

  • Jatin Waghela

    Thanks! it helped me a lot!!