galeria for viewing pictures

[faustino forcen]

Hi

I've modified the code and css of Chandler Kent's iPhlickr to try to
mimick the aspect of Pictures application. It's mostly independent of
iUI (iPhlickr modifies iUI code to include some functionality) but
it's tested only on an iUI-based website.

This lib only provides the code and css for displaying the images. You
can implement your thumbnails in any way that you wish. galeria is
completely independent of your design. You only need to group them
into an element (for example a <div> or an <ul>) that you'll pass as
parameter to the startGaleria() function.

In this example I extract the images from a database and display them
as <li> items.

<ul id="imagenes">
<?php
$numCounter = 0;
while($arrRecord = $objEstacion->getNext()){
?>
<li>
<div style="height:75px;overflow:hidden">
<a href="#galeria" url="../imagen/<?= $arrRecord['PIC']; ?
>" rel="galeria" caption="<?= $arrRecord['CAPTION']; ?>"
onclick="startGaleria('imagenes', <?= $numCounter; ?>);">
<img src="../_pics/<?= $arrRecord['THUMB']; ?>"
width="120" id="<?= $arrRecord['ID']; ?>" />
</a>
</div>
</li>
<?php
$numCounter ++;
}
?>
</ul>


This is the html code that you must add to your page in order for
galeria to work. It's useful to use both as title for the <div> and
value for galeriaBack the same title of the containing page or page
fragment, to reduce flickering when iUI changes the content of the
backButton element.

<div id="galeria" title="<?= $strEstacionNombre; ?>">
<div id="galeriaPhoto" onclick="showControls();">
<h1 id="galeriaImageCaption"></h1>
<img id="galeriaImage" />
</div>

<div id="galeriaToolbar">
<h1 id="galeriaTitle"></h1>
<a id="galeriaBack" class="galeriaButton" href="#"
onclick="stopGaleria();"><?= $strEstacionNombre; ?></a>
</div>

<div id="galeriaNav" onclick="keepControls();">
<div class="navLeft">
<img id="prevPhoto" src="galeria/galeriaPrev.png"
alt="Prev">
<img id="playPause" src="galeria/galeriaPlay.png"
alt="Play">
</div>
<div class="navRight">
<img id="nextPhoto" src="galeria/galeriaNext.png"
alt="Next">
</div>
</div>

<div id="galeriaPreloader"></div>
</div>

The idea is to populate an array with the info that you include on the
thumbnails. galeria both populates the array and uses it to handle the
display of the images and the navigation between them. Chandler even
coded the slideshow functionality in his code.

You can see it in action at http://www.miestacion.com as usual. The
package with the code and required files is at http://www.forcen.com/files/galeria.zip

Most of the credit must go to Chandler Kent. Both for writing it and
for allowing me to modify his code. You can se his original gallery,
as well as another sample of how to show your thumbnails at
http://www.iphlickr.com

Fell free to use, or not, and modify this code in any way you need.
I'll try to provide more detailed documentation.

Faustino Forcén

--
You received this message because you are subscribed to the Google Groups "iui-developers" group.
To post to this group, send email to iui-dev...@googlegroups.com.
To unsubscribe from this group, send email to iui-developer...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/iui-developers?hl=en.