Customizing jQuery innerfade plug-in – Adding controls, navigation and caption

Posted: January 17th, 2009 | Author: admin | Filed under: jquery | Tags: fading, innerfade, jquery, plugin, slider | 81 Comments »

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!!!!

Share and Enjoy:

No Related Post

81 Comments on “Customizing jQuery innerfade plug-in – Adding controls, navigation and caption”

1 Raymond Selda said at 9:04 am on January 18th, 2009:
Amazing mods Raju! I will definitely use this in my upcoming templates. Thank you for sharing.
2 john said at 2:18 pm on January 18th, 2009:
the controls dont sit in the write place in ie 7 in the demo
3 cawlin said at 9:43 pm on January 18th, 2009:
nor in safari.
4 loors said at 8:43 am on January 19th, 2009:
nor in Chrome
5 rajuniit said at 11:12 am on January 19th, 2009:
thanks everybody for your comments.
@john,cawlin thanks to inform me.
i have tested and fixed it.
6 Jerry said at 12:27 pm on January 21st, 2009:
Great job. Thanks!
7 Sesso said at 8:57 am on January 22nd, 2009:
Great site.
8 tj mapes » Blog Archive » What I’m Reading (weekly) said at 5:34 am on January 25th, 2009:
[...] Customizing jQuery innerfade plug-in – Adding controls, navigation and caption | stylephp [...]
9 Zoom said at 12:26 pm on January 26th, 2009:
When i am on the last element, how can i make it go to the first element ?
10 admin said at 5:13 am on January 27th, 2009:
@zoom ,you can navigate to any slide to click on slider navigation button
11 My Little List of jQuery Tips, Tricks and Resources | Moral Fibre said at 12:10 am on February 5th, 2009:
[...] Adding controls to the jQuery inner-fade plugin [...]
12 David H said at 12:46 pm on February 5th, 2009:
Looks great!
Why do you have to press pause twice to stop it?
13 admin said at 10:35 pm on February 5th, 2009:
hi david,
thanks for your comment.
plz check you don’t have to press pause twice to stop it.
thanks again.
14 sagar said at 11:24 am on February 6th, 2009:
ur BLOG is so helpful resources for web developers.
15 網站製作學習誌 » [Web] 連結分享 said at 6:25 pm on February 10th, 2009:
[...] Customizing jQuery innerfade plug-in – Adding controls, navigation and caption [...]
16 Audee Velasco said at 10:58 pm on February 10th, 2009:
This is really nice! I’m planning to use it with a RSS photo feed.

Thanks a lot!
17 S Gauder said at 12:57 pm on February 13th, 2009:
Great job Raju. Trying to incorporate a version of this on a site we’re developing but it’s not quite working as well as yours. Would love your input.
18 PHP programmer of bangladesh » Blog Archive » “normal web developer” to “stylish web developer” - 01 said at 11:12 am on February 14th, 2009:
[...] jQuery Sliding with jQuery Innerfade [...]
19 admin said at 12:52 am on February 15th, 2009:
@Gauder
thanks for your comment.
I don’t know where you have problem to incorporate it.
I think I can help you If you clear it to me.
20 Scott M said at 1:04 pm on February 22nd, 2009:
thanks for the plugin.

I had some trouble getting this working WITHOUT the slide caption box.

I found that replacing the string ‘null’ simply with null (no quotes) in all of the if statements fixed this. e.g. replaced

if(settings.slide_ui_text != ‘null’)

with

if(settings.slide_ui_text != null)

Hope this helps.

SM
21 admin said at 11:01 am on February 23rd, 2009:
@scott
thanks for your comment.
But you don’t have to change anything to use it without slide caption box.
I think if you change the settings at config.js

slide_ui_text: ‘null’
I hope you do mistake not to give single colon with null.

thanks again for your comment.
22 Alexwebmaster said at 4:58 am on March 3rd, 2009:
Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
23 Mike Wharton said at 4:21 pm on March 5th, 2009:
Hey,
I had problems with existing innerfade containers on my site when I uploaded your extended “jquery.innerfade.js” file, which is a pity because I really like the functionality you’ve added…

Any idea what might be causing the problems?

M
24 admin said at 10:03 pm on March 5th, 2009:
hi mike,
thanks for your comment here.
Yes, You have problem if you just replace jquery.innerfade.js file with original one.
because I have changed original jquery.innnerfade.js file.
So if you want to use it you have to config config.js file to do your task.
you can disable or enable adding control using config.js file.

