Ferdinand.Slider
Setup
Ferdinand.Slider requires PrototypeJS >= 1.6.0.3 (prototypejs.org) and Scriptaculous Effects >= 1.8.2 (script.aculo.us). Include Javascript files:
In above example I am using google as source for Prototype and Scriptaculous but you can just as easily download both frameworks and serve them from your server.
After including javascript files you need to define container element for slider and making Ferdinand.Slider(id) call, like so:
Options
You can also configure Ferdinand.Slider with a bunch of options.
| Option | Description | Default |
|---|---|---|
| effectDuration | duration of title and excerpt scroll down and up in seconds | 0.6 |
| transitionDuration | duration of image transition effect in seconds | 0.6 |
| timeout | time to display one slide before going on next one (3500 = 3.5sec) | 3500 |
| opacity | if you do not wish to use transparent png for title/excerpt background then set this to value of 0 for full transparency and 1 for no transparency (0.5 is 50% opacity) | null |
| background | if opacity is set to null then this is the place where you can set location of background image for title/excerpt | images/background.png |
| loader | path to loader animated gif | images/ajax-loader.gif |
| next | path to next button image | images/next.png |
| previous | path to previous button image | images/previous.png |
| type | doesn’t do anything yet, it is a placeholder for future releases | json |
| url | path to json source file | callback.json |
| titleClass | css class of the title | title |
| excerptClass | css class of excerpt | tekst |
| containerClass | css class of slider container | ferdinand-slider |
Example would be:
slider = new Ferdinand.Slider('container_id', {
effectDuration: 0.4,
opacity: 0.5,
timeout: 5000,
excerptClass: 'comecssclass'
});
Available Methods
To control Ferdinand.Slider from outside script/function you can use fallowing methods:
Assuming you initialized Ferdinand Slider in variable “slider” like in example above.
| Method Name | Description | |
|---|---|---|
| slider.Next() | will skip to next slide in line | |
| slider.Prev() | will go back to previous slide | |
| slider.Go(2) | will go to third slide in the line. notice that even tho there is a number 2 in the method brackets slider will go to slide number 3. this is becouse first slide is considered to be number zero | |
| slider.Pause() | pause method will stop slider on current slide. using methods next, prev or go will init slider yet again | |
| slider.CurrentSlide() | returns(int) current slide number. note slide number 1 is 0 (zero) not 1 (one) | |
| slider.SlideCount() | returns(int) total slide count, as returned by json source. |
Download
- Current version 0.32 (ferdinand.slider032.zip) - 22.12.2008 - Recommended update, fixes several IE issues adds new methods.
- version 0.31 (ferdinand.slider031.zip)
- Version 0.30 (ferdinand.slider030.zip)
- Version 0.27 (ferdinand.slider027.zip)
December 17th, 2008 at 11:15 am
hey
good job on the slider - looks great! Quick question; is it poss to install this within an HTML page. ie, I have a 460×300 frame where my images currently appear and I’d really like to install this instead…..
cheers pal,
Justin
December 17th, 2008 at 12:27 pm
Thanks Justin. Should be no problem to integrate it in frame.
Simply include all javascript files in frame and you are good to go.
December 17th, 2008 at 5:19 pm
Super’b’
December 19th, 2008 at 2:47 pm
Hello, perfect extension. But it doesnt work on IE7. Will you plan to correct it ?
thanks
December 20th, 2008 at 10:06 pm
This is the best image slider, like it much more than LightWindow, Spacegallery, zoomy, etc.
But I have a problem: Would like to put it centred on my page (inside a DIV with align=center).
The image is centred, but the text isn’t, so it will not fit any longer.
It would be nice also to have at least a call in the sliders API to pause the image changes or to have a pause button integrated (like the next and prev).
December 21st, 2008 at 12:57 am
@Sven Rieke
Great idea for pause, will definitely implement it soon.
As for centering I will check it out on monday and report back.
December 22nd, 2008 at 12:21 pm
As promised, new version is out today, several new methods and number of fixes.
I believe all IE problems should be ancient history.
Oh yea, and stay tooned… there will proly be another extension release today, working title is Ferdinand.PhotoTag
December 22nd, 2008 at 5:39 pm
@Sven Rieke
As for the centering issue try this:
It would require slider images to have fixed width.
December 26th, 2008 at 12:22 am
Hello, congratulations for this script. I have a question:
how can I make this slide gallery with dynamic php?
December 26th, 2008 at 8:10 am
You can generate json with php
December 26th, 2008 at 11:01 am
ok, but with extension .php?
into option type JSON or php?
tnx for all!!
December 26th, 2008 at 12:00 pm
Rename json file from callback.json to callback.php
Leave type as it is, simply generate json output from your php script.
You will need to change option url from callback.json to callback.php
December 26th, 2008 at 3:32 pm
Hi Vladimir,
Sorry, but I have uploaded the original content of zip file into ftp at http://www.mariagabriellacosta.it/ferd/
But not work!!!! :( :( :( :(
December 26th, 2008 at 3:41 pm
Consulting and installation services are charged by the hour or you could simply RTFM
December 26th, 2008 at 5:34 pm
Solved! I had a problem with server!
Bye
December 27th, 2008 at 3:11 pm
Hello Vladimir,
I have find a bug into method Slider.Prev(),
I have solved this way:
Prev: function () {
// if current key is 1 disabled this method
if(this.current_key!=0){
this.Go(this.current_key-1);
}
}
January 7th, 2009 at 8:30 pm
I’ve got it mostly working, the problem is it’s crashing IE6, and it’s spitting out constant errors every second or so. I noticed it’s doing it on your site as well. The error is:
“Warning: Error in parsing value for property ‘width’. Declaration dropped.
Source File: http://ferdinand.rs/javascript/ferdinandslider#
Line: 0″
After a while, the page starts dragging down the browser. Any suggestions?
Otherwise, this is a great function! ;-)
January 7th, 2009 at 8:55 pm
Well, I figured out the IE6 crash. It was the use of an IE PNG transparency fix that was causing a conflict. :-(
I’m using IE PNG Fix from TwinHelix, located here: http://www.twinhelix.com/css/iepngfix/
Any suggestions?
January 12th, 2009 at 3:42 pm
Hello Vladimir,How difficult would it be to have a option to put the title and excerpt at the image’s bottom?
Thank for this Extension
January 12th, 2009 at 4:29 pm
It’s not that all that hard, will consider it during next update.
January 13th, 2009 at 1:35 am
Is a PHP server required for this to execute? I’ve tried testing on ASP, ColdFusion, and PHP servers and the only one I’ve been successful on is my PHP server (works wonderfully there, btw). If you can shed any light on this, I’d much appreciate it. I’m really looking to implement this on an ASP server, however no matter how I go about I’m not having much luck. Thanks.
January 13th, 2009 at 5:07 pm
It doesn’t matter what server you are running.
For asp or cfm servers simply rename callback.json to callback.asp/.cfm.
January 14th, 2009 at 9:24 pm
Nice work dude! I seriously second Nicolas request.
January 25th, 2009 at 12:40 pm
Thanx for your job.
An other, similar solution is: http://www.wappler.eu/swgallery/
Best regards
Rainer
January 30th, 2009 at 10:08 pm
_I_t’s possible to remove captions?
February 17th, 2009 at 6:05 pm
I like this a lot! I’ve used it on my website here: http://www.roxbourne.com.
Is there a way to remove the left and right feature altogether? I just want it as a slideshow.
March 5th, 2009 at 12:28 pm
Hi,
I have installed your script, but after a couple of minutes slows the browser.
I checked with Firebug and I have seen a infinity loop of code before html tag
Thanx
March 27th, 2009 at 5:21 pm
Great work.
There are a lot options to increase, but already a great gallery
May 21st, 2009 at 11:20 pm
Hi! I can’t make it shows pontuaction (symbols like ~ ç ´) on the description… All pontuactions works fine but the ones loaded from callback.json. Thanks.
May 27th, 2009 at 2:53 pm
Great slider - thanks!
June 1st, 2009 at 7:46 pm
In the options, put onWarp: null.
And put this lines in ShowWarp:
if(this.options.onWarp != null){
this.options.onWarp(item);
}
You can do something now when te new image loaded.
Good Luck
June 3rd, 2009 at 6:38 am
Hi there, first of all : GREAT WORK !
I have one question, is there a way to have the complete image and header link to a url instead of only the title ?
THX, GIO
June 15th, 2009 at 10:57 am
Somehow, it works fine with my firefox
but in IE7 occures error ” ‘null’ is null or not an object”
Could you please tell me how to solve this problem?
September 22nd, 2009 at 2:15 pm
Question: I don’t see in the “Setup” where you load the images?
December 10th, 2009 at 1:15 pm
My Next- and Previous buttons aren’t showing. The path is right, though. What could be the reason?
December 10th, 2009 at 1:29 pm
(In fact, no image mentionned in the ferdinand.slider.js-script is shown at all)
December 10th, 2009 at 3:04 pm
When it’s on top of my page, it works. When it’s at the bottom, the images from ferdinand.slider.js-script fail to show up. Odd…
December 10th, 2009 at 3:10 pm
Hmm, sometimes the images show up, sometimes they don’t. I believe your script is really unpredictable and therefore another scriptaculous failscript.
December 10th, 2009 at 3:57 pm
@nord
And I believe that those who are born as spammers stay spammers till arrested.
If it works here and on 100 other sites and you can’t get it to work, that leads me to believe that you are just another traveler (hmm maybe a driver) on a Fail O’ Copter.
December 18th, 2009 at 9:44 pm
Pozdravi iz USA. Dobar ti je script! Svaka cast!
December 24th, 2009 at 1:41 pm
How to make text fade in up ?
Not slide down, but i want to make it slide up.