SlideShow Droplet

[crnogorac081]

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:

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

And here is droplet code:

Code:

$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

[erpe]

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]

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:

<?php //ignore
$wb_page_data = str_replace('</head>','<script type="text/javascript">your script</script><link href="'.TEMPLATE_DIR.'/gyour styles.css" rel="stylesheet" type="text/css" /></head>', $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!
http://www.websitebaker2.org/forum/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:

[[SlideShow?dir=folder_name_from_media_folder]]

by

Code:

<?php //ignore
return '<div id="slideshow">'.$slideshow.'</div>;

regards martin

[crnogorac081]

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

[mr-fan]

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]

here is the latest code:

Code:

$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]

HI all, here is an updated droplet:

Code: (php)

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)

#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

[erpe]

Hi

your demo link gives an error message:

Code:

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

rgds

erpe

[crnogorac081]

wierd, it worked last night..

Ill remove demo link until I change host provider.

[crnogorac081]

Demo - header image

[mr-fan]

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]

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

cheers

[snark]

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]

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:

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

[snark]

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]

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

Code:

$(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]

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:

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

return true;

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

Code:

<?php //ignore as usual
$wb_page_data = str_replace('</body>','<!--Jquery Gallery--><script src="'.WB_URL.'/include/jquery/plugins/jquery-gallery.js" type="text/javascript"></script><link href="'.WB_URL.'//include/jquery/plugins/jquery-gallery.css" rel="stylesheet" type="text/css"/></body>', $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.'/>';
}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="gallery"><div id="pictures">'.$images.'</div></div><div id="prev"><a href="#previous">&laquo; Previous Picture</a></div><div id="next"><a href="#next">Next Picture &raquo;</a></div>';

example call in a code² section!

Code:

[[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 

[crnogorac081]

cool, I will test is as soon as possible

cheers

[crnogorac081]

If you wonder how, images are curved in photoshop

Anyway, I like this script

[mr-fan]

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]

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

the thumb code doesnt metter its just one line

cheers

[moprivat]

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? http://www.websitebaker2.org/forum/index.php/topic,22206.msg149743.html#msg149743

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

Alle the best,

Mo

[Luisehahne]

Like the german thread

change

Code:

reset(shuffle($names));

to

Code:

shuffle(reset($names));

Dietmar