Snap Shot Index

Discussion

Image Gallery Schemas: config.xsd and config.dtd
Program displays various thumbnails browsers relative selected XML configuration file
Various technologies (php, DW Spry, & xsl ) were used to generate viewers
Spry filmstrip not working,
Programs has multiple viewers:
1. Flow Layout, layout images left to right, top down
2. Flow Layout1, adds home page text
3. film strip, main image in middle, thumbnails slider undernealth
4. Table, table of main Images
5. TableSWF displays both swf and images, reads image size and display relative a 300 width; height set by perspective.
6. Slide Show, typical image slide show
XSL Technology: XSL (Extensible Sytle Sheet Language) + XML file = XSLT (XSL Transformaton) → DHTML
System has these XSL files:
XML Option lists the output of the actual XML data, no graphic images
To Generate additional configuration files, goto main Student Site Interface select thumbnail radio button and then the desired class.
PDF Viewgraphs discussing image viewers (blackboard has web-cast)

| PHP Zip File of Source


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Flow Layout</title>

<!-- Written by Professor T. DeDonno

2/2010 program does a basic flow image layout

images are displayed left to right top down, it reads an xml file

set by the config get variable, the xml file is parsed into the array

$students, attributes in the array are used to construct the DHTML



XML schema atttributes....

        icon  filename of image

        sizes point to folder locations of the three sizes

        press refers to what should be down when the user clicks icon

 -->



<script src="changeSize.js" type="text/javascript"></script>

<?php include( "readConfig.php" ); ?>



</head><body>





<table style="float:left" >

<tr><td>

<input type="button" value="Snap shot Index"

onclick="location.href='index.php'" />

</td></tr><tr><td>

<input type="button" value="filmStrip"

onclick="location.href='imageGallery.php?config=<?= $_GET[ 'config' ]; ?>'" />

</td></tr><tr><td>

<input type="button" value="Next Size" onclick="changeSize();" />

</td></tr>

</table>



<?php



        foreach( $students as $s )

        {

        echo '<a href="'.$s['attributes']['press'].'"';

        echo ' title="'.$s[ 'attributes' ][ 'rollOver' ].'" > ';

        echo '<img class="box" src="'.$sizes['medium'].$s['attributes']['icon'].'"';

        echo ' alt="'.$s[ 'attributes' ][ 'author' ].'" /></a>'."\n";

        }

?>



</body>

</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Written by Professor T. DeDonno

2/2010 program does a simplified flow image layout

images are displayed left to right top down, it reads an xml file

set by the config get variable, the xml file is parsed into the array

$students, attributes in the array are used to construct the DHTML



XML schema atttributes....

        icon  filename of image

        sizes point to folder locations of the three sizes

        press refers to what should be down when the user clicks icon

 -->



<title>Flow Layout</title>



<script src="changeSize.js" type="text/javascript"></script>

<?php include( "readConfig.php" ); ?>

    



</head><body>

<input type="button" value="Next Size" onclick="changeSize();" />

<?php

        foreach( $students as $s )

        {

        echo '<a href="'.$s['attributes']['press'].'"';

        echo ' title="'.$s[ 'attributes' ][ 'rollOver' ].'" > ';

        echo '<img class="box" src="'.$sizes['medium'].$s['attributes']['icon'].'"';

        echo ' alt="'.$s[ 'attributes' ][ 'author' ].'" />';

        echo $s[ 'attributes' ][ 'author' ]."</a>\n";

        }

?>



</body>

</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Typical Image Gallery</title>



<!-- Written by Professor T. DeDonno

2/2010 program does a basic file strip (aka image gallery )

images are displayed with thumbnail selector at the bottom with a medium

size image in the preview window

set by the config get variable, the xml file is parsed into the array

$students, attributes in the array are used to construct the DHTML



XML schema atttributes....

        icon  filename of image

        sizes point to folder locations of the three sizes

        press refers to what should be down when the user clicks icon

 -->



<script src="imageGallery.js" type="text/javascript"></script>

<link href="imageGallery.css" rel="stylesheet" type="text/css" />



<?php include( "readConfig.php" ); ?>

</head>

<body>



        

<a id="mainImageLink" 

   title="<?= $students['0']['attributes']['rollOver'] ?>"

     href="<?= $students['0']['attributes']['press'] ?>" >

<img border="1" id="mainImage" height="300" width="500" alt="mainImage" 

 src="<?= $sizes['large'].$students['0']['attributes']['icon'] ?>" />

</a> 



<hr />

