I just figured that it would be fitting to share this since I acquired this knowledge for free, so shall I share it to you. Now let's get to it.
On this exercise, we will use your basic HTML coding knowledge plus a
free downloadable javascript resource. Download the javascript's zip file here.1. It's actually quite simple. All you need to do is make a simple gallery list in pure HTML like these:
<a href="images/gal1.jpg" target="blank"><img src="images/gal1t.jpg" width="40" alt="thumbnail" /></a>
<a href="images/gal2.jpg" target="blank"><img src="images/gal2t.jpg" width="40" alt="thumbnail" /></a>
<a href="images/gal3.jpg" target="blank"><img src="images/gal3t.jpg" width="40" alt="thumbnail" /></a>
<a href="images/gal4.jpg" target="blank"><img src="images/gal4t.jpg" width="40" alt="thumbnail" /></a>
<a href="images/gal5.jpg" target="blank"><img src="images/gal5t.jpg" width="40" alt="thumbnail" /></a>
<a href="images/gal6.jpg" target="blank"><img src="images/gal6t.jpg" width="40" alt="thumbnail" /></a>
<a href="images/gal7.jpg" target="blank"><img src="images/gal7t.jpg" width="40" alt="thumbnail" /></a>
<a href="images/gal8.jpg" target="blank"><img src="images/gal8t.jpg" width="40" alt="thumbnail" /></a>
<a href="images/gal9.jpg" target="blank"><img src="images/gal9t.jpg" width="40" alt="thumbnail" /></a>
<a href="images/gal10.jpg" target="blank"><img src="images/gal10t.jpg" width="40" alt="thumbnail" /></a>
<a href="images/gal11.jpg" target="blank"><img src="images/gal11t.jpg" width="40" alt="thumbnail" /></a>
<a href="images/gal12.jpg" target="blank"><img src="images/gal12t.jpg" width="40" alt="thumbnail" /></a>
If you notice, there is a there are two different pairs of images per picture.
This is the HTML code used where it link where the user when they click on the thumbnail.
<a href="images/gal12.jpg" target="blank"></a>On the other hand, this is the link for the thumbnail. For the project I made, I created 40x40 pixel thumbnails.
<img src="images/gal12t.jpg" width="40" alt="thumbnail" />2. Download and unzip the javascript folders in the same folder of your picture gallery html files.
3. Add this code to inside your HTML document's <head></head> tags:
<script src="js/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="js/js-global/FancyZoomHTML.js" type="text/javascript"></script>
4. Add this HTML code right after your <body> tag:
<body onload="setupZoom()">5. The Javascript will automatically do the hard stuff for you.
Don't worry if your finished product does not look like the sloppy job I made, since there were a lot of CSS involved in that particular project of mine.
I hope that was helpful to you! Questions and feedbacks will be very much entertained and appreciated!
