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:
using it:
- grap code and place it in actions/bigimagegallery.php
- grab the code for your css file
- put images in a directory (e.g. "images/mydir/")
- put thumbnails in a subdir named thumbs (e.g. "images/mydir/thumbs/")
- 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.
- 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
//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"';
}
?>
put this in your .css file
.thumbs_area {
text-align: left;
margin-left: 15px;
padding: 4px;
background: #EEE;
border: 1px solid #CCC;
}
.thumbs_main {
float: left;
text-align: left;
}
text-align: left;
margin-left: 15px;
padding: 4px;
background: #EEE;
border: 1px solid #CCC;
}
.thumbs_main {
float: left;
text-align: left;
}
CategoryDevelopmentActions CategoryUserContributions