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

Argos · « **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 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 · « **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

pcwacht · « **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?

Argos · « **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.

Stefek · « **Reply #4 on:** May 19, 2011, 11:39:30 PM »

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

Kind regards,
Stefek

Stefek · « **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_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 · « **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/.

Stefek · « **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

Argos · « **Reply #8 on:** May 20, 2011, 02:42:30 PM »

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

maverik · « **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

Stefek · « **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

maverik · « **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

Stefek · « **Reply #12 on:** May 20, 2011, 03:34:40 PM »

OK, thanks.

Regards,
Stefek

Argos · « **Reply #13 on:** May 20, 2011, 03:36:02 PM »

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

maverik · « **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

Argos · « **Reply #15 on:** May 20, 2011, 03:54:37 PM »

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

maverik · « **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'
        });                       
	}         
             
});
    } 
});

maverik · « **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

sky writer · « **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_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 · « **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!

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

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

Argos

Argos

Argos

Argos

Argos

Argos