Easy Ext - Start here -> Highlight and Colour elements.

A Simple Image gallery.

ExtJs can assist you to do some really cool things, here's one that really does have an immediate use as a mini gallery for a simple site. We are going to fetch some thumbnails from disc and then show a bigger version of that image inside a div with an animation effect.

However in a twist to the plot we are going to use AJAX to pull the images in and then offer the user an option to select a different album and load that in instead - again using ExtJs AJAX calls.

Worth a mention...

We have used a page specific CSS file for this example just in case you want to copy it, theres also a PHP script which does the server side stuff.

Please note that to save on a heap of GD learning - we used the excellent class.upload class by Colin Verot

We used...

Ext.FX : Provides useful effects to build upon.
scale -> Scales elements in specific directions with Easing as required
Ext.Element : Provides methods/functions to retrive DOM/Page elements.
get -> Pull an element from the DOM/page and work with it
Ext.Data : Provides data services
JsonStore -> Provides a store, reader and proxy to get Json Data from server side and work with it.
Ext.Ajax : Provides a simple way to make Ajax Requests
request -> Pull data from server side
Ext.DomHelper : Dom functions
append -> drop in elements after the last element inside a DOM element
Ext.DataView : Provides an interface for the template class
Ext.XTemplate : Provides methods to re-use data in conjunction with DataView

Try it out!

Albums:

The Javascript Code

// reference local blank image
//make sure YOUR path is correct!!
Ext.BLANK_IMAGE_URL = '../ext-2.0.2/resources/images/default/s.gif';

//this runs on DOM load - you can access all the good stuff now.

Ext.onReady(function() {
	 
//easy Ext examples
//by Owen Lees

//this file shows some basic ext stuff that is aimed at page level usage
//rather than at application level design, these examples could plug n play.

var tpl = new Ext.XTemplate(
		'<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
		    '<div class="thumb"><img src="{url}" title="{name}"></div>',
		    '<span class="x-editable">{shortName}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
	);

var thumbview = new Ext.DataView({
            store: store,
            tpl: tpl,
            autoHeight:true,
            multiSelect: false,
			singleSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display right now.',
            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                data.sizeString = Ext.util.Format.fileSize(data.size);
                data.dateString = data.lastmod.format("m/d/Y g:i a");
                return data;
            }
        })

});	
});

The PHP Code

//image gallery script as backend for simple gallery

//************ Please note:**********************
//* This script is intended as example only		*
//* It is recommended to test first in your own	*
//* server environment!							*
//* 											*
//* We make 3 images because its a neat way to	*
//* control things and to save bandwidth later.	*
//*												*
//* You can run this script to do maintenance	*
//* using the url parameter 'action=maint'		*
//*	each time you upload more images.			*
//* 											*
//* Once the images are uploaded you can safely	*
//* delete them - they are not required again.	*
//***********************************************

// ******* USER DEFINED OPTIONS START HERE **********

// Define the config options here..
$imgDir = 'images/albums/'; //the root directory for the albums  ** from this script ** (not from root)
$defdir = "Car-351-1"; //the default album to use

$def_max_x = 400; //maximum width of large image
$def_max_y = 300; //maximum height of large image

$def_max_x_supersize = 800; //max width supersize image
$def_max_y_supersize = 600; //max height supersize image

set_time_limit(300); //you may need to set this to something different if you have timeout issues.

// ******* END USER DEFINED OPTIONS  **********

//using the excellent class.upload.php script by Colin Verot
//get it from : http://www.verot.net
//for commerical use you must purchase a appropriate license

require_once('classes/class.upload_0.25/class.upload.php');

