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 😀

Download:

1. Download jQuery (Rename to jquery.js)

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

3. Download the loader image (loading.gif)

Usage:

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>
</div>

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

Quick Reference & Cheet Sheet for HTML5 XHTML HTML CSS3 CSS JQuery JavaScript & more

These Quick Reference sheets can be quite helpful to be used as a web development tookit. Thanks to webdesignledger for helping out with the cheet sheets 🙂

HTML 5 Quick Reference Guide

XHTML Reference Guide

HTML 5 Visual Cheet Sheet

HTML 5 Canvas Quick Reference Guide

HTML Reference Guide

CSS 2 Quick Reference

CSS Quick Guide

CSS3 Cheet Sheet

JavaScript Cheet Sheet

JQuery 1.4 Quick Reference

JQuery Cheet Sheet

View Live or download PDF for offline use!

Thanks to:

addedbytes.com/

webdesignledger.com/

woorkup.com