[*droplet*] microGallery (place Gallery anywhere)

[noname8]

This is awesome!!

Used with colorbox this just rules!

Can I somehow change the default text [[microgallery]]
to

[[microGallery?folder=cars&group=cslide]]

?

[Stefek]

Hello MacSmet, yes it can be done.
Will have a look into this.

DJKat,
I will have a closer look into your suggestion, but can't promise to implement this within the next days.

Regards,
Stefek

[DJKat]

Actually I have no idea how to do this...

But when I put it on a page for testing with pics numbered 1 to 35, it shows me pic #20, #31, #33, #26...
Therefor I think it would be great to have the opportunity to tell the gallery to sort them by name.

Dany

[macsmet]

Hi there,

I use the microGallery a lot because it is so very easy to use!
Lately I noticed that microGallery also shows the other files that is inside the folder.
It doesn't show a preview because these other files are no JPEG but ZIP files.
Is there a way to exclude ZIP files and/or only show JPEG files?

Greetings,

MacSmet

[Stefek]

Hello and thanks.

Do you have an idea how to implement this?

Which sorting filters to use? Name, when Uploaded, size?

Someone?

Already implemented.


Regards,
Stefek

[DJKat]

Great stuff!!! *thumbs up*

What I'm missing is a param to tell the gallery which way to sort the pics... 

Dany

[Stefek]

My plesure, my friend

Best Regards,
Stefek

[kirk]

Hi Stefek,

just great. Thank´s a lot.

Kirk

[Stefek]

Hello,

due to a request of User 'Kirk' I reworked and cleaned up the whole droplet and expanded the "docu".

I merged all Ideas into this new Version, cleaned up the code and made the error hints "multilanguage".
New Parameters in use for table display and custom css-class.

New Code in the first post:
https://forum.websitebaker.org/index.php/topic,17806.msg118063.html#msg118063

Enjoy!
Stefek

[SickBoy75]

Hi,

I added a new param 'col' to set the number of columns in default mode.

if not set, the default value for col it's 4

just this code

Code Select Expand

if (isset($col)){ $picsperrow = $col; } else { $picsperrow = 4;} // Set the amount of pics per row


[snark]

updated the browser and I will now keep my big mouth shut ...

[macsmet]

@snoork: you must be doing something wrong because it works just fine here with Camino 2.02 on OSX 6.3.

greetings!

[snark]

not that it is of great importance but it does not run under camino / mac

[Harry P.]

Ah, now it's working... perfect - thanks!

[Stefek]

Anything else to adjust?

No, just leave the &display parameter. (don't use it at all.)

Example:
[[microGallery?folder=cars]]

Regards,
Stefek

[Harry P.]

Thanks, Stefek!  


EDIT: Just tried the table version, but images still show up in one column (like with the original droplet).

Anything else to adjust?

[Stefek]

@macSmat.

I will freeze the development of this droplet for now.
GD would be possible, but it's really complicated for a droplet.
And I am using this droplet in a different way (as mentioned, only first image and the rest in a hidden div, only links).
However, I will have a look into it later. My Job doesn't allow me to be too experimental right now. ^^

@HarryP
Here's the merged droplet.

Code (microGallery_with_Tebles_as_default) Select Expand


<?php
/*

"microGallery - place Gallery anywhere"
----------------------------------------
 DROPLET for use with WebsiteBaker CMS
----------------------------------------

@Author: Christian M. Stefan (Stefek)

TODO:
1) check the code by pro coder
2) create massage if the folder is empty (small bug occurs if a empty dir is called)
3) making the costumization easier (needed?)
4) using of GD Library to create thumbs on the fly (needed?)
5) small documentation

*/


//  check if the 'folder' Flag is set in the Droplet
if (!isset($folder)):
echo "Your droplet-call is not complete, please set 'folder={path}'";
return TRUE;
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()): 
      
    // skip index files and pointers         
        if (preg_match("~.php~", $image_file) || substr($image_file, 0, 1) == "."):
         continue;
        endif;      
       
   // convert filenames into Titles    
    $img_title = str_replace(array(".png", ".jpg", ".gif", ".jpeg"), "", $image_file);
    $img_title = str_replace("_", " ", $img_title); 
   
    if (!file_exists($img_dir.$image_file)) :
     echo 'directory empty';
    return TRUE;
    endif;
   
    /**
     * 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 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."' title='".$img_title."' style='width:auto; height:120px'/></a>"; 
         
   endif;
   // <!------
   
endwhile;

}
// <------- directory exists
else {
// directory doesn't exists --->
echo "Directory (<tt> '.$img_dir.' </tt>) doesn't exist";
return TRUE;
     }    


/**
* DISPLAY microGallery
*/
if (isset($display)):

switch ($display):
case 'first':
$images =  $image_show[0];
break;

case 'notfirst':
array_shift($image_array); //skip first Element of Array
$images = '<ul style="display:none">';
foreach ($image_array as $image){     
     $images .= '<li>'.$image.'</li>';
}
$images .= '</ul>';
break;

