Welcome To 'Scripters Paradise'

Tutorials => HTML/XML => Topic started by: guitarcrazy087 on April 09, 2008, 05:46:00 pm



Title: Making a simple, HTML photo gallery
Post by: guitarcrazy087 on April 09, 2008, 05:46:00 pm
Ok, well, a friend of mine was wanting me to show him how I had made a photo gallery, so I decided I'd just put a tutorial up here. 

Just a note, I haven't used this gallery in quite a while, so I'm a bit rusty.

1. THE PREPARING YOUR IMAGES

Select your photos that you want in your photo gallery.  I've never used the height and width image attribute, so I don't know how exactly they work, so I make my own thumbnails of the images I want in my photo gallery.  If you don't have a program to resize images with, download either the Gimp (http://www.gimp.org/), or Irfan View (http://www.irfanview.com/).  I prefer Irfan View for resizing images. Your thumbnails should be no bigger than 200 px high or wide, or else your going to have a very retarded looking gallery.

2. THE HTML

Code:
<html>
<body>

<!-- this is where the images will be displayed -->
<iframe src="the url of your first image" name="display"></iframe>

<!-- This is where the thumbnails will appear -->

<table><tr>

<td><a href="your picture url" target="display"><img src="your thumbnail url" /></a><br />Your Caption</td>
<td><a href="your picture url" target="display"><img src="your thumbnail url" /></a><br />Your Caption</td>

</tr></table>

</body>
</html>

And that's all the code!  If you want more images in your gallery, just copy and paste one of the lines in the table and edit the appropriate attributes.

Basically all the IFrame does, is allows you to display an image or web page on another web page.  The "src" attribute that is attached to the IFrame tells it what to load when the page loads (in this case your first image).  The "name" attribute allows you to load images into the IFrame by using the "target" attribute on the links surrounding the thumbnails.

This should work.  If something doesn't work just ask me about it and I'll try to fix it.

Cheers!

Joe


Title: Re: Making a simple, HTML photo gallery
Post by: GeekSlayer on April 09, 2008, 08:40:32 pm
VERY COOL!
Thank You Partner!