Javascript slideshow using mootools Javascript slideshow using mootools
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

Javascript slideshow using mootools

Started by phill104, November 19, 2007, 10:40:41 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

phill104

November 19, 2007, 10:40:41 AM Last Edit: November 19, 2007, 06:41:05 PM by GauGau
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
It is a mistake to think you can solve any major problems just with potatoes.

Timos-Welt

#1
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

just_some_guy

#2
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.
Tambien, Hablo Español      PHP - Achieve Anything
"The Internet is becoming the town square for the global village of tomorrow. " - Bill Gates
Windows 7 Forums

phill104

#3
November 20, 2007, 07:33:15 PM Last Edit: November 20, 2007, 08:50:19 PM by phill104
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

It is a mistake to think you can solve any major problems just with potatoes.

Gephri

#4
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?

phill104

#5
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.
It is a mistake to think you can solve any major problems just with potatoes.

ff

#6
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?

phill104

#7
December 31, 2007, 08:09:28 PM Last Edit: January 06, 2008, 11:14:18 AM by phill104
Quote from: 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?

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.
It is a mistake to think you can solve any major problems just with potatoes.

tinorebel

#8
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  ???
Live long and prosper!
www.tripodart.net

dillydog

#9
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
Print
Go Up Pages1
User actions