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
Anything but "Hacking" 
