The Picax Project - A Web Front to Picasa
This is an example of the gallery software. The software can be downloaded from the release section of the picax sourceforge project and is really easy to use just download the release and look at the ex-gallery.html and ex-albums.xml. To export an XML gallery from Picasa make an album select the photos you want to export and select "Export as HTML Page" by right clicking on the album to the left. Then select the XML format. Upload the created directory to your server and create an entry in your albums XML (e.g. ex-albums.xml).
Index of this page:
Demo of the gallery
You can also see a real life demo on my website.
Download
Download the album from the sourceforge project page under releases.
Howto use the gallery in your site
The album software is pretty easy to use. You have to but the following in your html head part of the page:
<head>
...
<link href="pw-album.css" type="text/css" rel="stylesheet" />
<script src="pw-album.js" type="text/javascript">//</script>
<script type="text/javascript">//<![CDATA[
function OnLoadGallery() {
var gallery = document.getElementById('gallery');
var album = new PicasaAlbum(gallery);
album.loadAlbumIndex('ex-albums.xml');
}
//]]></script>
...
In the body in page you then put:
<div id="gallery"></div>
Notice that the ID must be the same as you used in the head.
How to connect Picax and Picasa
Picax is only build with the intention of displaying photos nor organizing them and manipulaing them. For that Picasa is a much better choice. So to display an album on your page you must to 3 steps:
- Export the album from Picasa
- Copy the album to your sites web directory
- Make a entry in the album XML file which Picax reads to display the available albums
Step 1 you do from Picasa. Select the photos you want to export from the album and right click
on the album name to the right and select Export as HTML Page. Set the setting you
want for the export and click Next. Then in the choices for template select
XML Code and export it.
Step 2 you need to know yourself, but since you have a site you probably know it.
Step 3 edit the album XML which is the one you loaded from head. In the example it was
called ex-albums.xml but you can call it what you want.
Add an <album> entry:
<album> <name>Name of the album</name> <date>Date or description</date> <copyright>Who took the picture</copyright> <path>The path on the server to the album</path> <itemThumbnailImage>Thumbnail photo</itemThumbnailImage> <itemThumbnailWidth>Thumbnail width</itemThumbnailWidth> <itemThumbnailHeight>Thumbnail height</itemThumbnailHeight> </album>
The thumbnail stuff you can get from the XML exported by Picasa.
Please note: that you cannot test it from you local file system. The AJAX component requires the use of a webserver.
The DOM structure with CSS classes
You can use the structure to restyle the gallery using the CSS as a basis.
<!-- The gallery element is annotated with the pw-gallery className -->
<div id="gallery" class="pw-gallery">
<!-- The top tab menu -->
<div class="pw-main-tab">
<a class="pw-albums-tab pw-albums-tab-selected"/>
<div class="pw-seperator-tab"/>
<a class="pw-pictures-tab"/>
</div>
<!-- The title on the tabs -->
<h1 class="pw-album-title">Albums</h1>
<!-- Displays the loading icon -->
<div class="pw-loading">
<!-- Centering of the image -->
<div>
<img class="" src="loading.gif"/>
</div>
Loading Album
</div>
<!-- The block that displays the phote -->
<div class="pw-image-display">
<!-- The background of the image, this is the semi
transparent background -->
<div class="pw-image-display-background"/>
<!-- The navigation controls on top of the image -->
<div class="pw-image-control">
<a class="pw-image-previous"/>
<div class="pw-image-dark-sep"/>
<a class="pw-image-slideshow-stop pw-image-slideshow-stop-inactivate"/>
<div class="pw-image-dark-sep"/>
<a class="pw-image-slideshow-start"/>
<div class="pw-image-dark-sep"/>
<a class="pw-image-next"/>
<div class="pw-image-dark-sep"/>
<a class="pw-image-close"/>
</div>
<!-- The container of the photo -->
<div class="pw-image-container">
<!-- The counter e.g. current/total photo -->
<a class="pw-image-count"/>
<!-- The caption of the photo -->
<div class="pw-image-caption"/>
<!-- The image which is displayed -->
<img class="pw-image-showing"/>
<!-- The copyright notice on the bottom of the photo -->
<div class="pw-image-copyright">(C) Copyright 2007</div>
</div>
</div>
<div>
<!-- The gallery tab with all albums -->
<div class="pw-image-albums">
<!-- Each album is encapsulated in a tag like this -->
<a class="pw-index-item">
<!-- Container for the album thumbnail -->
<div class="pw-index-thumb">
<!-- The actual thumbnail as a background image -->
<div class="pw-image-shadeless"/>
</div>
<!-- The album name -->
<div class="pw-index-name">Album name</div>
<!-- Date or description of the album -->
<div class="pw-index-date">Date or descrition</div>
</a>
</div>
<!-- The tab with all thumbails for the active album -->
<div class="pw-image-thumbnails">
<!-- Every thumbnail is encapsulated by a tag like this -->
<div class="pw-image-thumbnail">
<!-- The image display as a background image
(to remove the shadow added by picasa) -->
<div class="pw-image-shadeless"/>
</div>
</div>
<!-- End of displaying the thumbnails (to clear the floats) -->
<div class="pw-image-thumbnails-end"/>
</div>
</div>
Contact me
You can contact me from my website where all my contact informations are available. I am interested if you have tried use the program and what problems you had with it. You can also contact me if you have ideas for improvements or features.