Perhaps now there are many web servers that provide Photo Galleries, or better known as Photo Galleries for the websites you create, either in php, asp, or Flash and Java formats, for example http://bravenet.com , or maybe even on a CMS that can be installed via Fantastico.
Creating a Photo Gallery with HTML
Well... This time we will try to learn to make it ourselves, not in the form of a Gallery where when someone clicks on a thumbnail of an image, the page is replaced, or if someone clicks on a thumbnail, a pop-up will appear containing a large-scale image, but a gallery, where users are free to click on thumbnails, free to choose the thumbnails displayed, and no pop-ups will appear at all (unless you host in a place with lots of pop-ups), and without the need to change pages.
Well, we will make it without using php, java, asp, Flash, or shamans.
. Just with the standard knowledge of the web's basic language, namely HTML, and the final appearance, namely the GUI, is up to you, as creative as possible.
Then, now the tools needed are:
- Image editing program (eg Photoshop) to change the size of the image
- Microsoft Frontpage (if you don't have it, you can replace it with Notepad, but it is recommended, so it's more convenient).
- Basic knowledge of HTML
- (Additional) creativity to beautify and polish the appearance after completion.
First of all, we need to imagine what the Gallery itself will look like. What we will create is a gallery that has thumbnails on the right side, a list of image albums at the top, and in the middle is where the photos are displayed in large size.
So this is how it works:
One can choose from the list of albums, which collection of images one wants to view. If it has been selected, for example "Album 1", the thumbnail will change according to the images in "Album 1". If the thumbnail is clicked, then in the Large Image section, the Large Version of the clicked thumbnail will be displayed.
Well... Now, we need to make a table following the pattern above, namely 1 long table at the top, with 2 tables of different sizes below it, one large, one small.
If using Frontpage, it would be something like this:
How to make it is by creating a 3x2 table (3 columns 2 rows), remove the border by right-clicking on the table created then select table properties. After that, all the columns in the first row are combined with the Merge Cells command on the right click after being blocked first. Next, the 2 left columns in the second row are also combined with Merge Cells.
The HTML code itself is:
<html> <head> </head> <body>
<table border="0" cellspacing="0" width="100%" id="AutoNumber1" style="border-collapse: collapse" cellpadding="0"> <tr> <td width="100%" colspan="2"> </td> </tr> <tr> <td width="66%"> </td> <td width="34%"> </td> </tr> </table>
</body> </html>( don't pay attention. It's just HTML language to show spaces for those of you who don't understand. Think of it as a sign of where we insert the next code)
Well. Now what we need is to create an Inline Frame on the cells of the table that will be used to display the Large Image and Thumbnail (Cells in column 2) On the frontpage, to add it, first click one of the cells that we want to give an Inline Frame, then click Insert, and select Inline Frame. Repeat the second step for the Thumbnail Cell next to it. So it will be something like this:
You can set the appearance of the inline frame column, whether the border is displayed or not, by right-clicking on the edge of the inline frame, so that the inline frame properties text appears. To remove the border, just uncheck the show borders. You can also disable the scroll bar by changing the if needed option in the scrollbars: section to never.
The alternative text section itself is the text that will be delivered to browsers that do not support inline frames. You can delete the words in the box if you want, or maybe replace them with funny writing? It's up to you.
What you need to remember about these properties is:
- Nama Inline Frame
- Large Inline Frame, both length and width
This is necessary to adjust the size of the image we use to the size of the inline frame.
Now, to make it easier to remember, let's rename the inline frames. Just right click. We'll name the big one "image", and the small one "thumbnail" (without the quotes).
Then click New page on each inline frame so that each becomes a blank page, white, or whatever you think. What you need now is to write a word that indicates that it is the default page of the inline frame.
For example, in the inline frame for Big Image, you write PLEASE SELECT THUMBNAIL so that the user selects one of the thumbnails in the Thumbnail inline frame. Then in the inline frame for Thumbnail, you write PLEASE SELECT ALBUM LINK so that the user selects one of the thumbnails in the top album menu.
Something like this:
Okay... What needs to be done now is to create a link from the "album link" section to change the appearance of the inline thumbnail frame.
The link code for a link that changes an inline frame is not the same as the code normally used to change pages.
The code is:
<p align="center"> <a title="Album1" target="thumbnail" style="text-decoration: none; " href="Album1.htm">Album1</a> </p>The code above itself roughly means:
Hey browser! If I click on the word titled Album1 (<a title="Album1" and >Album1</a>) please open the Album1.htm page (href="Album1.htm") in an Inline Frame named Thumbnail (target="thumbnail")
Let me explain a little, the code above is a code that functions to change the default page on the Thumbnail inline frame that says PLEASE SELECT ALBUM LINK to the Album1.htm page which contains photo thumbnails (we will create this page later).
For now, we only need to use 2 links, namely album one and 2. Don't forget to edit the HTML code of the link. In other words, on the page we create later there will be two links at the top, with the names Album1 and Album2. The code itself is:
Album1:
<p align="center"> <a title="Album1" target="thumbnail" style="text-decoration: none; " href="Album1.htm">Album1</a> </p>Album2:
<p align="center"> <a title="Album2" target="thumbnail" style="text-decoration: none;
" href="Album2.htm">Album2</a> </p>So later, it will look like:
Of course you can also edit the size and font used.
After that, save-as it in the same folder to make editing easier. If there is a confirmation to save the page again after you save-as, it must be the page in the inline frame (default page). Save it in the same folder as the photo album page, with its default name. This is just to make learning easier. If you are good at it, you can name it anything.
For comparison, if you this is the image in the folder where I save-as this work:
(the gallery in the form of an htm file is a photo album page)
Now, we can see, the HTML code for the Photo Album that we created is approximately as follows:
<html>
<head>
</head>
<body>
<table border="0" cellspacing="0" width="95%" id="AutoNumber1"
style="border-collapse: collapse" cellpadding="0">
<tr>
<td width="100%" colspan="2">
<p align="center">
<a title="Album1" target="Thumbnail" style="text-decoration: none; font-weight:700" href="Album1.htm">Album1</a>
<a title="Album2" target="Thumbnail" style="text-decoration: none; font-weight:700" href="Album2.htm">Album2</a></td>
</tr>
<tr>
<td width="62%">
<iframe name="gambar" width="536" height="392" border="0" frameborder="0" src="silahkan_pilih_thumbnail.htm">maaf, browser anda tidak support.</iframe></td>
<td width="38%">
<iframe name="thumbnail" width="300" height="389" border="0" frameborder="0" src="silahkan_pilih_link_album.htm">maaf, browser anda tidak support.</iframe></td> </tr>
</table>
</body>
</html>(the message "sorry, your browser does not support it" is just a message that is displayed if the user's browser is so old that it cannot open inline frames)
Okay, now we are ready to edit the images that will be displayed in our Photo Album. Since this is just an exercise, we only need 4 images, 2 for Album1, and 2 more for Album2.
Remember when I first suggested you to look at the size of the inline frame? Well, now that’s where it comes in. Both the Large Image and the Thumbnail should not be larger than the inline frame they are used for.
For example, in the script above, it can be seen that the inline frame for the Large Image is only 536x392 pixels ( <iframe name="gambar" width="536" height="392") in other words, my Large Image should not be larger than 536x392. To be safe, we can just use 530x386 pixels. Likewise with the inline frame on the thumbnails ( <iframe name="thumbnail" width="300" height="389) to be safe, just use 250x130 pixels for example.
Because in this Photo Album, the properties have been embedded that if the user clicks on a thumbnail, then in the large image inline frame the same image will appear as the image the user clicked on in the inline frame in a larger form and resolution, then the law applies that the thumbnail image that is clicked must be the same as the target image.
For further explanation, it is like this. We intend to place a thumbnail (smaller image) for the user to click on so that it opens a larger image. The album itself (including Album1 and Album2) is a collection of links in the form of thumbnails themselves.
Now, what you need to do is Change the resolution of your LARGE IMAGE so that it is not larger than the Inline Image Frame. After that, create the thumbnail.
To make naming easier, just use 1.jpg for the large one, then 1small.jpg for the thumbnail, and so on.
Once done, save all the images in the same folder as the 3 pages I mentioned earlier (gallery.htm, please_select_album_link.htm, and please_select_thumbnail.htm). No need to create a new folder!
Now, if it is done, we will create a link to the Big Image from the thumbnails. Because the big image is also placed in an inline frame, of course the code is different from a regular link. All we need to do is modify the previous url:
<p>
<a title="Gb1" target="gambar" style="text-decoration: none; font-weight:700" href="1.jpg"><img src="1kecil.jpg"></a>
</p>There we can see, the current target is an image (target="image") where the file opened in the image inline frame is 1.jpg (href="1.jpg">) via a link in the form of an image, namely 1kecil.jpg ( <img src="1kecil.jpg"></a>).
Easy, right?
Now what you need to do is to divide the images (which are already links) 1kecil.jpg and 2kecil.jpg into the Album1.htm section, and the images 3kecil.jpg and 4kecil.jpg into the Album1.htm section.
Album2,htm...
WAIT!!! Why Album1.htm and Album2.htm?
Of course because of this url:
<a title="Album1" target="Thumbnail" style="text-decoration: none; font-weight:700" href="Album1.htm">Album1</a>
<a title="Album2" target="Thumbnail" style="text-decoration: none; font-weight:700" href="Album2.htm">Album2</a></td>There we can see, that is the address pointed to by the top link to open the album containing thumbnails, right...?
Of course you can change it as you wish, but this time, let's just make it uniform for learning.
In other words, in Album1.htm and in Album2.htm there are links in the form of thumbnails, where this link functions to display the Large Image in the inline image frame.
Well... if you followed my instructions, the folder where you saved all of our practice files this time should look like this:
Well... If so.. Approximately, the html on gallery.htm and Album1.htm is:
Gallery.html
<html>
<head>
</head>
<body>
<table border="0" cellspacing="0" width="100%" id="AutoNumber1"
style="border-collapse: collapse" bordercolor="#111111" cellpadding="0"> <tr>
<td width="100%" colspan="2">
<p align="center"> <a title="Album1" target="thumbnail" style="text-decoration: none; font-weight:700" href="Album1.htm">Album1</a> <a title="Album2" target="thumbnail" style="text-decoration: none; font-weight:700" href="Album2.htm">
Album</a></td>
</tr>
<tr>
<td width="66%">
<iframe name="gambar" width="536" height="392" scrolling="no" border="0"
frameborder="0" src="silahkan_pilih_thumbnail.htm">
Browser anda tidak support.</iframe></td>
<td width="34%">
<iframe name="thumbnail" width="300" height="389" scrolling="no" border="0"
frameborder="0" src="silahkan_pilih_link_album.htm">
Browser anda tidak support.</iframe></td>
</tr>
</table>
</body>
</html>Album1.html
<html>
<head>
</head>
<body>
<p>
<a title="Album1" target="gambar" style="text-decoration: none; font-weight:700" href="1.jpg">
<img border="0" src="1kecil.jpg" width="250" height="130"></a></p>
<p>
<a title="Album1" target="gambar" style="text-decoration: none; font-weight:700" href="2.jpg">
<img border="0" src="2kecil.jpg" width="250" height="130"></a></p>
<p></p>
</body>
</html>Album2.html
<html>
<head>
</head>
<body>
<p>
<a title="Album1" target="gambar" style="text-decoration: none; font-weight:700" href="3.jpg">
<img border="0" src="3kecil.jpg" width="250" height="130"></a></p>
<p>
<a title="Album1" target="gambar" style="text-decoration: none; font-weight:700" href="4.jpg">
<img border="0" src="4kecil.jpg" width="250" height="130"></a></p>
<p></p>
</body>
</html>Source:
Farhan Perdana
blackdramon@gmail.com
http://aniplasma.co.nr
Author Biography:
Farhan Perdana. Dropped out of 2nd grade of high school and continued in open school. Learned computer autodidactically.