if(isset($_REQUEST['action'])){

//test for the required action
switch($_REQUEST['action']){
	
	case 'showAlbum' :
	
	if(!isset($_REQUEST['album']) || $_REQUEST['album'] == ""){
		//no album sent - use default
		$albumdir = $defdir;
	}else{
		//use one sent in POST
		$albumdir = $_REQUEST['album'];
	}
	
		//set up images array
		$images = array();
		
		$d = dir($imgDir.$albumdir.'/thumbs') or die("Wrong path: $image_file_path");
			while (false !== ($entry = $d->read())) {
				if($entry != '.' && $entry != '..' && !is_dir($imgDir.$albumdir."/".$entry)) {
								
				//once we are here we can pull the thumbnail from the dir and send to our app
				$size = filesize($imgDir.$albumdir."/thumbs/".$entry);
				$lastmod = filemtime($imgDir.$albumdir."/thumbs/".$entry)*1000;
				$images[] = array('name'=>$entry, 'size'=>$size,'lastmod'=>$lastmod, 'url'=>$imgDir.$albumdir."/thumbs/".$entry, 'imgDir' => $imgDir,'albumname' => $albumdir);

}
			}
		$d->close();

//$o = array('images'=>$images);
		//echo json_encode($o);
		echo "{ \"images\" : ".json_encode($images)."}";

break; //end showAlbum
	
	//provide album names (dir names)
	case 'getAlbums' :
		$records = 0;
		$d = dir($imgDir) or die("Wrong path: $image_file_path");
			while (false !== ($entry = $d->read())) {
			if($entry != '.' && $entry != '..'){
			$Folders[] = $entry;
			$records++;
			}
			}
			$d->close();
	
	//$o = array('folders'=>$Folders);
	echo "{\"records\" : {$records}, \"folders\" : ".json_encode($Folders)."}";

break; //end getAlbums
	
	//enter maintenance mode
	case 'maint' :
	ob_start();
	echo "Entering Maintenance Mode...";
	ob_flush();
	
	if ($handlescan = opendir($imgDir)) {}
	//scan the album dirs 
	
	//make an empty array
	$Folders = array();
	
	$d = dir($imgDir) or die("Wrong path: $image_file_path");
			while (false !== ($entry = $d->read())) {
			if($entry != '.' && $entry != '..')
			$Folders[] = $entry;
			}
			$d->close();
			
	if(count($Folders) > 0) {
	//we now have an array of albums so we can now iterate through them.
	//and yes its deliberate counting the array - we don't want an error here if nothing in array
	
	echo "Found the following Albums: <br>";
	ob_flush();
	foreach($Folders as $foldername){
		//test for a folder called 'original'
		echo $foldername." --> <br>";
		ob_flush();
		$d = dir($imgDir.$foldername) or die("Wrong path: $image_file_path");
			while (false !== ($entry = $d->read())) {
			if($entry != '.' && $entry != '..' && is_dir($imgDir.$foldername."/".$entry) && $entry == 'original') {
	
	if ($handle = opendir($imgDir.$foldername."/original")) {
        // Loop through the directory and get commonly used image files (.jpeg, .jpg, .gif, .png)
        while (false !== ($file = readdir($handle))) {
            if (eregi('\.jpg|\.jpeg|\.gif|\.png', $file)) {
				
				$file_handle = new upload($imgDir.$foldername."/original/".$file);
				
				//check to see if theres a super sized image already?
				if(!file_exists($imgDir.$foldername."/supersized/".$file)){
					
					//no? ok size it and save it
					
					$file_handle->auto_create_dir =true;
					$file_handle->dir_auto_chmod =true;
					$file_handle->image_resize = true;
					$file_handle->image_x = 800;
					$file_handle->image_y = 600;
					$file_handle->image_ratio = true;
					$file_handle->image_ratio_no_zoom_in = true;
					
					//process sized image
					$file_handle->process($imgDir.$foldername."/supersized/");
						if($file_handle->processed){
							//uncomment to test
							echo $file." Saved Supersized Image: {$file}. <br>";
						}else{
							//uncomment to test
							//echo "Error ->".$file_handle->error;
						}
						ob_flush();
				}
				
				
				//check to see if theres a sized image already?
				if(!file_exists($imgDir.$foldername."/sized/".$file)){
					
					//no? ok size it and save it
					//$file_handle = new upload($imgDir.$foldername."/original/".$file);
					$file_handle->auto_create_dir =true;
					$file_handle->dir_auto_chmod =true;
					$file_handle->image_resize = true;
					$file_handle->image_x = 400;
					$file_handle->image_y = 300;
					$file_handle->image_ratio = true;
					$file_handle->image_ratio_no_zoom_in = true;
					
					//process sized image
					$file_handle->process($imgDir.$foldername."/sized/");
						if($file_handle->processed){
							//uncomment to test
							echo $file." Saved Album Image: {$file}. <br>";
						}else{
							//uncomment to test
							//echo "Error ->".$file_handle->error;
						}
						ob_flush();
				}
				
				//and also a thumbnail?
				if(!file_exists($imgDir.$foldername."/thumbs/".$file)){
					
					//no? ok size it and save it
					//$file_handle = new upload($imgDir.$foldername."/original/".$file);
					$file_handle->auto_create_dir = true;
					$file_handle->dir_auto_chmod = true;
					$file_handle->image_resize = true;
					$file_handle->image_x = 120;
					$file_handle->image_y = 90;
					$file_handle->image_ratio = true;
					$file_handle->image_ratio_no_zoom_in = true;
					
					//process sized image
					$file_handle->process($imgDir.$foldername."/thumbs/");
						if($file_handle->processed){
							//uncomment to test
							echo $file." Saved Thumbnail Image: {$file}. <br>";
						}else{
							//uncomment to test
							//echo "Error ->".$file_handle->error;
						}
						ob_flush();
				}

}
        }
        closedir($handle); // Close our file handle.
    }
	} //end if name = original
	} //end while loop in dor
	$d->close();
	} //end album loop
	} //end check for albums
	
	break; //end maint mode
}	
}

