Source Viewer

index.html : simply contains overview SSI (Server Side Include) commands

Showcase.php : main PHP server side code.

<?php
	$tmpl = file_get_contents('Showcase.tmpl');
	$dirs = (isset($_REQUEST['d']))? $_REQUEST['d'] : null;

if (!$dirs) {
		$dirs = array('sample_Pix', 'home');
		// TODO: instead scan for dirs with 'view.conf' files
	} else {
		$dirs = explode(',', $dirs);
	}

// if there is a single Directory and it has a Showcase.tmpl ... use it
	if (count($dirs)==1 && file_exists($dirs[0] . '/Showcase.tmpl')) {
		$tmpl = file_get_contents($dirs[0] . '/Showcase.tmpl');
	}
	$footer = file_get_contents('bottom.html');
	$tmpl = str_replace('{footer}', $footer, $tmpl);

//$aview = file_get_contents($dir . 'view.conf');
	// process the view

$aview = '';
	// loop through sub dirs
	foreach ($dirs as $dir) {
	    if ('/' != substr($dir,strlen($dir)-1,1)) {$dir .= '/';}
		$file_handle = fopen($dir . 'view.conf', "r");
 		$firstImg = true;
		while (!feof($file_handle)) {
			$line = fgets($file_handle);
			$line = trim($line);
			if ($line == '') continue;
			$char1 = substr($line,0,1);
			if ($char1 == "<") { // pass it on
				$aview .= $line;
			} elseif ($char1 == "#") { // its a comment
				// ignor it
			} else {  // asume it is   'file'|'title'
 			    if ($firstImg) {
 			    	$firstImg = false;
// 			    	$aview .= "<a href='SlideShow.php?d=$dir' target='_blank'><button> view Slideshow </button></a><p/>";
 			    	$aview .= "<a href='SlideShowJS.php?d=$dir' target='_blank'><button> view Slideshow </button></a><p/>";
 			    }
				$aview .= formPixLink($dir, $line);
			}
		}
		fclose($file_handle);
	}

$tmpl = str_replace('{viewpane}', $aview, $tmpl);
	echo $tmpl;

function formPixLink($dir, $fdata) {

list($fname, $title) = preg_split('/\s/', trim($fdata), 2);
	    $title = trim($title);
	    $fspec = $dir . trim($fname);
	    $ficon = $dir . str_replace('.', '_sm.', trim($fname));
	    $retstr = "<li><a href='$fspec' class='preview' title='$title'><img src='$ficon' alt='[$title]' /></a></li>";
	    if (!file_exists ($ficon)) {
	        if (strstr(PHP_OS, 'WIN')) {
	            $retstr = "<li><a href='$fspec' class='preview' title='$title'><img src='$fspec' width='160' alt='[$title]' /></a></li>";
	        } else {
	        	// use GraphicsMagick to create a small image
	        	// transfering only small image to the browse is important for performance
	        	// and that way we only fetch large photo 1 at a time upon user interaction
	        	$cmd = "gm convert $fspec -thumbnail 160 $ficon";
	        	$resp = system($cmd);
	        }
	    }
	    return $retstr;
	}

Showcase.tmpl : template; used to form the final page, in realtime.

bottom.html : some common html for the bottom of the page

preview.js : javascript to support responsive positional popup image preview

/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 
 // global vars
  	// these variables determine popup's distance from the cursor
	// you might want to adjust to get the right result
 var pixleft;
 var pixtop;
 var xOffset = 10;
 var yOffset = 30;

this.imagePreview = function(){	
	/* CONFIG */
				
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.preview").hover(function(e){
	//alert ("top: " + e.pageY + " left: "+ e.pageX);
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
//		$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
		$("body").append("<p id='preview'><img src='"+ this.href +"' width='640' alt='Image preview' />"+ c +"</p>");								 
		
		calcPixPos(e);
		$("#preview")
			.css("top",pixtop + "px")
			.css("left",pixleft + "px")
			.fadeIn("fast");						
        },
	function(){
		this.title = this.t;	
		$("#preview").remove();
        });	
	$("a.preview").mousemove(function(e){	
		calcPixPos(e);
		$("#preview")
			.css("top",(pixtop) + "px")
			.css("left",(pixleft) + "px");
	});			
};

function calcPixPos(e) {
		// find the best spot for a 640x480 image
		//var wtop = $(document).scrollTop();  // currently not working in jquery
		//var wleft = $(window).scrollLeft();
		var wtop = document.documentElement.scrollTop;
		var wleft = document.documentElement.scrollLeft;
		
		var wwidth = $(window).width();		// window 
		var wheight = $(window).height();
		var itop = (wheight-480-20)/2;		// ideal spot
		var ileft = (wwidth-640-20)/2;
		var etop = e.pageY - wtop;		// mouse spot
		var eleft = e.pageX - wleft;
		
		pixleft = 0;
		pixtop = 0;

// first check to see if the mouse position is out side 
		// the ideal Pix position for a centered 640x480 image
		if (etop <= itop) { pixtop = e.pageY + yOffset; }
		if (etop >= itop+480) {  pixtop = e.pageY - yOffset - 480 - 20; }
		if (eleft <= ileft) { pixleft = e.pageX + xOffset; }
		if (eleft >= ileft+640) { pixleft = e.pageX - xOffset - 640 - 20; }
		
		
		// if not:
	if (pixleft==0 && pixtop==0) {
		// find the shortest distance to a side which would place the most of the pix in view
		
		var closest = 'L';
		var extra = wwidth - (eleft+640);
		if (extra < wheight - (etop + 480)) {closest = 'T'; extra = wheight - (etop + 480);}
		if (extra < (eleft-640)) {closest = 'R'; extra = (eleft-640);}
		if (extra < (etop-480)) {closest = 'B';}
		switch (closest) {
		case 'L':
		   pixleft = e.pageX + xOffset;
		   pixtop = itop + wtop;
		   break;
		case 'T':
		   pixleft = ileft + wleft;
		   pixtop = e.pageY + yOffset;
		   break;
		case 'R':
		   pixleft = e.pageX - xOffset - 640 - 20;
		   pixtop = itop + wtop;
		   break;
		case 'B':
		   pixleft = ileft + wleft;
		   pixtop = e.pageY - yOffset - 480 - 20;
		   break;
		// default was:
		//"top",(e.pageY - xOffset)
		//"left",(e.pageX + yOffset)
		}
	} else {
		if (pixleft==0) {pixleft=ileft+ wleft;}
		if (pixtop==0)  {pixtop=itop + wtop;}
	}
}

// starting the script on page load
$(document).ready(function(){
	imagePreview();
});

Viewing source code files from the server

which support rendering for: Showcase

index.html : simply contains overview SSI (Server Side Include) commands

Showcase.php : main PHP server side code.

Showcase.tmpl : template; used to form the final page, in realtime.

bottom.html : some common html for the bottom of the page

preview.js : javascript to support responsive positional popup image preview

preview.css : CSS for preview