Revision history for BigImageGalleryActionTemplate


Revision [19368]

Last edited on 2008-01-28 00:15:26 by AdaAn [Modified links pointing to docs server]

No Differences

Revision [17591]

Edited on 2007-10-02 16:01:06 by AdaAn [Modified links pointing to docs server]
Additions:
It is possible placing vertical images in your directory, but it don't look nice.//
Deletions:
At this time it is possible but don't look nice placing vertical images in your directory.//


Revision [17590]

Edited on 2007-10-02 15:59:56 by AdaAn [Modified links pointing to docs server]
Additions:
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"}}""


Revision [17589]

Edited on 2007-10-02 15:50:59 by AdaAn [Modified links pointing to docs server]
Additions:
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
Deletions:
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.


Revision [17588]

Edited on 2007-10-02 15:49:16 by AdaAn [Modified links pointing to docs server]
Additions:
~-factor (default:5)
~-space (default:2)
~-size (default 100)
Deletions:
~-factor (optional)
~-space
~-size


Revision [17587]

Edited on 2007-10-02 15:48:22 by AdaAn [Modified links pointing to docs server]
Additions:
~~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
Place this code in actions/**bigimagegallery.php**
put this in your .css file
%%(css)
.thumbs_area {
text-align: left;
margin-left: 15px;
padding: 4px;
background: #EEE;
border: 1px solid #CCC;
.thumbs_main {
float: left;
text-align: left;
Deletions:
~~the directory path (relative to wikka.php) where all the images are placed
**bigimagegallery.php**


Revision [17586]

Edited on 2007-10-02 15:43:31 by AdaAn [Modified links pointing to docs server]
Additions:
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.
//**Note**
At this time it is possible but don't look nice placing vertical images in your directory.//
Deletions:
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.


Revision [17585]

Edited on 2007-10-02 15:40:06 by AdaAn [Modified links pointing to docs server]
Additions:
**bigimagegallery.php**
%%(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"';
}
?>
%%


Revision [17584]

Edited on 2007-10-02 15:36:09 by AdaAn [Modified links pointing to docs server]
Additions:
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
Deletions:
//This page is a **template**. It belongs to CategoryTemplate (which contains more handy templates). To create an action development page, [[http://wikka.jsnx.com/ActionTemplate/clone clone this page]] to a page called **xxxxxAction** (where xxxxx is the (capitalized) name of the action), replace all occurrences of 'xxxxx' with the name of the action and replace this paragraph with the actual content.//


Revision [17583]

Edited on 2007-10-02 15:21:32 by AdaAn [Modified links pointing to docs server]
Additions:
=====BigImageGallery Action=====
Documentation: xxxxxActionInfo.>>This is the development page for the BigImageGallery action.::c::
Deletions:
=====xxxxx Action=====
Documentation: xxxxxActionInfo.>>This is the development page for the xxxxx action.::c::


Revision [17582]

The oldest known version of this page was created on 2007-10-02 15:20:37 by AdaAn [Modified links pointing to docs server]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki