Author Topic: REQ: droplet for fading slideshow  (Read 8069 times)

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
REQ: droplet for fading slideshow
« on: May 19, 2011, 06:11:53 PM »
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 http://www.websitebaker2.org/forum/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]]
« Last Edit: May 19, 2011, 06:15:11 PM by Argos »
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: REQ: droplet for fading slideshow
« Reply #1 on: May 19, 2011, 06:42:44 PM »
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
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline pcwacht

  • Posts: 2923
  • Gender: Male
    • Dutch ICT info
Re: REQ: droplet for fading slideshow
« Reply #2 on: May 19, 2011, 07:18:29 PM »
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?

http://www.ictwacht.nl = Dutch ICT info
http://www.pcwacht.nl = My first
both still work in progress, since years.....

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: REQ: droplet for fading slideshow
« Reply #3 on: May 19, 2011, 11:06:01 PM »
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.
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: REQ: droplet for fading slideshow
« Reply #4 on: May 19, 2011, 11:39:30 PM »
Hallo Jurgen,
I will have a look at this tomorrow.

Kind regards,
Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
[droplet] [[slideshow?folder=my_folder&w=155&h=200&class=myclass]]
« Reply #5 on: May 20, 2011, 02:10:58 PM »
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_file01) == "."
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
« Last Edit: May 20, 2011, 02:17:39 PM by Stefek »
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: REQ: droplet for fading slideshow
« Reply #6 on: May 20, 2011, 02:26:39 PM »
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/.
« Last Edit: May 20, 2011, 02:41:54 PM by Argos »
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: REQ: droplet for fading slideshow
« Reply #7 on: May 20, 2011, 02:37:12 PM »
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
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: REQ: droplet for fading slideshow
« Reply #8 on: May 20, 2011, 02:42:30 PM »
OK, added the alt tag to the code above. Just a few characters  :-D
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline maverik

  • Posts: 1572
  • Gender: Male
  • ..:: viva los tioz ::..
Re: REQ: droplet for fading slideshow
« Reply #9 on: May 20, 2011, 03:07:13 PM »
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
« Last Edit: May 20, 2011, 03:12:52 PM by maverik »

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: REQ: droplet for fading slideshow
« Reply #10 on: May 20, 2011, 03:25:57 PM »
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
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline maverik

  • Posts: 1572
  • Gender: Male
  • ..:: viva los tioz ::..
Re: REQ: droplet for fading slideshow
« Reply #11 on: May 20, 2011, 03:31:19 PM »
scripts will be loadet but

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

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: REQ: droplet for fading slideshow
« Reply #12 on: May 20, 2011, 03:34:40 PM »
OK, thanks.

Regards,
Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: REQ: droplet for fading slideshow
« Reply #13 on: May 20, 2011, 03:36:02 PM »
You need to load http://malsup.com/jquery/cycle/ too.
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline maverik

  • Posts: 1572
  • Gender: Male
  • ..:: viva los tioz ::..
Re: REQ: droplet for fading slideshow
« Reply #14 on: May 20, 2011, 03:43:52 PM »
read post above and you will see that i load cycle, the test was with $getScript with insert it works like a charm

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: REQ: droplet for fading slideshow
« Reply #15 on: May 20, 2011, 03:54:37 PM »
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline maverik

  • Posts: 1572
  • Gender: Male
  • ..:: viva los tioz ::..
Re: REQ: droplet for fading slideshow
« Reply #16 on: May 20, 2011, 03:59:35 PM »
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'
        });                       
}         
             
});
    }
});   

« Last Edit: May 20, 2011, 04:01:45 PM by maverik »

Offline maverik

  • Posts: 1572
  • Gender: Male
  • ..:: viva los tioz ::..
Re: REQ: droplet for fading slideshow
« Reply #17 on: May 20, 2011, 04:27:28 PM »
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

Offline sky writer

  • Posts: 926
Re: REQ: droplet for fading slideshow
« Reply #18 on: March 30, 2012, 03:51:35 AM »
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_file01) == "."
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?
« Last Edit: March 30, 2012, 02:42:04 PM by sky writer »

Offline sky writer

  • Posts: 926
Re: REQ: droplet for fading slideshow
« Reply #19 on: March 30, 2012, 10:55:58 PM »
I managed to get my head wrapped around this, and ended up using Argos code and jquery admin cycle-all.

Thanks!