Certified 100% clean from spyware, adware or viruses by Softpedia

Integrate an album into an existing site

Making an album blend into your site design isn't as hard as one might think. This tutorial tells how. We will be using a demo site about cars to illustrate how it's done. If you haven't ever edited a JAlbum skin, please see the "Modify a skin" tutorial first. Please check out how this minimal site looks before we proceed.


Sample site before integrating an album

We're actally going to start from the end. This is how the end result can look. This integration took about 15 minutes to make.


Sample site after integrating an album

When clicking through the final site you notice that JAlbum has embedded the album graphically in the site. This is done by a pretty simple modification to one of the JAlbum skins, in this example the "Minimal" skin. To make the album look embedded like this, we need to make JAlbum add the html code for the surrounding site before and after the album code itself on each generated slide.

Skins contain two files called "index.htt" and "slide.htt". These files are "html template files" that JAlbum use as base for all generated files. "index.htt" is base for all thumbnail pages and "slide.htt" is base for all slide pages. To make the generated pages blend into the existing site you need to insert code from the existing site to the top and bottom of these files. This is how you do it.

1. Select and copy a skin

You first need to select a JAlbum skin as base for modification. Pick the skin that most closely matches the look you want. In this example we use the "Minimal" skin. Press "Edit" next to the skin selector, a window will open on your desktop that displays the contents of that skin directory (each skin has a directory of its own, the name of the directory is the name of the skin). Step up to the parent directory and make a copy of this skin (so you don't ruin the original). Name it to something suitable, for example "Cars". Finally step into the new skin directory so you can edit its contents.

2. Arrange the top

  1. Pick a fairly clean page from the existing site.
  2. Copy the html code from the top of that file to the place where you want JAlbum to add it's thumbnails. In our case where this text is located: "This section is supposed to have a gallery of car images produced by JAlbum"
  3. Open "index.htt" from the current skin directory.
  4. Delete the existing code from the top to and including the <body> tag.
  5. Paste the contents of the clipboard.

3. Arrange the bottom

  1. Return to the original page from the existing site. Now copy the rest of the code into the clipboard.
  2. Go back to "index.htt" and replace the end, starting just before the </body> tag, with the contents of the clipboard.
  3. Save and repeat this process with the "slide.htt" file.

4. Arrange image elements

Web sites are usually supported by some graphical elements. Make sure that those image links are correct in the template pages by doing some search and replace on the image tags of the code you have inserted. One simple way is to copy all graphical elements from your site to the "res" directory of the skin and replace all references to graphical elements by $resPath, so if the original code reads <img src="images/header.gif">, make it <img src="$resPath/header.gif"> instead.

5. Try it out

Return to JAlbum. Select the new skin (it should show up in the skin list right away). Pick some images and make an album. You will probably notice some mistakes now, but after some adjustments you can enjoy the integrated experience.