<span class="moveSlider" onclick="moveSlider( 0 );">Beginning</span>

 | <span class="moveSlider" onclick="moveSlider( -480 );" >Page Back</span>

 | <span class="moveSlider" onclick="moveSlider( -120 );" >Previous</span>

 | <span class="moveSlider" onclick="moveSlider( 120 );" >Next</span>

 | <span class="moveSlider" onclick="moveSlider( 480 );" >Page Forward</span>

 | <span class="moveSlider" onclick=" moveSlider( 'end' );" >End</span>

<br />

<div>

<span class="moveSlider"  style="font-size:60px;margin-bottom:100px;" onclick="moveSlider( -120 );" >&lArr;</span>

<div id="slider" >



<?php

        

        foreach( $students as $s )

        {      

        echo '<a href="'.$s['attributes']['press'].'" ';

        echo ' title="'.$s['attributes']['author'].'" >';

        echo '<img class="thumbnail" src="'.$sizes['small'].$s['attributes']['icon'].'"';

        echo " onmouseover=\"swapImage( '". $s[ 'attributes' ]['icon']."', '".$sizes[ 'large' ]."' );\"";

        echo ' alt="'.$s[ 'attributes' ][ 'author' ].'" />';

        echo "</a>\n";

        }

?>

</div>

<span class="moveSlider" style="font-size:60px;margin-bottom:100px" onclick="moveSlider( 120 );">&rArr;</span>

</div>



</body>

</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- @author T. DeDonno @date 2/2010

    Typical slide show -->



<title>Slide Show</title>



<?php include( "readConfig.php" ); ?>



<script language="javascript" type="text/javascript" >



