Documentation: Widget Preview

NOTE: EXPERIMENTAL

Experimental widget to support [[An_Example?]]
Zaltana Style does not depend on Apache Image - to reduce over coupling.
This is NOT a resize on the browser - it is done and cached on the server
http://www.huddletogether.com/projects/lightbox2/ version
Or even better http://jquery.com/demo/thickbox/
http://www.dolem.com/lytebox/ seems to be best choice
Problems with CSS version (Default) = Loads image at page load (bad for large sets) & click on image goes to full page - although this may be an advantage.
Problems with Javascript version (Demo) = To do delayed load requires knowing the URL to load. Currently this is a IMG - but we could make it a loaded AJAX - or even the 'href' of an iframe loaded on demand.
NOTE: We should support Thickbox instead because it supports arbitrary popups, including iframes - but it requires jQuery - investigate.

Example

Default Style = CSS version, where images are loaded at page load but requires no javascript. Activate with hover.
Demo Style = Javascript popup version which loads the image only when required. Activate with click.
Accessible = shows the thumbnail with Anchor (also the default HTML).

 <a class="preview" href="/demo/photo/teha.jpg">
  <div style="border: 1px solid">
   Hello World<br />
   <img src="/z/image/thumbnail/demo/photo/teha.jpg"  title="Teha Penrose"/>
  </div>
 </a>

 <a class="preview" href="/demo/photo/dad.jpg">
  <img src="/z/image/thumbnail/demo/photo/dad.jpg"/>
 </a>

<br/>

 <a class="preview" href="/demo/photo/dad.jpg">
  <p>This little paragraph allows can also be linked/clicked.
    And it can contain anything...
  </p>
 </a>

<h2>A group of images</h2>
<div class="preview">
 <a class="preview" href="/demo/photo/teha.jpg">
  <img src="/z/image/thumbnail/demo/photo/teha.jpg"/>
 </a>
 <a class="preview" href="/demo/photo/dad.jpg">
  <img src="/z/image/thumbnail/demo/photo/dad.jpg"/>
 </a>
</div>


<h2>Slideshow group</h2>
<div class="slideshow">
 <a class="preview" href="/demo/photo/teha.jpg">
  <img src="/z/image/thumbnail/demo/photo/teha.jpg"/>
 </a>
 <a class="preview" href="/demo/photo/dad.jpg">
  <img src="/z/image/thumbnail/demo/photo/dad.jpg"/>
 </a>
</div>

Hello World

This little paragraph allows can also be linked/clicked. And it can contain anything...

A group of images

Slideshow group

Working example of gallery:

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)

Standalone

TODO - Write up stand alone help

Implementations

TODO - add in CSS, Lytebox, Lightbox, Thickbox, and other versions here.

New possible implementations as proof of concept:

Smooth Gallery - http://smoothgallery.jondesign.net/showcase/gallery/
Couloir - http://www.couloir.org/js_slideshow/ - Inplace rather than popup.
http://slideshow.triptracker.net/ - Interesting moving pictures, ala Apple Screensaver, but direct JS only implementatin.
Thickbox - maybe?
http://mikecherim.com/experiments/css_photo_showcase.php - CSS Version again, but load only on click ! Good interface because click and late loading means good performance on browsers.