[*droplet*] microGallery (place Gallery anywhere)

[Stefek]

Hello Maverik,

yes it works with the slideshow, but unfortunatly only then, if you have only one Group (and the droplet is used only once).

On the page where I make use of this roplet, I am not using the "thumbs" at all.
Only links.
And only to the first picture of the group (the others are hidden with css).

So, when I have then 3 different Galleries with links to them, they all will mess up together using the slideshow.

Link1
Link2
Link3

Any of them should be handled as a unique set (group) of images.
I wasn't able to find the right trick (if it exisist) on developers site.

If you know and can share would be mostly appreciated.

Kind regards,
Stefek

[maverik]

if you use my colorbox snippet slideshow will go with

Code Select Expand

Make Array of images for the microGallery ----->
    */
    if (file_exists($img_dir.$image_file)):    
    $link = $img_url.$image_file;    
    $group = isset($group) ? $group : ''; //ignore $group if &group Parameter isn't set in Droplet    
            $image_array[] = "<a rel='cslide' href='".$link."'  title='".$img_title."'>file'".$img_title."'</a>";
            $linkonly[] = $link;
            $image_show[] = "<a rel='cslide' href='".$link."' title='".$img_title."'>
    <img src='".$link."' title='".$img_title."' style='width:auto; height:120px'/></a>";
       
   endif;

i dont now if there is a problem with $group, i have deletet it and it works.

but i think it isnt good to load the great image and make it with height 120 to a thumbnail >> loadingtime !

it works as slideshow here http://wbsvn.developer-base.de/pages/micro.php

[macsmet]

@Stefek:
I figured it out myself just one hour ago because Martin's suggestion didn't work.
Thanks anyway!

Now working on the columns and rows.

Greetings,

MacSmet

[Stefek]

@MacSmet

I don't like the images to be listed this way. I like it more with colums and rows and will try to add that.

Ye, cool.
Just work it out.

And is there a way to add slideshow to the ColorBox?

I am not sure of that.
Please check the developers Site.

The Droplet just gets the images from the directories and has no influence on the JS Files you use.


@HerryP
Cool.
I am glad you figured it out by yourself.

Regards,
Stefek

Happy Easter!

[Stefek]

I think the 'display:all' should be default (without extra code).  Is that possible?

hi macsmet,

just copy the code from the case "all":

Code Select Expand

$images = '<ul>';
foreach ($image_show as $image){    
    $images .= '<li>'.$image.'</li>';
}
$images .= '</ul>';

replace it with the the default case:

Code Select Expand

default:
$images ='"&display" parameter is wrong by <tt>'.$folder.'</tt>, please correct';
endswitch;

then you got the "all" param as default...

regards martin

Hello Martin,
this won't work.
It can't.

Because, in this case the default switch is meant to catch cases where the user typed in a name which doesn't exist (example, he writes: &display=wholedirectory or  &display=allll - both of them are not defined), so the default switch is called and returns &display parameter is wrong by yourfolder/bladibla, please correct.

Hello MacSmat,

I think the 'display:all' should be default (without extra code).  Is that possible?

I don't think, that this should be default.
But if you want to make it default, you well need to rewrite/change the "else condition" after the switch.

Find the // &all isn't set comment and the following code :

Code Select Expand


else:
// &all isn't set
echo "'&all' isn't set";
return TRUE;
endif;

and replace it with:

Code Select Expand


else:
/*  &all isn't set
echo "'&all' isn't set";
return TRUE;
*/
$images = '<ul>';
foreach ($image_show as $image){    
    $images .= '<li>'.$image.'</li>';
}
$images .= '</ul>';
return $images;
endif;


Regards,
Stefek

[Harry P.]

As for using FancyBox, I found the answer:

Besides using class= 'pic_fb', one also needs to remove rel='lightbox[".$group."]'

Then the fancy popup display works just fine!

[Stefek]

Hello guys, thanks for testing and feedback.

Unfortunately I have no time these days to give further support for it.
Try to figure it out for yourself.

I will come back to this thread in the middle of the week.

Kind regards,
Stefek

[mr-fan]

I think the 'display:all' should be default (without extra code).  Is that possible?

hi macsmet,

just copy the code from the case "all":

Code Select Expand