And if you need any help just drop a comment I will try my best to help you.

thanks again for your comment.
25 cawlin said at 9:02 am on March 10th, 2009:
It’d be really great if when you click the next button on the last image it looped back through to the original image. Is this possible?
26 admin said at 9:16 pm on March 11th, 2009:
@cawlin
yah it is possible. But I have change some configuration also.
If I add then I will mail you.
thanks for your suggestion.
27 peter said at 3:15 am on March 12th, 2009:
great tutorial
how could you get the image to slide left instead of fade?

like this http://designsensory.com/

thanks
Peter
28 admin said at 3:55 am on March 12th, 2009:
@peter
yah you do it but up and down not left right.
If you want to slide left to right then have change
at plugin.
at config.js file add this line.

animationtype: ‘slide’

at config option.
29 peter said at 6:22 am on March 12th, 2009:
thankyou
for left and right have change at plugin…

could you explain what you mean by this
30 admin said at 7:33 am on March 12th, 2009:
@peter
hi peter,
In this version you can’t do it like your reference site.
In future I will try to incorporate it.
thanks
31 peter said at 8:24 am on March 12th, 2009:
thanks for your reply
Regards
32 Andy said at 6:01 pm on March 12th, 2009:
Hi,

I tried upgrading this to use jquery 1.3 and `I get this error as soon as the first slide change takes place

Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMViewCSS.getComputedStyle]” nsresult: “0×80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)” location: “JS frame :: …/js/jquery-1.3.2.min.js :: anonymous :: line 12″ data: no]

Any ideas what the cause should be?

Thanks for a great mod of my fav jquery plugin

Cheers,

Andy
33 Frank said at 4:13 am on March 13th, 2009:
Real nice little plugin, it seems the live demos controls are slightly out of place in Firefox 3.0.7 but it’s very nice.
34 raju mazumder said at 10:16 pm on March 16th, 2009:
@Andy
What version you try?
I have tested it jquery-1.3.2.min version.
it works.
35 jim said at 5:15 am on March 20th, 2009:
great Raju!

> cawlin wrote:
> . . . click the next button on the last image
> . . . it looped back through to the original image.
> . . . Is this possible?

>admin wrote:
>yah it is possible. But I have change
>some configuration also.
>If I add then I will mail you.

this would be helpful. can you send a copy please?

also: where to disable all the control buttons except previous and next?

thanks!
36 jim said at 6:32 am on March 20th, 2009:
>where to disable all the control
>buttons except previous and next?

Raju – found it, thanks.
37 Johnny Hooker said at 5:30 pm on March 20th, 2009:
Hello , very good job; id like to know if there is an issue to pause-on-hover (when mouse over the slideshow) Thanks a lot!!
38 Dorothy said at 7:53 am on March 23rd, 2009:
aaaah! Beautiful, just beautiful! Thank you for sharing!
39 Coestjed said at 8:41 pm on April 3rd, 2009:
ммм… интересно ..
40 The Open Sourcerer said at 8:12 am on April 5th, 2009:
Hi there and thanks for this.

I have used you mod to mod Joomlaworks UCD module that also uses the innerfade script.

I altered the stylesheet somewhat so I could get it to work in IE6 and have chnaged the images from pngs to gifs for – again – IE6.

The post and a zip of the module are here: http://forum.joomlaworks.gr/index.php?topic=7411.msg26388#msg26388

Thanks again.
41 Swany said at 9:51 pm on April 5th, 2009:
we were messing around tonight with adding your slideshow to a test page to se how it would look… when we discovered that combined with multiple Jquery objects the slideshow was not working…

Wondering if you could point us in the right direction? (I can email you the link to the test page.)
42 admin said at 5:34 am on April 6th, 2009:
@swany
can you give me link please.
then I can help you.
why you not download the demo.
Here you can see how it works.

thanks,raju
43 admin said at 5:35 am on April 6th, 2009:
@theopensourcerer

thanks boss for your comment.
and your joomla ucd module nice.

thanks,raju
44 Swany said at 1:14 pm on April 7th, 2009:
Raju,

Thank you for respondng.

I did download the demo and tried placing it in my webpage to see if it would work this is what I get..

http://www.blueearthsolutions.com/_newsite/index3.php

Thanks you for any direction you can give me. I appreciate you taking the time to help.
45 Coestjed said at 6:55 am on April 8th, 2009:
hmm… thank you
46 Marcus said at 2:55 pm on April 8th, 2009:
Hey Raju,
thank you for the great work!
I want to put the plugin on my website into an iframe, but the slideshow is not on the left of the index.html. How can I put the slideshow completely to the left of the index.html and also make the width of the index.html as small as the slideshow itself?
If not an iframe, how do you suggest to include the slideshow into an existing website, to make it look somehow like here: whitehouse.gov?
Help would be greatly appreciated!
47 How to Get Your Ex Back said at 7:31 pm on April 8th, 2009:
My fellow on Orkut shared this link with me and I’m not dissapointed that I came to your blog.
48 admin said at 5:48 am on April 9th, 2009:
@marcus
thanks for your comment.
If you gime your index file then I will help you how to position it in iframe.

ok then also you have to change css file to change the position of css file and to control the slider height then you can see config.js file where you have give the height of slider.

thanks again for your comment.
raju
49 DRIRLKENFOENE said at 4:14 pm on April 9th, 2009:
FANTASTIC!
50 Amy said at 9:22 am on April 14th, 2009:
This is great…thanks so much for working on this!

I noticed that it pauses if you click on one of the slide_nav buttons. Is there something I can change so it just plays from the clicked on slide without pausing? I want to use the slide_nav but not the controls.

Thanks!
51 Amy said at 9:32 am on April 14th, 2009:
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!
52 admin said at 10:17 am on April 14th, 2009:
@amy
thanks for your comment.
and you change the correct line.

thanks
raju
53 Heartburn Home Remedy said at 4:35 am on April 15th, 2009:
I can tell that this is not the first time you mention the topic. Why have you decided to touch it again?
54 Amy said at 1:29 pm on April 15th, 2009:
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
55 Padsblalo said at 7:39 pm on April 15th, 2009:
emm.. 10x
56 keith said at 1:21 pm on May 12th, 2009:
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.
57 Thomas Sturge said at 12:27 pm on May 29th, 2009:
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).
58 admin said at 12:42 pm on May 29th, 2009:
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
59 Thomas Sturge said at 12:56 pm on May 29th, 2009:
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?
60 admin said at 1:08 pm on May 29th, 2009:
hi thomas,
no it will not effect on plugin.
you check html file again with config.js settings.
thanks
raju
61 Thomas Sturge said at 1:24 pm on May 29th, 2009:
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.
62 admin said at 1:27 pm on May 29th, 2009:
@thomas,
thanks to find solution.

raju
63 Robertho said at 7:43 am on June 5th, 2009:
cool!!!!!!!!!!!
64 Karol said at 3:43 am on June 15th, 2009:
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.
65 Will said at 3:42 am on June 19th, 2009:
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!
66 Neel said at 9:36 am on July 23rd, 2009:
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.
67 Jen said at 2:08 pm on July 27th, 2009:
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…
68 Dan said at 2:46 pm on July 28th, 2009:
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?
69 Mark said at 4:40 pm on August 1st, 2009:
How do you get it to continue to play after you have clicked on a slide_nav button?
70 Gil said at 7:06 pm on August 4th, 2009:
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!
71 Gil said at 7:10 pm on August 4th, 2009:
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
72 Gil said at 2:38 pm on August 7th, 2009:
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.
73 Jon said at 5:27 pm on August 10th, 2009:
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!
74 admin said at 9:06 pm on August 10th, 2009:
@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
75 Tony said at 5:27 am on August 12th, 2009:
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!
76 Matt said at 12:04 am on August 13th, 2009:
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.
77 Thomas said at 4:31 am on October 12th, 2009:
Your demo and download links go to blank. Where can I download the plugin yet? Thanks for your help.
78 admin said at 5:24 am on October 12th, 2009:
@Thomas,
sorry for this problem.
Actually my site affected by iframe virus.
So I have to clean to move all the link.

thanks
raju
79 Thomas said at 7:55 am on October 12th, 2009:
Hi Raju

can you send me the download link or the plugin via e-mail?

Many Thanks.
80 pranny said at 5:03 am on October 23rd, 2009:
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.
81 Tilemahos said at 5:29 am on November 5th, 2009:
Great work, I’m looking forward to implementing this script very soon.