Tuesday, October 26, 2010

As I was about to submit my website as a school requirement, i thought, my photo gallery looks lame. So, the next few minutes, I searched through the net on how to create a very easy "easing photo gallery" just like the one here that looks like this:

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!
Minute Maid Pulpy Juice Drink!
Minute Maid Pulpy Juice Drink!