Building a Custom Photo Album Tutorial
Our latest grand daughter, Anne-Marie Rose Lancaster has
captured our hearts, just as have our other seven grand children. So Popsie was asked to make a photo album, but there were differing opinions of how the pictures should be displayed. Also how to
organize the material and use the same photo album for all the pictures which will be placed on our Lancasters Laughing Place. Several off the shelf and free photo album creators were used and I
finally settled on JAlbum, which saved the album in my specified location within my FrontPage Web Builder with the associated resources (res), slides (650x450) and thumbs (124x93) and an index.html
page, which would prove to be problematic in building other albums.
The resources contains presentation graphics like up, down, movie and so forth in addition to the CSS for the slide show presentation. The other CSS file to run the second photo album is named annemarieslideshow.css. It is within the hierarchy of this set of albums, which you may be able to see in the screen shot which is shown below.
The album which JAlbum built contained the HTML output pages (HTML 3.2) and the photos in the slide folder (600x450) and the index.html page. Everything was tidy and could have been uploaded as is, except for my considerations to use a photo album for our other grand children and the validation considerations. So I copied and pasted the HTML pages into annemarie.htm, annemarie1.htm (first slide) and so forth, then converted the copied pages to XHTML to be consistent with the web site. Some additional changes were required like the tables which seem to always lack a summary statement, alt tags which are also absent and some proprietary coding and other minor changes.
When additional photo albums are created I will repeat the process above and use what was done for Anne-Marie as a template. Also folders by grand child name which would contain the resources, slides and thumbs. This will afford me a simple method of adding pictures.
Earlier I mentioned that almost every family member had a different idea of how to present the photos, so I sent everyone to Stu Nicholls excellent web site and asked them to pick the presentation method they preferred. Oh there was method in this madness. Stu has built his web site in XHTML and I do not wish to do too much retrofitting and knew he would be compliant. Also his examples and tutorials are very intuitive and the logical way he lays out the coding is very easy to follow and change if desired. All Stu asks is to give him some credit, which I am pleased to provide.
The finished photo album to your left is actually two renditions. The first is Stu's version with a few modifications. On the mouse over of the thumb nail photos a larger picture overlays the mother holding her child.
The second album is below the horizontal scroll bar which is either tabbed or clicked to open a three second delay of the photos in the album run until the end of the presentation, which is a slide show or power point type presentation. Both albums can be modified to present a teaching and learning experience like a tutorial or introduction to a particular topic.
These versions seem at present to satisfy all our family and are going to be very easy to made additions which could include music and more photos.
A second view of Stu's rendition with some minor modifications by myself is to your left. The mouse over popped up the larger size photo. Divisions are used to make the presentation and the CSS is very easy to modify.
The slide show can easily be viewed in full screen. Rather than add the coding to automatically open in a full page view, I elected to place the instructions, just in case a visitor does not realize a full page can be rendered from their browser settings. Then with either escape or similar go back to a viewing page which has the navigation bars and so forth.