REQ: droplet for fading slideshow

[Argos]

Hi, I would like to have a droplet for showing a simple automatic slideshow with images that fade in between. Preferrably jQuery based, the cycle script on http://malsup.com/jquery/cycle/ (look at the fade demo) would be perfect. But it needs to be client-proof, my clients must add this himself by using a simple droplet. What I want is that my clients uploads a number of images into a media map (say /media/slideshow1/), and then adds a droplet referring to those images into a WYSIWYG page.

I had a look at the droplet at https://forum.WebsiteBaker.org/index.php/topic,17806.0.html , but it seems to be something different. I don't need a manual slideshow, nor a lightbox function. Maybe this droplet can be used as a basis, but I cannot work it out myself.

Example droplet what I mean: [[slideshow?folder=slideshow1]]

[Stefek]

Hello Jurgen,

this can be done with the microGallery Droplet.
The only problem where I can imagine you could run into is the handling of CSS/JS, so the additional scripts are loaded when needed.

How jQuery is implemented on this website baker installation?

You can write me a PM with a link to clients site.
I can help you tonight with this.
We may also adjust the original droplet to fit the needs.

Regards,
Stefek

[pcwacht]

am interested as well and could help if needed

for mauvevloeren.nl

John

PS Anyone know something like datagrid ( http://phpbuilder.blogspot.com )
wich can be more easely embedded within a dropletcall?

[Argos]

I just remembered I have made an example based on the cycle jquery script actually. It's really easy. In the head you put the jquery script (already present in most WB templates), and the custom script call like this:

Code: [Select]

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
timeout: 8000,
fx: 'fade',
delay: 1000,
speed: 1500,
requeueOnImageNotLoaded: true
});
});
</script>

And then just put image tags into a span or div with the class you put in the script call like above. No need for ul/li setup, just all images. So for example:

Code: [Select]

<span class="slideshow">
<img src="slide1.jpg" height="185" width="240" />
<img src="slide2.jpg" height="185" width="240" />
<img src="slide3.jpg" height="185" width="240" />
<img src="slide4.jpg" height="185" width="240" />
</span>

So really the only thing the droplet would have to do is create the div or span container with a certain class, and put the image tags in. So it must read all images from a given folder, and create the tags.

So the droplet command must have parameters for image folder, class, image width and image height.

[Stefek]

Hallo Jurgen,
I will have a look at this tomorrow.

Kind regards,
Stefek

[Stefek]

Hello Jurgen,

here we go:

Code: (slideshow) [Select]

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

$img_dir = WB_PATH.MEDIA_DIRECTORY.&#39;/&#39;.$folder.&#39;/&#39;;
$img_url = WB_URL.MEDIA_DIRECTORY.&#39;/&#39;.$folder.&#39;/&#39;;  

