Author Topic: SlideShow Droplet  (Read 20280 times)

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
SlideShow Droplet
« 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]
UI / UX Designer

erpe0812

  • Guest
Re: SlideShow Droplet
« 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

  • Guest
Re: SlideShow Droplet
« Reply #2 on: July 21, 2009, 04:36:45 PM »
hi crnogorac081 (i always past&copy your long hard to learn nick.... :lol:)

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... :wink:

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

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: SlideShow Droplet
« Reply #3 on: July 21, 2009, 04:44:06 PM »
nice nice :) I dint know that, but I keep learning php every day :))
UI / UX Designer

mr-fan

  • Guest
Re: SlideShow Droplet
« 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  :wink:

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: SlideShow Droplet
« 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
« Last Edit: July 22, 2009, 01:30:10 AM by crnogorac081 »
UI / UX Designer

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: SlideShow Droplet
« 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]
« Last Edit: July 22, 2009, 02:17:14 PM by crnogorac081 »
UI / UX Designer

erpe0812

  • Guest
Re: SlideShow Droplet
« 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

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: SlideShow Droplet
« Reply #8 on: July 22, 2009, 02:16:32 PM »
wierd, it worked last night..

Ill remove demo link until I change host provider.
UI / UX Designer

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: SlideShow Droplet
« Reply #9 on: July 22, 2009, 06:26:10 PM »
« Last Edit: September 14, 2009, 09:04:23 PM by crnogorac081 »
UI / UX Designer

mr-fan

  • Guest
Re: SlideShow Droplet
« 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

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: SlideShow Droplet
« 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
UI / UX Designer

snark

  • Guest
Re: SlideShow Droplet
« 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

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: SlideShow Droplet
« Reply #13 on: July 27, 2009, 12:49:37 PM »
there must be a way but I am not a coder  :-D 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
});
UI / UX Designer

snark

  • Guest
Re: SlideShow Droplet
« 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...


Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: SlideShow Droplet
« 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
« Last Edit: July 27, 2009, 04:23:53 PM by crnogorac081 »
UI / UX Designer

mr-fan

  • Guest
Re: SlideShow Droplet
« 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  :wink:



[gelöscht durch Administrator]

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: SlideShow Droplet
« Reply #17 on: September 14, 2009, 07:49:18 PM »
cool, I will test is as soon as possible

cheers
UI / UX Designer

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: SlideShow Droplet
« Reply #18 on: September 14, 2009, 09:24:50 PM »
If you wonder how, images are curved in photoshop :)

Anyway, I like this script :)
UI / UX Designer

mr-fan

  • Guest
Re: SlideShow Droplet
« Reply #19 on: September 14, 2009, 09:27:58 PM »
If you wonder how, images are curved in photoshop :)

Anyway, I like this script :)

yes i realized that - too--->  :-D

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

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: SlideShow Droplet
« 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
UI / UX Designer

Offline moprivat

  • Posts: 68
Re: SlideShow Droplet
« 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

Offline Luisehahne

  • WebsiteBaker Org e.V.
  • **
  • Posts: 4451
  • Gender: Male
Re: SlideShow Droplet
« 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
Note: Once the code has been generated, it is easy to debug. It's not a bug, it's a feature!

 

postern-length