case 'all':
$images = '<ul>';
foreach ($image_show as $image){     
     $images .= '<li>'.$image.'</li>';
}
$images .= '</ul>';
break;
case 'firstlink':
$images =  $linkonly[0];
break;

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

return $images;

else: 
/*
-------------| output microGallery in table DEFAULT, if &display Flag isn't set
*/
 
$picsperrow = 4; // Set the amount of pics per row
$images = "<table><tr>";

for ($i=0; $i<count($image_show); $i++):
if (($i > 0) && ($i % $picsperrow == 0))
$images .= "</tr><tr>";
$images .= "<td>".$image_show[$i]."</td>";

endfor;

while ($i % $picsperrow > 0):
$images .= "<td>&nbsp;</td>";
$i++;
endwhile;

$images .= "</tr></table>";

return $images; 
endif;



Regards,
Stefek

[Harry P.]

Could you guys please post the complete table version? Can't get the patches working... thanks! 

[macsmet]

@Stefek: You're amazing!
Thanks. This is one of the best droplets ever!!!!

One thing missing.Like Maverick said: thumbnails should be generated by GD (if possible)


Greetings,

MacSmet

[Stefek]

Hello MacSmet,

the following code should work for you.
Just replace between "else:" / "endif;"

Code Select Expand


<?php
/*
 -------------| output microGallery in table
 */
 
$picsperrow = 4; // Set the amount of pics per row
$images = "<table><tr>";

for ($i=0; $i<count($image_show); $i++):
if (($i > 0) && ($i % $picsperrow == 0))
$images .= "</tr><tr>";
$images .= "<td>".$image_show[$i]."</td>";

endfor;

while ($i % $picsperrow > 0):
$images .= "<td>&nbsp;</td>";
$i++;
endwhile;

$images .= "</tr></table>";

return $images; 


Regards,
Stefek

[macsmet]

Yes my solution is to limt the with of the table to 500px.
I found a solution in another imagegallery so maybe you can use this:

Code Select Expand

// count elements in array
$img_count = count($img_list);
$img_total = count($img_list);

//figure out how many pages are needed to display all the thumbs
$page_count =  ceil($img_count / ($img_rows * $img_columns));

if(is_dir($WB_PATH.$gallery_path)) {
// start outputting content
echo '<table class="lb" cellspacing="4">' . "\n";
// Check which image to start with on the page
if (isset($_GET['img_count'])) {
$img_count = $_GET['img_count'];
}

// Set count to zero for initial view
if (!isset($_GET['img_count'])) {
$img_count = 0;

}

$row_count = 1;
$col_count = 1;

while($row_count <= $img_rows) {

echo '<tr class="lb" >';

while ($col_count <= $img_columns) {
echo '<td align="center" style="border:solid 0px #000">';
if ($img_total > $img_count){
echo '<a href="' . WB_URL . $gallery_path . $img_list[$img_count] . '" class="lb_image_link" rel="lightbox[' . $gallery_name . ']" title="' . $gallery_name . '"><img class="lb_image" src="' . WB_URL . $thumb_path . $img_list[$img_count] . '" border="0" /></a>';
}
echo '</td>' . "\n";
$col_count++;
$img_count++;
}
echo "</tr>\n";
$col_count = 1;
$row_count++;
}

echo '</table>';


Greetings,

MacSmet

[Stefek]

Hello MacSmet,
as I can see by the code, there is some problem with nesting the table data cells (td's) and table rows, right?
I will think it over next days.
A kind of controller would be helpful, in order to control the amount of td's per row.

Let me see, if I'll find some time next  days.
Or maybe some one else will have fun to extend the droplet.
We will see.

Regards,
Stefek

[macsmet]

@Stefek:
Thanks for all your suggestions!
I played with adding colums and rows for the images and the following works for me (it's not perfect yet):

Code Select Expand

$images = '<table border="0" cellpadding="0" cellspacing="0" width="500"><tr><td width="120">';
foreach ($image_show as $image){    
    $images .= ''.$image.'';
}

$images .= '</td></tr></table>';

return $images;


Maybe you can add this to your droplet.

Greetings,

MacSmet

[Stefek]

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

Hello MacSmet,
the way to make use of the ColorBox Slideshow is quite easy.

Change (in Droplet Code) the line $image_show[] to: $image_show[] = "<a href='".$link."' rel='cslide_".$group."' title='".$img_title."'>
in the Java Script add the asterisk * in the selector, like this$("a[rel*='cslide']").colorbox({  

now you will be able to add any group name you want:
&group=1 will work but, &group=birds or &group=books will work also and will make a slideshow group for every single droplet call.

Regards,
Stefek

[maverik]

the only trick with colorbox i know is to make more than one rel groups.

i mean:

rel=cslide1
rel=cslide2

and so on.

in frontend.js you duplicate

Code Select Expand


$("a[rel='cslide1']").colorbox({ .....code for slideshow
$("a[rel='cslide2']").colorbox({ .....code for slideshow



i hope you understand my some brocken english