![]() |
![]() |
|||||||||||||||||
|
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.
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.
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 skinYou 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
3. Arrange the bottom
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 5. Try it outReturn 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. |
|||||||||||||||||
© 2005, Datadosen.se, David Ekholm |