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:

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