To help describe Zaltana we have created a set of examples scenarios.

Gallery Image Viewer

In this scenario we have an Image Gallery which shows thumbnail images of all your images in a directory (this can be any code, a list on the disk, an application like Gallery2 or even remote site such as FLIKR - not important).

Now we want to add the full sized image (full size in this context meaning the image you would show the user - not the hires one).

You can implement this in so many way.

• Click on the thumbnail takes you to a new page showing the image. This is common and has the advantage of being simple and easy to write, often requires no code but also very old 90s.
• Hover/Click on the image to load it in a CSS positioned DIV. This one has many solutions:
  • Javascript onMouseOver or onClick to load the image in a DIV or iframe
  • AJAX versions - combined with DHTML can even produce a nice shad across the rest of the window and load the object
  • Pure CSS version using the :hover CSS pseudo class.
  • Flash viewer which incorporates zoom and slide (although you could probably achieve this now in Javascript)

The point is, the way you implement your new Gallery depends on some of your requirements, trends (especially internet/web trends) and technology (AJAX, although not new has changed our web development).

Zaltana handles this by abstracting what you want to do from how you do it. Yes this can be done in your applications templates - but in each applications templates. Zaltana is one place for not only all applications on your site, but applications on other sites - even though they are unrelated.

And then comes accessibility - this has always been important to me, but not to everyone - but along comes some regulations and it is now important to all of us. We want an easy way to present a fully accessible and non-Javascript/CSS version of our system. Well Zaltana will handle that, completely automatically - for your Widgets.

How is this done...

Start with the "Widget" - in this case a word meaning the HTML you use.

PLEASE NOTE - this is a work in progress example, and not a real Zaltana Widget - although it will be put in to support this example.

Here we want to show our Photo as a thumbnail. Note that we are also using another feature of Zaltana - on the fly image creation with caching.

<img src="/z/image/thumbnail/example/photo.jpg"/>

Now we want to show the web view version (note that we are using web view, rather than the original, in case the original is a raw or very large image).

<img src="/z/image/web/example/photo.jpg"/>

Let us make it a hover event

<a class="hover" href="/z/image/web/example/photo.jpg">
  <img src="/z/image/thumbnail/example/photo.jpg"/>
</a>

If we now do nothing with the code above - we get a nice thumbnail image of our photo, and when we click on it, we get the web sized image.

Adding some CSS to this - we can remove borders, and generally make it look a little nicer.

What outputs would we like?

• Pure CSS hover pseudo class
  • Zaltana XSL changes the anchor & image into something like the following:

<a 
  class="thumbnail" 
  href="#thumb"
>
  <img 
    src="media/tree_thumb.jpg" 
    width="100px" 
    height="66px" 
    border="0" 
  />
  <span>
    <img src="media/tree.jpg" />
  </span>
</a>

Note: that the CSS is normally used as a class from the included css file - not directly embedded like this example!

The CSS - This example was taken from - http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/#thumb

<style type="text/css">
.thumbnail span{ /*CSS for enlarged image*/
  position: absolute;
  visibility: hidden;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
  visibility: visible;
}
</style>

That is pretty simple HTML and CSS to write - but it requires you change every HTML file (if using static) or every template (if using dynamic code) of every point where images are put down for every application you use.

All of a sudden you are faced with a huge task - how to change your method for showing images everywhere.

Now lets see another way of putting up the code.

XXX Javascript onMouseOver / onClick popup - Ext

Along comes an idea to only add the necessary Javascript to the objects (the event handlers) if it is supported by the browser. Thus no need to understand the browser on the server side and much more bullet proof code. This is something we all want - but the methods to do this have changed over the past few years - as they improve and as browsers change.

But JS libraries can already do all of this - how is this different?

Yes, libraries such as ThickBox simply add the necessary content to the page on page load. Thus providing safe compatible and accessible versions. How is this different.

In one way it is not. More significantly it is not because Zaltana can use ThickBox or other libraries to do the actual work.

It is different because:

• Each JS library expects slightly different HTML - e.g. ThickBox uses "class", Lightbox uses "rel". Zaltana manages this for you.
• Some more complicated libraries (like tooltips or even Window Managers) require a change to the HTML structure itself to work. Zaltana manages this for you.
• You have to add the Javascript and CSS to the header and know how to call the page load methods. Zaltana manages this for you.
• Adding a new Javascript library like the above is very dependent on the implementation of the rest of your javascript (e.g. Prototype vs jQuery vs YUI etc). Zaltana has combined the widgets and tested them together.

So your HTML output may change. Your Javascript and CSS library loading and methods to load may change. Your original HTML, Template or generated content (pick favorite programming language here) does NOT change.

Conclusion

We have seen that over time, style, trend and technology we have needed to change the way we present our galleries to users. In each case above, including falling back to the most basic click to view new URL - we have not changed the original content, HTML, templates or applications one bit. It works with our static HTML pages, it works with our advanced galleries and it works with just images in a directory.

We have moved from Static links to CSS systems to late binding javascript.

No change to your source.

Next month I am sure we will have a better way to do Galleries - someone will write a Zaltana style - and you can use that style, without changing your source.

Examples

• Automatic Gallery generated from Directory
  • Default Style - CSS implementation
  • Demo Style - Nice javascript popups
  • Accessible Style - No CSS or Javascript (although the other versions work that way correctly when those are off)

Note: The above links also demonstrate the ability to use Apache Subproc to prefix other content together via filters (or a pipeline) and it shows how you can pass things to the style engine - in this case to force a style.