$images = '<ul>';
foreach ($image_show as $image){    
    $images .= '<li>'.$image.'</li>';
}
$images .= '</ul>';

replace it with the the default case:

Code Select Expand

default:
$images ='"&display" parameter is wrong by <tt>'.$folder.'</tt>, please correct';
endswitch;

then you got the "all" param as default...

regards martin

[Harry P.]

Hi Stefek,

quite handy, that droplet!

Question: I tried to replace class='colorbox' with class='pic_fb' for FancyBox

I have the FancyBox module installed and the init code for it in my template's index.php

Yet it doesn't seem to work to simply replace? the class definition?

[macsmet]

Hi Stefek,

I like it very much and makes adding photogallery's so much simpler.
I also like the ColorBox integration. I didn't test all the options yet but will in a few days.

I think the 'display:all' should be default (without extra code).  Is that possible?
I don't like the images to be listed this way. I like it more with colums and rows and will try to add that.
And is there a way to add slideshow to the ColorBox?

Keep up the good work!

Greetings,

MacSmet

[Stefek]

Welcome to the microGallery Droplet.

You may use this Droplet to place a (small)Gallery where ever you like (NEWS Posts etc.).
This droplet, of course, doesn't replace a general image-gallery-module, but it comes in handy if you need to display some pictures from a media-directory without to much effort.

Edit: I'm placing a recent version in this post (see code).
Thanks to all for further suggestions.
Thanks to User 'macsmet' for his initial code for Table Display.
Thanks to User 'DarkViper' for his explanation of the procedures the Droplet Engine uses (explanations & hints of this kind allways appraciated).
Thanks to User 'iradj' for reporting a bug.
Thanks to User 'Jamesypoo' for his request on sorting functionality (ASC|DESC|RANDOM).

I merged all those Ideas into this new Version, cleaned up the code and made the error hints "multilanguage".
New Parameters in use, see list below.

Important: The microGallery Droplet just gets the images from the directories and has no influence on the JS Files you use. If you want to use microGallery with a specialized JS, you will need to include it yourself. The microGallery will then deliver the images you specified in the droplet-call.

Description: Place a microGallery anywhere

Code ( Droplet Code ) Select Expand

<?php
/*
"microGallery - place Gallery anywhere"
----------------------------------------
@Author: Christian M. Stefan (Stefek) <stefek@designthings.de>
*/

global $MESSAGE;
$output_value ="";
//  check if the 'folder' Parameter is set in the Droplet
if (!isset($folder)):
$output_value = $MESSAGE['MOD_FORM']['REQUIRED_FIELDS'].":<b>microGallery call =></b> <tt>folder={path/to/the/folder}</tt>";
endif;

$img_dir = WB_PATH.MEDIA_DIRECTORY.'/'.$folder.'/';
$img_url = WB_URL.MEDIA_DIRECTORY.'/'.$folder.'/';  

// directory exists --->
if (is_dir($img_dir)):
// open directory and go through the files
$dir = dir($img_dir);

while (FALSE !== $image_file = $dir->read()):

//use jpg, gif and png files only
if (!preg_match('/.+\.(jpeg|jpg|gif|png)$/', $image_file) || 
substr($image_file, 0, 1) == ".") 
continue;
    
   /**
    * Make Array of images for the microGallery if image files exist
    */
// convert filenames into Titles    
$img_title = str_replace(array(".png", ".jpg", ".gif", ".jpeg"), "", $image_file);
$img_title = str_replace("_", " ", $img_title); 
if (isset($img_title) && !empty($img_title)):     
    $link = $img_url.$image_file;    
    $group = isset($group) ? $group : ''; //ignore $group if &group Parameter isn't set in Droplet-Call
    $image_array[] = "<a class='colorbox' href='".$link."' rel='lightbox[".$group."]' title='".$img_title."'>file'".$img_title."'</a>";
    $linkonly[] = $link;
    $image_show[] = "<a class='colorbox' href='".$link."' rel='lightbox[".$group."]' title='".$img_title."'>
    <img src='".$link."' alt='".$img_title."' title='".$img_title."' style='width:auto; height:120px; border:0;'/></a>";
endif;
endwhile;

if(empty($image_show)): //no images in this directory
$output_value = $MESSAGE['MEDIA']['NONE_FOUND'].': (<tt> '.$img_url.' </tt>)';
return $output_value;
endif;

