forum.coppermine-gallery.net

No Support => Modifications/Add-Ons/Hacks => Mods: Visuals => Topic started by: Phill Luckhurst on November 19, 2007, 10:40:41 am

Title: Javascript slideshow using mootools
Post by: Phill Luckhurst on November 19, 2007, 10:40:41 am
I recently found a nice slideshow script here.

http://www.electricprism.com/aeron/slideshow/

It uses the mootools libaries to create the effects rather than flash.

I've added to it a little script that takes random images from your coppermine library and feeds them into the slideshow.

Simply unzip the attached files to your coppermine root and call mooslide.php to see your slideshow.

For instance here is mine

http://www.windsurf.me.uk/cpg133/mooslide.php


If you look at mooslide.php you will see the following code

Code: [Select]
<?php
  
include "flashthumb.php";
print 
"<head>";
print 
"<script type='text/javascript' src='mootools.js'></script>";
print 
"<script type='text/javascript' src='slideshow.js'></script>";
print 
"";
print 
"<div id='my_slideshow' class='slideshow'>";
print 
"<img src='images/TITLE3.jpg' alt='A picture' width='400' height='300' />";
print 
"</div>";

foreach(
$url as $u

        
$quotedurl[] = "'" $u "'"




$concatenatedstuff implode(',',$quotedurl); 
print 
"<script language=\"JavaScript\">\n";
print 
"myShow = new Slideshow('my_slideshow', {type: 'combo', resize: true, duration: [2000, 4000], width: 400, height: 300, hu: '', images: 
[
$concatenatedstuff]});"
print 
"</script>"
?>


The first thing you will need is your own holding image that gets displayed while the slideshow loads. In my case its called TITLE3.jpg but you can change thist to anything you want by editing the line

Code: [Select]
print "<img src='images/TITLE3.jpg' alt='A picture' width='400' height='300' />";
To see how to change transitions and sizes etc it's best to look at the slideshow creators site where you will see how to use any of the 50+ transition effects that are avilable. An amazing achievement in a script that including my bit takes up less than 30k. It is also easy to style and add buttons but I'll leave you to work that out from the instructions below.

http://www.electricprism.com/aeron/slideshow/

At the moment it's not possible to make clickable links to each image but that functionality will be added with time

Have fun

Thanks to rplmedia for flashthumbs.php which I have modified to use with this script.

All scripts are under the open source MIT licence allowing you to fiddle with the scripts and use as you please as outlined here

http://www.opensource.org/licenses/mit-license.php
Title: Re: Javascript slideshow using mootools
Post by: Timos-Welt on November 20, 2007, 10:00:29 am
I also tested around with pan- and zoom effects and transitions via Javascript, but in the end I wasn't satisfied by the image quality and flickering most browsers introduce if you go that way. But Javascript is very common and you don't need any plug in, so in the end it's the way to go if you want to stay as compatible as possible. ATM I'm also looking for a better slideshow solution for CPG (demo here http://cpgdev.timos-welt.de/slide). Yours has given me quite some ideas now, so thanks for that!

regards
Timo
Title: Re: Javascript slideshow using mootools
Post by: just_some_guy on November 20, 2007, 06:52:39 pm
Hello,

The links to http://www.electricprism.com/aeron/slideshow/ dont work and it appears that http://www.electricprism.com/ does not work either. Maybe its just the website being down. But just thought i would let you know.
Title: Re: Javascript slideshow using mootools
Post by: Phill Luckhurst on November 20, 2007, 07:33:15 pm
Just_Some_Guy but it seems the site is down at the moment, it's been a bit variable for the last few days.

You should be able to work out the different modes and their operation from the attached zip file though it doesn't explain all the available options such as the Robert Penner ones.

Hopefully the site will be back soon.


*** Edit *** It's back up now with some improved instructions.

Timos-Welt

I agree that some browsers do not do js transitions very smoothly but this was written for compatability. I also have a flash version which can be found here

http://forum.coppermine-gallery.net/index.php?topic=47566.0

Title: Re: Javascript slideshow using mootools
Post by: Gephri on December 02, 2007, 12:33:36 am
Liking this mootools version of a slideshow - but can we get it to use a link that dynamically shows only the images within a single album?
Title: Re: Javascript slideshow using mootools
Post by: Phill Luckhurst on December 02, 2007, 11:22:14 pm
I'm working on it but am a little short on time at the moment. Once I get cpmfetch to work in the way I want it to it will be easy.
Title: Re: Javascript slideshow using mootools
Post by: ff on December 31, 2007, 07:01:53 pm
I tried to include the slideshow in another page which isn't in the album directory but one up.

Is this possible?
Title: Re: Javascript slideshow using mootools
Post by: Phill Luckhurst on December 31, 2007, 08:09:28 pm
I tried to include the slideshow in another page which isn't in the album directory but one up.

Is this possible?

There are quite a few ways to do it the simplest but not the best being to use an iFrame which is how I've done it on www.windsurf.me.uk/index.htm

You could move all the files to whatever directory you wish as long as you modify flashthumbs.php to point to your Albums directory.

Or you could call mooslide.php from within your webpage.
Title: Re: Javascript slideshow using mootools
Post by: tinorebel on May 10, 2008, 12:59:14 pm
HAllo, I was wandering if it would be possible to oassign a link to each slide referring to the page in coppermine with the corresponding picture  ???
Title: Re: Javascript slideshow using mootools
Post by: dillydog on June 22, 2008, 07:20:10 pm
Hi

I'm quite new to all this php malarkey, but I was wondering if this could be used to display recently uploaded pictures, say the last 20? Sorry to sound a bit dumb, but all I'm looking for is a bit of script that I can place on a page and have it dynamically always display the last 20 uploaded pictures. Is this possible?

Cheers