Advanced search  

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]

Pages: [1]   Go Down

Author Topic: Javascript slideshow using mootools  (Read 35791 times)

0 Members and 1 Guest are viewing this topic.

Phill Luckhurst

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 4822
    • Windsurf.me
Javascript slideshow using mootools
« 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
« Last Edit: November 19, 2007, 06:41:05 pm by GauGau »
Logged
It is a mistake to think you can solve any major problems just with potatoes.

Timos-Welt

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 808
    • Timos-Welt
Re: Javascript slideshow using mootools
« Reply #1 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
Logged

just_some_guy

  • Supporter
  • Coppermine addict
  • ****
  • Offline Offline
  • Posts: 539
  • I am currently on holiday, back in a few weeks. :D
Re: Javascript slideshow using mootools
« Reply #2 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.
Logged
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

Phill Luckhurst

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 4822
    • Windsurf.me
Re: Javascript slideshow using mootools
« Reply #3 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

« Last Edit: November 20, 2007, 08:50:19 pm by phill104 »
Logged
It is a mistake to think you can solve any major problems just with potatoes.

Gephri

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 235
Re: Javascript slideshow using mootools
« Reply #4 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?
Logged

Phill Luckhurst

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 4822
    • Windsurf.me
Re: Javascript slideshow using mootools
« Reply #5 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.
Logged
It is a mistake to think you can solve any major problems just with potatoes.

ff

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 108
Re: Javascript slideshow using mootools
« Reply #6 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?
Logged

Phill Luckhurst

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 4822
    • Windsurf.me
Re: Javascript slideshow using mootools
« Reply #7 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.
« Last Edit: January 06, 2008, 11:14:18 am by phill104 »
Logged
It is a mistake to think you can solve any major problems just with potatoes.

tinorebel

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Gender: Male
  • Posts: 87
  • live long and prosper!
    • www.tripodart.net
Re: Javascript slideshow using mootools
« Reply #8 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  ???
Logged
Live long and prosper!
www.tripodart.net

dillydog

  • Coppermine newbie
  • Offline Offline
  • Posts: 2
Re: Javascript slideshow using mootools
« Reply #9 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
Logged
Pages: [1]   Go Up
 

Page created in 0.024 seconds with 20 queries.