Revision [17587]
This is an old revision of BigImageGalleryActionTemplate made by AdaAn on 2007-10-02 15:48:22.
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 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 (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
Note
At this time it is possible but don't look nice placing vertical images in your directory.
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