Preview Image in Current Page on Click with preload effect – jQuery

Live Demonstration!

This jQuery script is based on Mukesh Chapagain’s script. It allows you to show your images on current page without redirecting them to their file locations. When you click the thumbnail on an image, the screen turns black (semitransparent) with animation effect, and a LOADER appears. The loader continues to animate until the image is loaded completely. When loaded completely, the image is shown in the middle of the page. Cool, huh?😉 I’m sure you want this script!

I worked on Mukesh’s script and made quite a lot of changes, i.e added image loader, stopped scrolling of the page while image is being shown etc. Most of all, I eased the usage. You just need to include the javascript on your page & bingo! You’re done😀


1. Download jQuery (Rename to jquery.js)

2. Download Image Preview Script (Rename to ipgb.js)

3. Download the loader image (loading.gif)


Put following Code before </Head> tag of your page.

<script src = 'jquery.js'></script>
<script src = 'ipgb.js'></script>

Put all your images in a div, and make that div’s class “thumbnail”. Details:

<div class="thumbnail">
	        <a href="hills.jpg"><img src="hills-thumb.jpg"  /></a>
		<a href="lilies.jpg"><img src="lilies-thumb.jpg"  /></a>
		<a href="sunset.jpg"><img src="sunset-thumb.jpg"  /></a>
		<a href="winter.jpg"><img src="winter-thumb.jpg" /></a>

Watch the code above carefully! You should put your images as link. You provide original imae in the href attribute of <a> tag, and put thumbnail location in the src attribute in the <img> tag inside it.

Happy Coding!

Download from mirror site

Download Zip

One thought on “Preview Image in Current Page on Click with preload effect – jQuery

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s