XML & Image Viewer Demo System Technology Used to Generate Viewer: Viewer Type:

XML Input Configuration File:
Selected XML Configuration:

Not working Needs to be Updated Use w Flickr

Keyword Tag Selection Number of Images:

Flash imageGrid and SlideShow not working with Flickr



Discussion | 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 $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($url1),CASE_LOWER);
        if ( 
strcasecmp($x[0], 'HTTP/1.1 200 OK') != ) { $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 ) > && 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=" )) > 
                
$_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:

To Do