Customizing jQuery innerfade plug-in – Adding controls, navigation and caption
First of all thanks goes to Medienfreunde Hofmann & Baldes GbR for their nice jQuery innerfade plug-in. It’s very popular and easy to use plug-in for adding slider in a web application.I’ve been a fan of this nice plug-in. Recently, for an application I had to add some more feature with this plugin. Here, I just want to share my modifications with you.
New features I have added
-
- Add Slider controler where you can do play/stop,next/prev,first/last.
- Add a navigation from where you can navigate to any slide.
- Add a Slide caption where you can set caption for a slide.
Here is a live demo here.
Download
Download it from here (). The zip file contains modified innerfade plugin along with an example.
How to use
Nothing new. Use this plugin just as the original innerfade plugin. For additional features, set your options from "config.js". You can modify the "slide.css" as your application UI needs. Thats all.
Plug-in Options
- slide_timer_on : "yes" or "no". If "yes", then slide will automatically play.
- slide_ui_parent : The ID of <ul> which contains the slide <li>s of slide. ( "portfolio" in attached example slider).
- slide_ui_text : The id of descrition/caption element. “portfolio-desc” in example. In case, you don’t want to use a caption, leave it "null"
- pause_button_id : The id of pause_button. “pause_button” in example. In case, you don’t want to use a controler, leave it "null"
- slide_nav_id: The id of slide navigation. “slide_nav” in example. In case, you don’t want to use a navigation, leave it "null"
I have described here only new feature related options. All other jquery innerfade settings will remain as is. Thats all. If you want to know anything more, just drop me a line. I will try my best to answer. enjoy!!!!
81 Responses to “Customizing jQuery innerfade plug-in – Adding controls, navigation and caption”
Leave a Reply
About Me
inLinks
Manage your projects
Recent Comments
- Dario
on Let’s Develop a Facebook Application – Part one - Classes PHP pour API
on A PHP Class For Facebook Application Developer - Using APIs With PHP? Here Are Your Classes | Jeez Tech on A PHP Class For Facebook Application Developer
- Rombe on Let’s Develop a Facebook Application – Part one
- Tilemahos
on Customizing jQuery innerfade plug-in – Adding controls, navigation and caption
Letme design you-MetroDesk
Nevermind, I updated the last line of
$(”#”+settings.slide_nav_id+” li”).each(function()
to
settings.slide_timer_on = ‘yes’
and I think it works
Thanks, again!
@amy
thanks for your comment.
and you change the correct line.
thanks
raju
I can tell that this is not the first time you mention the topic. Why have you decided to touch it again?
now, my only problem is that the timer just continues from where it was at, but I want it to restart from the selected nav button…any thoughts?
Thanks
emm.. 10x
So you know, null != ‘null’
Running this mod without setting params like slide_ui_text will cause it to error out. Unless you replace all ‘null’ with with null. Then it works just fine.
I want to change the plugin to only fade when the slide_nav is clicked and not automated. How can this be achieved?
I tried changing ’slide_timer_on:’ to ‘no’ but this causes the fade animation to break (they overlay on one another coz the previous image/description isnt faded out).
hi thomas,
you do changes the correct settings.
I think it should work if you change it correctly.
I think you do mistake on another settings.
I have tested and it works fine.
ok,then if you have problem let me know.
I will help you.
thanks
raju
I’ve removed the right controls ie pause/play, next/prev and first/last.
All I want for the control is the dots (slide_nav) on the left.
Will this effect the plugin?
hi thomas,
no it will not effect on plugin.
you check html file again with config.js settings.
thanks
raju
Oh no, I got it.
I took out the code for the right set of controls in the config.js file.
I put it back and now the automation has stopped
Thanks for your quick responses.
@thomas,
thanks to find solution.
raju
cool!!!!!!!!!!!
Hi,
I would like to add a button ‘play from the beginning’. Do you, by any chance, have an easy solution to this? Currently I’m using sequence of commands: pause-first-pause.
Great script.
But any idea’s what I would need to change to get this working with JQuery 1.3.2? The problem is I already have JQuery 1.3.2 running on a site for a suckerfish menu. I tried hooking innerfade up to this updated version of JQuery but it fails to work. I don’t want to be running two separate versions of JQuery in the same site you see!
Excellent work dude. I like the Slideshow and the effect. I used innerfade in most of the project but didn’t think on the navigation and caption. But I will use them from now on.
Love this script, I’ve used it in several projects now, but I recently ran across a little snag…
I’m trying to use multiple slideshows on the same page (all the slideshows have unique IDs, ie. portfolio_1, portfolio_2 etc, and all the slide_nav uls are unique as well), but for some reason when the function is called, only the last slideshow in the initial setup script actually has the effects applied… in other words, clicking any slideshow’s control buttons always controls the last one that was called in the config script. Wondering you know of a line or two I could edit it get it working in this scenario…
I would like to have this plugin work so that when the user gets to the last slide, and presses the “next” button, they are taken back to the first image.
Is there a quick fix for this?
How do you get it to continue to play after you have clicked on a slide_nav button?
Awesome plugin. I use it in many projects, and with navigation it can be taken a step further!
It would be great to have it working with jquery 1.3.2, though.
Is it possible to have it continuing sliding even after the navigation buttons are clicked?
Thanks!
Forget about the jquery 1.3.2 dumb question. I just tried the plugin, only changed jquery 1.2.3 to 1.3.2 and it just works!
I am trying now to have it continuing sliding after clicking the navigation buttons, and starting from the beginning when reaching the last slide. Any ideas would be appreciated!
Thanks
Hello!
For anyone who could be interested, I managed to fix the little problems I talked about.
Now, when reaching the last slide, it comes to the first again (when clicking the “next” button) and when the first slide is showing, it goes back to the last one when clicking on the “previous” button.
in the jQuery.prev function, change:
————————————–
if ((curr_slide_id_number) >= 0) {
$.skip();
}
————————————–
to:
————————————–
if ((curr_slide_id_number) < 0) {
curr_slide_id_number = elements.length-1;
}
$.skip();
————————————–
In the jQuery.next function, change:
————————————–
if ((curr_slide_id_number) < elements.length) {
$.skip();
}
————————————–
to:
————————————–
if ((curr_slide_id_number) == elements.length) {
curr_slide_id_number = 0;
}
$.skip();
————————————–
To have the plugin continuously sliding even after clicking the navigation buttons, change every settings.slide_timer_on to “yes”:
settings.slide_timer_on = “yes”;
Hope it helps! Let me know if you find any issues.
Hi Raju,
it’s great work your slider!
Just one question, I put the slide inside 3 tabs, http://www.jonatanflores.com/tabs/
But I was trying do works the slider together and I fail
Can you give me some idea?
Really Thanks!
@Jon
thanks for your comment.
I have seen your page.
Mail me all slide related file.
I will do it for you. and the tell
what you have to do.
thanks again
Hi
Love your version of the Innerfade plugin, works like a charm.
I do have a problem though and it happens when I want to user two innerfade slideshows with two seperate configurations. I have put all my configurations in a single config.js file but I can only get one of them to work.
Before I found your plugin I used the original Innerfade without any problems.
Any ideas what can cause this?
Thanks!
Excellent plugin, great work! I’d like to see an update that doesn’t require a container or image height to be specified, so that it automatically scales the height.
If this is already possible, somehow, email me.
Your demo and download links go to blank. Where can I download the plugin yet? Thanks for your help.
@Thomas,
sorry for this problem.
Actually my site affected by iframe virus.
So I have to clean to move all the link.
thanks
raju
Hi Raju
can you send me the download link or the plugin via e-mail?
Many Thanks.
Excellent work. I customized it to replace a flash animation. And yes, if you could add ul#portfolio li to slider.css line 1, then it would remove a nasty image/icon/dot which is present at the left of each image.
Thanks.
Great work, I’m looking forward to implementing this script very soon.