Wiki source for BigImageGalleryActionTemplate


Show raw source

=====BigImageGallery Action=====

>>==See also:==
Documentation: xxxxxActionInfo.>>This is the development page for the BigImageGallery action.::c::

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.

You can have parameters:
~-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 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 of your gallery


using it:
1) grap code and place it in //actions/bigimagegallery.php//
2) grab the code for your css file
3) put images in a directory (e.g. "images/mydir/")
4) put thumbnails in a subdir named thumbs (e.g. "images/mydir/thumbs/")
5) 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.
5) 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
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki