Author Topic: SlideShow Droplet (Read 30750 times)

crnogorac081 · « **on:** July 21, 2009, 04:09:39 PM »

Hi,

Here is a small modification of Random Image Droplet, which can now be used as slideshow droplet.

Attached javascript must be included in head of template file, and droplet must be called in div id=slideshow

Code: [Select]

<div id="slideshow">  
[[SlideShow?dir=folder_name_from_media_folder]]
</div>

And here is droplet code:

Code: [Select]

$folder=opendir(WB_PATH.MEDIA_DIRECTORY.'/'.$dir.'/.'); 
$names = array();
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," ");
if(isset($width)){$width=' width="'.$width.'"';}else{$width="";}
if(isset($height)){$height=' height="'.$height.'"';}else{$height="";}
$count=1;

while(($image=next($names))and(($count<=$num)or(!isset($num)))){

if( $count ==1){$class=' class="active"';}else{$class='';}

$name=substr($image,0,-4);
if($link=="y"){$images=$images.'<a href="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/'.$image.'" target=_blank>';}
if(file_exists(WB_PATH.MEDIA_DIRECTORY.'/'.$dir.'/thumbs/'.$image.'.thumb.jpg')){
$images=$images.'<img src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/thumbs/'.$image.'.thumb.jpg" alt="'.$name.'" '.$width.$height.' border=0"/>';
}else{
$images=$images.' <img src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/'.$image.'" alt="'.$name.'" '.$width.$height.$class.' />';
}
if($link=="y"){$images=$images.'</a>';}
$count++;
}

return $images;

Droplet uses same parametars as Random Image Droplet

cheers

[gelöscht durch Administrator]

erpe0812 · « **Reply #1 on:** July 21, 2009, 04:20:33 PM »

Would be nice if you take care that this droplet can be shown at the official library.
Please use this form.

rgds

erpe

mr-fan · « **Reply #2 on:** July 21, 2009, 04:36:45 PM »

hi crnogorac081 (i always past&copy your long hard to learn nick....

)

nice work - didn't test it know (i'm on work)

but just a little hint with this you can load css or js files in the head! with the dorplet itself....

Code: [Select]

<?php //ignore
$wb_page_data = str_replace(&#39;</head>&#39;,&#39;<script type="text/javascript">your script</script><link href="&#39;.TEMPLATE_DIR.&#39;/gyour styles.css" rel="stylesheet" type="text/css" /></head>&#39;, $wb_page_data );

only kopie the js or css in your template folder...no template editing is needed - let the droplet do this work...

example i've made a greybox-droplet with a Javascript...if 2.8 is stable i will change it with a small Jquery script!
https://forum.WebsiteBaker.org/index.php/topic,12279.msg85443.html#msg85443

@erpe: deswegen kein eintrag bei AMASP...

suggestion: the div #slideshow can built in the droplet, too....so you only have to set

Code: [Select]

[[SlideShow?dir=folder_name_from_media_folder]]
by

Code: [Select]

<?php //ignore
return &#39;<div id="slideshow">&#39;.$slideshow.&#39;</div>;

regards martin

crnogorac081 · « **Reply #3 on:** July 21, 2009, 04:44:06 PM »

nice nice

I dint know that, but I keep learning php every day

)

mr-fan · « **Reply #4 on:** July 21, 2009, 04:49:52 PM »

Quote

I dint know that, but I keep learning php every day

i'm know not realy much about php.....master ruud teached me this droplet feature...to get js & css in the head section...

i keep learning- too

crnogorac081 · « **Reply #5 on:** July 21, 2009, 06:33:25 PM »

here is the latest code:

Code: [Select]

$wb_page_data = str_replace('</head>','<script language="JavaScript" type="text/javascript" src="'.TEMPLATE_DIR.'/slideshow.js"></script> </head>', $wb_page_data );

$folder=opendir(WB_PATH.MEDIA_DIRECTORY.'/'.$dir.'/.'); 
$names = array();
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," ");
if(isset($width)){$width=' width="'.$width.'"';}else{$width="";}
if(isset($height)){$height=' height="'.$height.'"';}else{$height="";}
$count=1;

while(($image=next($names))and(($count<=$num)or(!isset($num)))){

if( $count ==1){$class=' class="active"';}else{$class='';}

$name=substr($image,0,-4);
if($link=="y"){$images=$images.'<a href="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/'.$image.'" target=_blank>';}
if(file_exists(WB_PATH.MEDIA_DIRECTORY.'/'.$dir.'/thumbs/'.$image.'.thumb.jpg')){
$images=$images.'<img src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/thumbs/'.$image.'.thumb.jpg" alt="'.$name.'" '.$width.$height.' border=0"/>';
}else{
$images=$images.' <img src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/'.$image.'" alt="'.$name.'" '.$width.$height.$class.' />';
}
if($link=="y"){$images=$images.'</a>';}
$count++;
}

return '<div id="slideshow">'.$images.'</div>';

I already sent the old code to websitebakers, so just replace it with this one

And dont forget to include java script from the first post in the template folder

cheers

crnogorac081 · « **Reply #6 on:** July 22, 2009, 04:54:23 AM »

HI all, here is an updated droplet:

Code: (php) [Select]

if($scriptsin=="media"){
$wb_page_data = str_replace('</head>','<script language="JavaScript" type="text/javascript" src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/jquery-1.2.6.min.js"></script><script language="JavaScript" type="text/javascript" src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/slideshow.js"></script></head>', $wb_page_data );
} elseif ($scriptsin=="template") {
$wb_page_data = str_replace('</head>','<script language="JavaScript" type="text/javascript" src="'.TEMPLATE_DIR.'/jquery-1.2.6.min.js"></script><script language="JavaScript" type="text/javascript" src="'.TEMPLATE_DIR.'/slideshow.js"></script></head>', $wb_page_data );
}
else {
$wb_page_data = str_replace('</head>','<script language="JavaScript" type="text/javascript" src="'.TEMPLATE_DIR.'/jquery-1.2.6.min.js"></script><script language="JavaScript" type="text/javascript" src="'.TEMPLATE_DIR.'/slideshow.js"></script></head>', $wb_page_data );
}

$folder=opendir(WB_PATH.MEDIA_DIRECTORY.'/'.$dir.'/.'); 
$names = array();
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," ");
if(isset($width)){$width=' width="'.$width.'"';}else{$width="";}
if(isset($height)){$height=' height="'.$height.'"';}else{$height="";}
$count=1;

while(($image=next($names))and(($count<=$num)or(!isset($num)))){

if( $count ==1){$class=' class="active"';}else{$class='';}

$name=substr($image,0,-4);
if($link=="y"){$images=$images.'<a href="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/'.$image.'" target=_blank>';}
if(file_exists(WB_PATH.MEDIA_DIRECTORY.'/'.$dir.'/thumbs/'.$image.'.thumb.jpg')){
$images=$images.'<img src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/thumbs/'.$image.'.thumb.jpg" alt="'.$name.'" '.$width.$height.' border=0"/>';
}else{
$images=$images.' <img src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/'.$image.'" alt="'.$name.'" '.$width.$height.$class.' />';
}
if($link=="y"){$images=$images.'</a>';}
$count++;
}

return '<div id="slideshow">'.$images.'</div>';

And also CSS code ( change your pictures height and width below):

Code: (css) [Select]

#slideshow {
    position:relative;
    width:   250px;         
    height: 250px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}
#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

Also 2 java scripts are required for slideshow to work and they are attached in zip file.

I named it SlideShow, but it is legacy of RandomOrderImages droplet.

Parameter required: dir=(subfolder_in_mediaf older)

Parameters optional: width=(width) height=(height) link(y=yes) num=(number to display) this is legacy from RandomOrderImages droplet

Additional optional parametar: scriptsin=media (if you put java scripts from zip file in /media/$dir folder) or scriptsin=template (if scripts are in template folder) and if you put nothing the scripts should be in template folder (defult)

Someone please update the websitebakers site, as I sent previous incompleate version

Demo removed until further notice

cheers

[gelöscht durch Administrator]

erpe0812 · « **Reply #7 on:** July 22, 2009, 10:26:11 AM »

Hi

your demo link gives an error message:

Code: [Select]

Parse error: syntax error, unexpected T_STRING in /home/welcom/public_html/index.php on line 109
rgds

erpe

crnogorac081 · « **Reply #8 on:** July 22, 2009, 02:16:32 PM »

wierd, it worked last night..

Ill remove demo link until I change host provider.

crnogorac081 · « **Reply #9 on:** July 22, 2009, 06:26:10 PM »

Demo - header image

mr-fan · « **Reply #10 on:** July 22, 2009, 08:05:05 PM »

looks nice! but with such many fotos it took a while befor tha page is full loaded!

but it will be a real nice thiny script to make little slideshows with 5 to 10 pics....for more there is a complete gallery.

with your droplet is possible to make some shows in wysiwyg contents or other, too!!

regards martin

good work

crnogorac081 · « **Reply #11 on:** July 22, 2009, 10:17:46 PM »

Yea I noticed too that page loads much slower with more pictures.. Anyway it can be usefull

cheers

snark · « **Reply #12 on:** July 27, 2009, 09:49:36 AM »

is there a way to set a timeout at the start of the slideshow

I want to use it in a way that the slideshow does not start right away

crnogorac081 · « **Reply #13 on:** July 27, 2009, 12:49:37 PM »

there must be a way but I am not a coder

you are free to mod it any way you like

I know that you can change time between pictures (in slideshow.js):

Code: [Select]

$(function() {
    setInterval( "slideSwitch()", 4000 );   ---- 4000 = 4 seconds
});

snark · « **Reply #14 on:** July 27, 2009, 01:56:27 PM »

yes but I need to have three of those slideshows all starting at a differrent time

I can set the intervaltime at f.i. 4000, 4100, 4200 so that they start at a different time but the steps between the sildeshows will get bigger with every change

what I was hoping to do was

ad the droplet slideshow two more times to the library of droplets, each with a different timeout from to start yet all with the same intervaltime

so you will get slideshow 1 to start after 1 second, slideshow two after 2 seconds, slideshow three after 3 seconds and each interval to 3 seconds so that every second another one will change...

crnogorac081 · « **Reply #15 on:** July 27, 2009, 04:08:47 PM »

maybe some coder can help, and to make an array for time interval, for example:

Code: [Select]

$(function() {
    setInterval( "slideSwitch()", $some_variable );   
});

and then $some_variable to have value as you whish..

----------

p.s: maybe you can try to set your one timing, for example

at start:

$some_variable = 4000

then in loop
$some_variable = $some_variable + 100

some coder should check this, to guide you where to put this code..

cheers

mr-fan · « **Reply #16 on:** September 14, 2009, 07:45:13 PM »

hi ivan,

i've just made a little tricky with your droplet!

i found a nice little easy JQuery Gallery here:

http://thisblog.usejquery.com/2009/03/25/enhancing-the-z-index-gallery-with-a-preloader/

demo view:

http://demos.usejquery.com/04_z-index_gallery_enhanced/

so i made two new droplets for WB 2.8 as base your droplet pics up the pictures from a folder in MEDIA!

DROPLET 1 Jquery implementing in front of </body>:

[[jquery]]

Code: [Select]

<?php //ignore
$wb_page_data = str_replace(&#39;</body>&#39;,&#39;<!--Jquery Core--><script src="&#39;.WB_URL.&#39;/include/jquery/jquery-min.js" type="text/javascript"></script></body>&#39;, $wb_page_data );

return true;

DROPLET 2 Jquery Gallery:
[[JqueryGallery?dir=yourimagesinmedia]]

Code: [Select]

<?php //ignore as usual
$wb_page_data = str_replace(&#39;</body>&#39;,&#39;<!--Jquery Gallery--><script src="&#39;.WB_URL.&#39;/include/jquery/plugins/jquery-gallery.js" type="text/javascript"></script><link href="&#39;.WB_URL.&#39;//include/jquery/plugins/jquery-gallery.css" rel="stylesheet" type="text/css"/></body>&#39;, $wb_page_data );

$folder=opendir(WB_PATH.MEDIA_DIRECTORY.&#39;/&#39;.$dir.&#39;/.&#39;); 
$names = array();
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," ");
if(isset($width)){$width=&#39; width="&#39;.$width.&#39;"&#39;;}else{$width="";}
if(isset($height)){$height=&#39; height="&#39;.$height.&#39;"&#39;;}else{$height="";}
$count=1;

while(($image=next($names))and(($count<=$num)or(!isset($num)))){

if( $count ==1){$class=&#39; class="active"&#39;;}else{$class=&#39;&#39;;}

$name=substr($image,0,-4);
if($link=="y"){$images=$images.&#39;<a href="&#39;.WB_URL.MEDIA_DIRECTORY.&#39;/&#39;.$dir.&#39;/&#39;.$image.&#39;" target=_blank>&#39;;}
if(file_exists(WB_PATH.MEDIA_DIRECTORY.&#39;/&#39;.$dir.&#39;/thumbs/&#39;.$image.&#39;.thumb.jpg&#39;)){
$images=$images.&#39;<img src="&#39;.WB_URL.MEDIA_DIRECTORY.&#39;/&#39;.$dir.&#39;/thumbs/&#39;.$image.&#39;.thumb.jpg" alt="&#39;.$name.&#39;" &#39;.$width.$height.&#39;/>&#39;;
}else{
$images=$images.&#39; <img src="&#39;.WB_URL.MEDIA_DIRECTORY.&#39;/&#39;.$dir.&#39;/&#39;.$image.&#39;" alt="&#39;.$name.&#39;" &#39;.$width.$height.$class.&#39; />&#39;;
}
if($link=="y"){$images=$images.&#39;</a>&#39;;}
$count++;
}

return &#39;<div id="gallery"><div id="pictures">&#39;.$images.&#39;</div></div><div id="prev"><a href="#previous">&laquo; Previous Picture</a></div><div id="next"><a href="#next">Next Picture &raquo;</a></div>&#39;;

example call in a code² section!

Code: [Select]

[[jquery]]
[[JqueryGallery?dir=images]]

[[jquery]] must load before the gallery -> first jquery-min.js added </body> then the plugin-js added additionally before </body>

so it proper works!

the attached files .js and .css please put in the /includes/jquery/plugins/... folder!

regards martin

if you make a little codecleaning it would make it even better - i'm not a good coder

[gelöscht durch Administrator]

crnogorac081 · « **Reply #17 on:** September 14, 2009, 07:49:18 PM »

cool, I will test is as soon as possible

cheers

crnogorac081 · « **Reply #18 on:** September 14, 2009, 09:24:50 PM »

If you wonder how, images are curved in photoshop

Anyway, I like this script

mr-fan · « **Reply #19 on:** September 14, 2009, 09:27:58 PM »

Quote from: crnogorac081 on September 14, 2009, 09:24:50 PM

If you wonder how, images are curved in photoshop

Anyway, I like this script

yes i realized that - too--->

and they are made aslope in PS too!

but this gallery is only for some real good pics - a kind of special show! and not for a big gallery!

maybe this droplet can be used in the news mod - i don't tested it yet!

can you clean up the not used code from your basic slideshow droplet?

only open the folder and show it as a <img> tag is used! no thumbs or such things are important!

regards martin

crnogorac081 · « **Reply #20 on:** September 14, 2009, 10:06:29 PM »

I also used other droplet - Random image droplet for this slideshow

the thumb code doesnt metter

its just one line

cheers

moprivat · « **Reply #21 on:** August 24, 2011, 05:00:17 PM »

Hi crnogorac081,

I´m using your Droplet and in 2.8.2 I got an error message. Could you have a look to this topic I wrote? https://forum.WebsiteBaker.org/index.php/topic,22206.msg149743.html#msg149743

Maybe you have a quick Solution. Would be great!!!

Alle the best,

Mo

Luisehahne · « **Reply #22 on:** August 25, 2011, 08:13:55 AM »

Like the german thread

change

Code: [Select]

reset(shuffle($names));
to

Code: [Select]

shuffle(reset($names));
Dietmar

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: SlideShow Droplet (Read 30750 times)

erpe0812

mr-fan

mr-fan

erpe0812

mr-fan

snark

snark

mr-fan

mr-fan