if (is_dir($img_dir)){
$dir = dir($img_dir);
while (FALSE !== $image_file = $dir->read()){

// use jpg, gif and png files only
if (!preg_match(&#39;/.+\.(jpeg|jpg|gif|png)$/&#39;, $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); 

$width = (isset($w))  ? $w  : 100; //&width=100
$height = (isset($h))  ? $h : 100; //&height=100

if (isset($img_title) && !empty($img_title)){     
    $img_src = $img_url.$image_file;    
    $image_show[] = &#39;<img src="&#39;.$img_src.&#39;" alt="&#39;.$img_title.&#39;" width="&#39;.$width.&#39;" height="&#39;.$height.&#39;" />&#39;;
} 
} //endwhile

if(empty($image_show)){ //no images in this directory
$output_value = $MESSAGE[&#39;MEDIA&#39;][&#39;NONE_FOUND&#39;].&#39;: (<tt> &#39;.$img_url.&#39; </tt>)&#39;;
}

// DISPLAY microGallery
$cssclass = (isset($class)) ? &#39; class="&#39;.$class.&#39;"&#39; : &#39; class="slideshow"&#39;; //&cssclass=yourclass

$output_value = "<span ".$cssclass.">";
foreach ($image_show as $image){     
$output_value .= $image;
}
$output_value .= &#39;</span>&#39;;

} else {
// directory doesn&#39;t exists --->
global $MESSAGE;
$output_value = $MESSAGE[&#39;MEDIA&#39;][&#39;DIR_DOES_NOT_EXIST&#39;].&#39;: (<tt> &#39;.$img_url.&#39; </tt>)&#39;;
} // endif (is_dir($img_dir)) 
return $output_value;  

Example usage:
[[slideshow?folder=my_folder&w=155&h=200&class=myclass]]

Single Parameters
folder: the folder the pics are coming from. Default  none, must be set
w: image widht. Default  '100'
h: image height. Default  '100'
class: span class. Default  'slideshow'

This will output the desired html.

Kind regards,
Stefek

[Argos]

Thanks Stefek! Actually I had a brainwave half an hour ago, and remembered I had seen a droplet sometime ago that almost did what I wanted: http://www.websitebakers.com/pages/droplets/official-library/images/randomorderimages.php

I took a chance and tried to edit it to get the desired results. And I just succeeded when I got the message about your post and solution. Here is my solution, it seems more compact, but maybe the experts should decide what droplet is better.

Name: SlideShow
Description: Fading jQuery slideshow with random images from a media folder
Code:

Code: [Select]

$folder = opendir(WB_PATH.MEDIA_DIRECTORY.'/'.$dir.'/.');
$names = array();
if(isset($cssclass)){$class=$cssclass;}else{$class="slideshow";}
while ($file = readdir($folder))  {
$ext=strtolower(substr($file,-4));
if ($ext==".jpg"||$ext==".gif"||$ext==".png"){
$names[count($names)] = $file;
}
}
closedir($folder);
reset(shuffle($names));
array_unshift($names," ");
$count=1;
while(($image=next($names))and(($count<=$num)or(!isset($num)))){
$name=substr($image,0,-4);
$images=$images.' <img src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/'.$image.'" alt="'.$name.'" />';

$count++;
}
return '<span class="' .$class. '">' .$images. '</span>';Info: Example = [[SlideShow?cssclass=slideshow&dir=slideshow1&num=6]]. You can leave the cssclass parameter out, because it then sets the default class "slideshow". This droplet needs jQuery and jQuery Cycle script from http://malsup.com/jquery/cycle/.

[Stefek]

Take the one you like more.

The reason why my droplet is way longer stems from the fact that the img alt attribute will be set from the images file name.

Take care for the alt attribute in your droplet code, as it is needet in order to pass the page trough the html validator.

Regards,
Stefek

[Argos]

OK, added the alt tag to the code above. Just a few characters 

[maverik]

i testet stefeks droplet and it works fine

for js i made an folder js in template folder with scripts and a  jquery_frontend.js in template dir

Code: [Select]

$(document).ready(function()
{
        if($(".slideshow").length)
    {
$.insert(WB_URL+'/templates/allcss/js/jquery.easing.js');
        $.insert(WB_URL+'/templates/allcss/js/jquery.cycle.all.min.js');

        $('.slideshow').cycle({
                                timeout: 8000,
                                fx: 'fade',
                                delay: 1000,
                                speed: 1500,
                                requeueOnImageNotLoaded: true
});         
    }
});
you can mix effects like this

Code: [Select]

$(document).ready(function()
{
        if($(".slideshow").length)
    {
$.insert(WB_URL+'/templates/allcss/js/jquery.easing.js');
        $.insert(WB_URL+'/templates/allcss/js/jquery.cycle.all.min.js');

        $('.slideshow').cycle({
                               
                                fx: 'fade, fadeZoom, slideX,  wipe, growX, shuffle'
                               
});         
    }
});
and it looks so

http://developer-base.de/delta/pages/start.php

[Stefek]

Hello Ingmar,

please couold you do me a favour and try to use

$.getScript(WB_URL+'/templates/allcss/js/jquery.easing.js');

instead of

$.insert(WB_URL+'/templates/allcss/js/jquery.easing.js');

Please just try it, and let me know if anything works as before.
(Also in the other $.insert calls.)

Regards,
Stefek

[maverik]

scripts will be loadet but

Fehler: $(".slideshow").cycle is not a function
Quelldatei: http://developer-base.de/delta/templates/allcss/jquery_frontend.js
Zeile: 10

[Stefek]

OK, thanks.

Regards,
Stefek

[Argos]

You need to load http://malsup.com/jquery/cycle/ too.

[maverik]

read post above and you will see that i load cycle, the test was with $getScript with insert it works like a charm

[Argos]

It doesn't on http://developer-base.de/delta/pages/start.php...

[maverik]

you can also work with include if include is loadet in head (wb 2.8.2, jquery with register frontend modfiles)

Code: [Select]

$(document).ready(function()
{
        if($(".slideshow").length)
    {
$.include ({'/delta/templates/allcss/js/jquery.easing.js':null})
        $.include ({'/delta/templates/allcss/js/jquery.cycle.all.min.js':function(){

        $('.slideshow').cycle({
                               
                                fx: 'fade, fadeZoom, slideX,  wipe, growX, shuffle'
        });                       
}         
             
});
    }
});   


[maverik]

with jquery_frontend.js its possible to use different effects on different sites

change class in droplet call and write the effect with class in jquery_frontend.js, it will only loadet if needet

Code: [Select]

$(document).ready(function()
{
        if($(".slideshow, .fade_slideshow").length)
    {
$.include ({'/delta/templates/allcss/js/jquery.easing.js':null})
        $.include ({'/delta/templates/allcss/js/jquery.cycle.all.min.js':function(){

        $('.slideshow').cycle({
                               
                                fx: 'all'
        });
        $('.fade_slideshow').cycle({
timeout: 8000,
fx: 'fade',
delay: 1000,
speed: 1500,
requeueOnImageNotLoaded: true
});
       
       
}         
             
});
    }
});   



http://developer-base.de/delta/pages/fade_slideshow.php

http://developer-base.de/delta/pages/all-effects-slideshow.php

[sky writer]

I am trying to figure out how you implemented this.  I can't quite understand all the parts you have to add, and where to add them.

I have created a droplet named "slideshow"
Added:

Code: [Select]

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

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

if (is_dir($img_dir)){
$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); 

$width = (isset($w))  ? $w  : 100; //&width=100
$height = (isset($h))  ? $h : 100; //&height=100

if (isset($img_title) && !empty($img_title)){     
    $img_src = $img_url.$image_file;    
    $image_show[] = '<img src="'.$img_src.'" alt="'.$img_title.'" width="'.$width.'" height="'.$height.'" />';
} 
} //endwhile

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

// DISPLAY microGallery
$cssclass = (isset($class)) ? ' class="'.$class.'"' : ' class="slideshow"'; //&cssclass=yourclass

$output_value = "<span ".$cssclass.">";
foreach ($image_show as $image){     
$output_value .= $image;
}
$output_value .= '</span>';

} else {
// directory doesn't exists --->
global $MESSAGE;
$output_value = $MESSAGE['MEDIA']['DIR_DOES_NOT_EXIST'].': (<tt> '.$img_url.' </tt>)';
} // endif (is_dir($img_dir)) 
return $output_value;  
I have added [[slideshow?folder=my_folder&w=640&h=450]] to my WYSIWYG section.

I have jquery admin installed, and have used cycle-all for a slideshow I had setup through Foldrgallery, but I am confused at how to make this droplet work.

What else do I have to do to make this slideshow work?
And does it show the images in random order?

[sky writer]

I managed to get my head wrapped around this, and ended up using Argos code and jquery admin cycle-all.

Thanks!