/**
* DISPLAY microGallery
*/
$display =  (isset($display)) ? $display : 'table';
$cssclass = (isset($cssclass)) ? ' class="'.$cssclass.'"' : ''; //&cssclass=yourclass
// check sorting
if((isset($sort) && $display == 'table') || (isset($sort) && $display == 'all')){
if($sort=='ASC') asort($image_show);
if($sort=='DESC') rsort($image_show);
if($sort=='RANDOM') shuffle($image_show);
}
switch ($display):
case 'table': //&display=table OR not-set at all
$picsperrow = (isset($cols)) ? $cols : 4; // Set the amount of pics per row
$output_value = "<table".$cssclass."><tr>";
for ($i=0; $i<count($image_show); $i++):
if (($i > 0) && ($i % $picsperrow == 0))
$output_value .= "</tr><tr>";
$output_value .= "<td>".$image_show[$i]."</td>";
endfor;
while ($i % $picsperrow > 0):
$output_value .= "<td>&nbsp;</td>";
$i++;
endwhile;
$output_value .= "</tr></table>";
break;
case 'all':  //&display=all
if(isset($sort) && $sort=='ASC') asort($image_show);
if(isset($sort) && $sort=='DESC') rsort($image_show);
if(isset($sort) && $sort=='RANDOM') shuffle($image_show);
sort($image_show);
$output_value = "<ul".$cssclass.">";
foreach ($image_show as $image){     
    $output_value .= '<li>'.$image.'</li>';
}
$output_value .= '</ul>';
break;
case 'first':  //&display=first
$output_value =  $image_show[0];
break;
case 'notfirst': //&display=notfirst 
array_shift($image_array); //skip first Element of Array
$output_value = '<ul style="display:none">';
foreach ($image_array as $image){     
    $output_value .= '<li>'.$image.'</li>';
}
$output_value .= '</ul>';
break;

case 'firstlink': //&display=firstlink
$output_value =  $linkonly[0];
break;
endswitch;

// <-------end: if directory exists
else:
// directory doesn't exists --->
$output_value = $MESSAGE['MEDIA']['DIR_DOES_NOT_EXIST'].': (<tt> '.$img_url.' </tt>)';
endif;    
return $output_value;


Comment:Use the Droplet as follows:
[[microGallery?folder={path_to_image_directory}&display={first, notfirst, all, firstlink}&group={any_group_name}]]

Explanation of all Parameters.

?folder Parameter:
^{(this should be your firs parameter in the droplet call. Note the '?' (quotation mark) for the first parameter whereas '&' is used for all following settings)}

What you need to do is simply install the droplet below and then use (example):
[[microGallery?folder=flowers]]
Be sure the folder 'flowers' exists in your media directory and has images in it.

You can also use deeper directories like this:
[[microGallery?folder=cars/german/oldtimer/borgward&display=all]]

Note: the starting point for your galleries is MEDIA_DIRECTORY/
If the specified folder is empty or doesn't exists you will get a massage in frontend.

Further Settings:

&display Parameters:

• first: will display the first image in the directory only (as a scaled thumbnail)
  
• notfirst: will place all image links except the first one in a hidden div (style: display:none;)
  
• all: will display all images of the directory as scaled thumbnails
  
• firstlink: wil place only the path of the first image in the directory

New Parameters (for table):

• table: wil place only the path of the first image in the directory (experimental for use with chicos Members Module)
  
  
  
  • Use the &cols Parameter to change the amount of table-columns. Example &cols=3
    
  ...
  NOTE: you can leave the &display Parameter empty. Default is set to 'table' with 4 columns.
  (leaving it empty will result in the same as &display=table&cols=4)

&cssclass Parameter:
Now you can use a custom class for the <ul> or <table> tag.
This may be of some importance to you due to your template stylesheet.

• Use the &cssclass Parameters. Example: &cssclass=microgallery
  

&group Parameter:

Set what ever you like. This is important for multiple microGalleries on the same page only (if you use ColorBox or a simmilar JS Lightbox)

&sort Parameter:

Sort ascending, descending or random.
Use:
&sort=ASC
&sort=DESC
&sort=RANDOM
(uppercase)


Enjoy!
Any feedback  welcome.


Regards,
Stefek

[/list]