The CSS Code

#gallcont {
	background: url(/images/faux.gif);
	background-repeat: repeat-y;
	min-height:100%;
}
#big_image {
	background-color: #CCCCCC;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 115px;
	padding: 5px;
	padding-top: 15px;
	height: 310px;
}
#big_image_name {
	background-color: #CCCCCC;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 115px;
	padding: 1px;
}
#gallery_container {
	padding: 5px;
	border: 1px dashed #999999;
	width: 640px;
}
#thumbnails {
	padding: 5px;
	background-color: #E6E6E6;
	font-size: 10px;
	margin-left: 115px;
}
#albums{
	float: left;
	width: 92px;
	padding: 5px;
}
#thumbnails .x-panel-body{
	background: white;
	font: 11px Arial, Helvetica, sans-serif;
}
#thumbnails .thumb{
	background: #dddddd;
	padding: 3px;
}
#thumbnails .thumb img{
	height: 60px;
	width: 80px;
}
#thumbnails .thumb-wrap{
	float: left;
	margin: 4px;
	margin-right: 0;
	padding: 5px;
}
#thumbnails .thumb-wrap span{
	display: block;
	overflow: hidden;
	text-align: center;
}

#thumbnails .x-view-over{
    border:1px solid #dddddd;
    background: #efefef url(../../resources/images/default/grid/row-over.gif) repeat-x left top;
	padding: 4px;
}

#thumbnails .x-view-selected{
	background: #eff5fb url(images/selected.gif) no-repeat right bottom;
	border:1px solid #99bbe8;
	padding: 4px;
}
#thumbnails .x-view-selected .thumb{
	background:transparent;
}

#thumbnails .loading-indicator {
	font-size:11px;
	background-image:url('../../resources/images/default/grid/loading.gif');
	background-repeat: no-repeat;
	background-position: left;
	padding-left:20px;
	margin:10px;
}
#albums a {
	color: #1961AA;
	text-decoration: none; 
}
#albums a:hover {
	color: #78913a;
}
#albums .selectedalbum {
	border: 1px #78913a solid;
}