images = new Array(  //note you do have document.images

<?php 

    //just create a long array on one line

    for( $i = 0 ; $i < count( $students ) - 1; ++$i ) 

        echo ' "'.$students[ $i ][ 'attributes' ][ 'icon' ].'",';

    echo ' "'.$students[ $i ][ 'attributes' ][ 'icon' ].'" ); ';

?>



var i = 0;

var thumbnails = "<?= $sizes['medium'] ?>";

var interval = 0;



function nextImage( )

{

    if( ++i >= images.length ) i = 0;



    (document.getElementById( "mainImage" )).src = thumbnails+images[ i ];

}



function stop( )

{    

    if( interval > 0 ) { clearInterval( interval ); interval = 0; }

}

function start( )

{

    if( interval == 0 ) {

        interval = setInterval( "nextImage()", 2000 );

        }

}

</script>

</head>

<body style="margin:0 auto; text-align:center;" > 

    

<img style="min-height:220px; width:220px;" 

     border="1" id="mainImage"  alt="Main Image"

     src="<?= $sizes['medium'].$students[0]['attributes']['icon'] ?>" />





<div>

<a href="" onclick="stop(); return false;">Stop</a>

| <a href="" onclick="start(); return false;">Start</a>

</div>



</body>

</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Table Display</title>



<!-- @author Professor T. DeDonno 

     @date 2/2010

     display images in a table -->



<script src="changeSize.js" type="text/javascript"></script>

<?php include( "readConfig.php" ); ?>

</head>

<body>



<table border="1" >

<tr>

<tr><td><input value="Next Size" type="button" onclick="changeSize();"/></td>

<td><input value="filmStrip" type="button" onclick="location.href='imageGallery.php?config=<?= $_GET[ 'config' ] ?>'" /></td>

<td><input value="flow Layout" type="button" onclick=

"location.href='flowLayout.php?config=<?= $_GET[ 'config' ] ?>'" /></td>

<td><input value="Spry Gallery" type="button" onclick=

"location.href='spryImageGallery.php?config=<?= $_GET[ 'config' ] ?>'" /></td>

</tr>

<th>icon</th>

<th>author</th><th>press</th><th>rollOver</th></tr>



<?php



    foreach( $students as $s ) {

    

        echo "<tr><td><a href=\"".$s['attributes']['press'].'" >';

        echo "<img src=\"".$sizes['small'].$s['attributes']['icon'];

        echo "\" alt='icon attribute' /></a></td>";

        if( array_key_exists( 'author', $s['attributes' ] ) )

            echo "<td>".$s['attributes']['author']."</td>";

        echo "<td>".$s['attributes']['press']."</td>";

        if( array_key_exists( 'rollOver', $s['attributes' ] ) )

            echo "<td>".$s['attributes']['rollOver']."</td>";

        echo "</tr>\n";

        }

?>

</table>

</body>

</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Table Display</title>



<script src="changeSize.js" type="text/javascript"></script>

<script src="swfobject.js" type="text/javascript"></script>

<?php 



include( "readConfig.php" ); 



function getSizeFile($url) {

    if (substr($url,0,4)=='http') {

        $x = array_change_key_case(get_headers($url, 1),CASE_LOWER);

        if ( strcasecmp($x[0], 'HTTP/1.1 200 OK') != 0 ) { $x = $x['content-length'][1]; }

        else { $x = $x['content-length']; }

    }

    else { $x = @filesize($url); }



    return $x;

}

?> 



</head>

<body>



<table border="1" >

<tr>

<th>Size</th>

<th>Icon</th>

<th>author</th><th>press</th><th>rollOver</th></tr>



<?php



    $i=0; //counter for swfOject id

    foreach( $students as $s ) {

    

        if( array_key_exists( 'useAuthor', $s[ 'attributes' ] ) &&

            $s[ 'attributes' ][ 'useAuthor' ] == "true" )

            $press = $icon = $s[ 'attributes' ]['author' ];

        else {

            $press = "";

            $icon = $sizes[ 'small' ];

            }

        

        $press .= $s[ 'attributes' ][ 'press' ];

        $icon  .= $s[ 'attributes' ][ 'icon' ];

        

        if( count( $_GET ) > 0 && array_key_exists( 'press', $_GET ) ) {

            // get design=number from press

            $design = strstr( $press, "?design=" );

            

            //echo "should be design number: $design<br />";

            //echo "press before $press<br />";

            //can have a select design from a url?design=12

            if( ($i=strpos( $_GET[ 'press' ], "?design=" )) > 0 ) 

                $_GET[ 'press' ] = substr( $_GET[ 'press' ], 0, $i );

            $press = $_GET[ 'press' ].$design;

            //echo $design."., ".$_SERVER[ 'HTTP_REFERER' ];

            //echo "press $press<br />";

            }

            

        

        

        $path = pathinfo( $icon );

        if( array_key_exists( 'extension', $path) && $path[ 'extension' ] == 'swf' ) { 

            echo "<tr><td>".getSizeFile(  "http://localhost".$icon )."</td><td>";

            $i++ ?>

        

<script type="text/javascript">

// <![CDATA[

swfobject.embedSWF( "<?= $icon ?>", "<?= "swf".$i ?>", "190", "190", "9.0.0", "expressInstall.swf" );

// ]]>

</script>

<!-- this is a bad id -->

<div id="<?= "swf".$i ?>">

            <h1>Alternative content</h1>

            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

</div>

        

    <?php echo "</td>"; 

           }    else {  //non swf either jpg or png

            echo "<tr><td>".filesize( $icon )."</td>";

            echo '<td><a href="'.$press.'" > ';

            if( function_exists( "getimagesize" ) ) {

                list( $width, $height ) = getimagesize( $icon );

                //echo "$height, $width";

                $height = round(270*$height/$width);

            }    else $height = 200;

            echo "<img height=\"$height\" width=\"270\" src=\"".$icon;

            echo "\" alt='icon attribute' />";

            echo "</a></td>";

            }

        

        echo "<td>".$s['attributes']['author']."</td>";

        echo "<td><a href=\"$press\">".$s[ 'attributes' ]['press']."</a></td>";

        echo "<td>".$s['attributes']['rollOver']."</td></tr>\n";

        }

?>

</table>

</body>

</html>

Other Viewer Examples:

Official 2.0 Light Box uses Scriptaculous Framework | Commericial Version | Examples | LightBox Clones | Slimbox Lightweight JQuery/Mootools
Amazon pop-up Light Box w NavBar
ELoss jQuery slide viewer examples. D Martin Fade In with Simple JavaScript Script.
Light Box Jquery J Niederecker other jquery Image Viewers
Sheri K Filmstrip | Sheri K - Image Gallery small number of thumbnails (no scroll bar).
Sheri K Image Gallery with Slider. Auto Sliders on RollOver, Highlight active Thumbnail
cim269a Ken Bellis Review of http://www.javascriptkit.com
backbox LightBox & Multi-image Slide Show
Image Gallery Content Management Systems Coppermine recommended, but these two are discussed often 4 Images, and Gallery 2.3
Flash ActionScript Galleries: Using ActionScript w XML Tutorial | Image Tutorial Set | ActionScript Images Galleries - Impressive Collection

To Do

Create Scripts for Automatically scaling to fixed size image with background filling blank space
Include coppermine image gallery
mashup flickr api to xml config file, this may not be too hard go from flickr rpc-xml to snapshot xml format.