=====""BigImageGallery"" Action=====

I searched for a simple solution for putting images into a wikki page without naming all the single images. I didn't found a approproiate solution (maybe tried not hard enough?) so I decided to make yet another image gallery :-I
This gallery shows all the images from a certain directory as thumbnails with a main area to see the clicked big image. 
It starts with a "main" image, something big enough to see the content and places all the thumbnails from a subdir around the big image. Clicking a thumb will display the big-brother image of this thumbnail in the main image area.

Parameter:
~-url    (mandatory)
~~the directory path (relative to wikka.php) where all the images are placed. **Note:** In order to show the thumbnails you image directory have to have a subdir called "thumbs" with the thumbnail images. All the thumbs should have the same names as their big brothers
~-factor (default:5)
~~is the factor for size between thumbs and big image area, e.g factor="5" means that there are 5 columns of images below main image and 5 rows beside it
~-space  (default:2)
~~the space around all images in px
~-size   (default 100)
~~the vertical size of the thumbs, that means that this param together with factor defines all the geometry of your gallery page


**That's how it looks like:**

{{image url="http://www.kitahoechstestrasse.de/wikiexample/wikiexample.jpg"}}



using it:
	1) grap code and place it in //actions/bigimagegallery.php//
	1) grab the code for your css file
	1) put images in a directory (e.g. "images/mydir/")
	1) put thumbnails in a subdir named thumbs (e.g. "images/mydir/thumbs/")
	1) put a "loading.gif" image in your "images/" directory. This is needed to show instant response to the user after clicking a small image while loading the big image.
	1) put action in your wiki side ""{{bigimagegallery url="images/mydir"}}""


//**Note**
It is possible placing vertical images in your directory, but it don't look nice.//

Place this code in actions/**bigimagegallery.php**
%%(php)
<?php

//defaults
if(!$factor) 
  $factor = 5;
if(!$size)  
  $v_size_thumb = 100;
else
  $v_size_thumb = $size;
if(!$space)
  $space = 2;


  $url = $this->cleanUrl(trim($url));


//"GetFileList" function "stolen" from http://wikkawiki.org/YodaHome
//snip--->
function GetFileList($dirname, $ext = FALSE) 
{ 
  if(!$ext) //EXTENSIONS OF FILE YOU WANNA SEE IN THE ARRAY 
   $ext = array("jpg", "png", "jpeg", "gif"); 
  $files = array(); 
  $dir = opendir($dirname); 
  while(false !== ($file = readdir($dir))) 
   { //GET THE FILES ACCORDING TO THE EXTENSIONS ON THE ARRAY 
	for ($i = 0; $i < count($ext); $i++) 
	 { 
	  if (eregi("\.". $ext[$i] ."$", $file)) 
	   { $files[] = $file; } 
	 } 
   } //CLOSE THE HANDLE 
  closedir($dir); //ORDER OF THE ARRAY 
  sort($files); 
  return $files; 
} 		
//<---snip


//check have url
if ($url)
{
  //and exist
  if (file_exists($url))
   {
	//get all files in this dir
	$files = GetFileList($url); 
	//function for showing new image
	echo '<SCRIPT LANGUAGE="JAVASCRIPT">
	  <!--
	  function show_image(newname){
		current_pic = newname;
		document.images["change"].src="./uploads/loading.gif";
		setTimeout("document.images[\'change\'].src=\'"+newname+"\'",500);
	  }';

	echo '</script>';


	//overall class
	echo '<div class="thumbs_area">';

	//get image sizes
	$h_size_thumb = floor($v_size_thumb/3*4);
	$v_size       = floor($v_size_thumb*$factor + (2*$factor-2)*$space);
	$h_size       = floor($h_size_thumb*$factor + (2*$factor-2)*$space);

	//the main image
	echo '<div class="thumbs_main" >';
	echo '<img hspace="'.$space.'" vspace="'.$space.'" height="'.$v_size.'" width="'.$h_size.'" src="'.$url.'/'.$files[0].'" name="change" />';
	echo '</div >';

	//the small ones
	foreach ( $files as $filename ) 
	 {
	  echo '<a href="javascript:show_image(\''.$url.'/'.$filename.'\')" >';
	  echo '<img hspace="'.$space.'" vspace="'.$space.'" height="'.$v_size_thumb.'" width="'.$h_size_thumb.'" src="'.$url.'/thumbs/'.$filename.'" />';
	  echo '</a >';
	 }
	echo '</div >';
   }
  else
   {
	echo 'invalid url:'.$url;
   }
}
else
{
  echo 'give at least the image url:url="something/worth/2/show_/dir"';
}
?>

%%

put this in your .css file
%%(css)
.thumbs_area {
	text-align: left;
	margin-left: 15px;
	padding: 4px;
	background: #EEE;
	border: 1px solid #CCC; 		
}

.thumbs_main {
	float: left;
	text-align: left;
}
%%




----
CategoryDevelopmentActions CategoryUserContributions