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!
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> </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.
Download from mirror site