BigImageGallery Action


See also:
Documentation: xxxxxActionInfo.
This is the development page for the 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.

You can have parameters:
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
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
the space around all images in px
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

//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;
}






CategoryDevelopmentActions
There are no comments on this page.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki