Revision [17585]
This is an old revision of BigImageGalleryActionTemplate made by AdaAn on 2007-10-02 15:40:06.
BigImageGallery Action
See also:
Documentation: xxxxxActionInfo.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.
This image gallery 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
- factor (optional)
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
the space around all images in px
- size
the vertical size of the thumbs, that means that this param together with factor defines all of your gallery
bigimagegallery.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"';
}
?>
//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"';
}
?>
CategoryDevelopmentActions
