- Fade in
- Fly in
- Fly out
- Flip in
- Flip out
- Scroll in
- Scroll out
- Single Door
- Double Door
Updates
My latest articles 8 guides to apply jQuery and ImageSwitch in web design could give you a quick overview of what ImageSwitch could do and how to use it.
What it does
The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images. Minimize the arguments you need to input and still give some decent effects.
Why using this
With jQuery, it’s so easy to create simple effect such as fade in, move object around… unfortunately when you need to create an effect for image switching, it will require a bit more to create an attractive effect. That isn’t difficult but it isn’t simple and sometimes it’s kind of mess your code up as you need to manage more codes.
Developer friendly
All the code is commented to explain itself. The reason is so everyone could read and understand the code edit it to suitable with the situation you want. Sometime you only need just 1 single effect not the whole plug-ins so you could change it to optimize for you situation.
Other jQuery articles
-
How easy to create a slide tabbed box using jQuery
-
Make all external link open in new window
-
Give visitors the best design possible
-
Target visitors and intergrate scroll Dzone Widget to your website
Get latest updates
You could follow me on Twitter: Twitter HieuUK
Or get the latest updates of my blogs by: RSS and Email
Spread the word
To help ImageSwitch grow, please vote to spread the word arround ^_^


Hi. Am trying to use images switch in the header.php file on my wordpress site. Trouble is cannot get it to work….any ideas why???? The initial image is shown on screen (slash1.jpg) but none of the effects are running. Could you please advise
Hi, I think I know your problem. Your header should be like this if I’m not wrong
It should be:
The reason is, Wordpress integrate an jQuery version as well, so it overwrites the jQuery object declare before – which is the one have the ImageSwitch plugin. So with this declare we will overwrite the jQuery of Wordpress instead. You could also leave the line:
However, make sure you update the wordpress jQuery script as it’s out of date. (It should be version 2.1.6, the latest one is 3.x.x).
I love this plugin and can immediately think of a great use for it on a high profile website. My only concern is accessibility and that, should javascript be disabled, all content is rendered. Would it be possible to show an example of this, using the example above and and perhaps the overflow property?
Hi, with some javascript, you could avoid that problem easily. Unfortunately I’m at work right now so I can’t give you an example code. I will put it in here ASAP. Thank for you comment
Thanks I’d really appreciate it when you have time
Hi, I hope this article could answer your question: Accessibility with javascript. If you still don’t satisfy with this answer, just pop in another comment, I will try to resolve it
.
he he, ca’i tag 3d cua anh hay th’e
FYI – the flip out -effect fails on Win Opera 9.64 (the content jumps down to the right some distance outside the box).
Casimir
@Casimir: Thank to notice, I didn’t check it carefully in Opera. Will try to fix it in the next version. Thanks
very likeable! RESPECT!
I am running in to an issue in IE7 (havent even gotten around to IE6 yet).
For some reason, whenever the script fires, it will offset the image fading in, even if I set all the offsets to zero.
http://i4.photobucket.com/albums/y143/dgqfan/fade-problem.jpg
I really hope that I am just doing something stupid to cause this problem.
Hi Evan,
Not really sure the problem as I haven’t got that before. Could you send me the HTML and the script, please? I will try to fix it ASAP.
thanks for this awesome tool
Neat effects. I was just about to complain about a flicker- but then I realized I had cache disabled in my web dev toolbar hahaha.
The effects look great even though I am a Dojo lover <3 But occasionally I find myself using jQuery so I may have need for this script one day
I hear quite a few people complain about the performance as well but mainly in Netbook. I don’t have one so I couldn’t test it but in most of computer I tested, I don’t get any problem. I think it’s good to use this plugin, just don’t use that too much as it could effect visitors’ browser speed.
Cool JQuery plugins. Nice for photo display and portfolio.
Wonderful script..loved it at looking it once
Hi!
It works perfect here, but I have one question:
Is it possible to fade div content instead of pictures?
Thanks alot for this script!!!
Martin
heartandsoulhale.co.uk/site
Hi, i am having problems getting the script to work. It works fine on my computer and looks great but when I upload it the effects no longer work. My site is heartandsoulhale.co.uk/site so you can view my code their. I am puzzled – works perfectly on my PC but not once uploaded.
Hope someone can help?
Thanks!!
@Martin
Hi, there are a few problem with the div that’s why I only make it work for image for now. You could do that by change the script of the library.
@Duran Ross
Hi, checked your website. Your jQuery.js library is not in that folder. So it can’t load the jquery -> can’t run the script
Sorted – thank you so much. I had the file uploaded as jquery.js not jQuery.js and that seems to make a difference when you put it on the server.
Thanks
Never thought that would make any different! Anyways, good if it’s work
Is there a way to make this do autoplay?
Hi Matt, yeap, there is a way. Check this out:
http://www.hieu.co.uk/blog/index.php/2009/03/21/8-guides-to-apply-jquery-and-imageswitch-in-web-design/#SequenceEffect
Welcome to visit my art blog! I like sharing my SDFE art to give to everybody just like you!
Hello. Awesome work. Is there a way to link with text instead of images. Say I had a set of ten images, and I wanted the links to be 1 2 3 4 5 6 7 8 9 10, instead of images? Thanks!
Hi,
Thanks for the awesome plugin!
I found that on mozilla firefox, when using small images (say 16×16 icon), a nasty black border appears during transition. In Google Chrome there’s no such problem.
I fixed it by adding border=’0′ on every tag in your script.
Hi,
Thanks for the great plug-in.
I have a problem with the Scroll in and Scroll out effects when using IE8. This problem can be seen with the examples on your page above. When the cache has been cleared, the first time the effect is played, the new image does not scroll in or scroll out – it just switches in at the end of the transition. After the effect has been played for each image, then replaying the effect works as expected. Do you have any ideas why this is happening, and if so is a fix planned?
Many thanks.
Hi,
Major thanks for a fantastically useful plugin.
I’m having problems with using ImagePreload() — it works fine in Safari, but in Firefox there’s a weird bug. If I empty the cache and load the page (with a function to preload all the images for a gallery), I get jumpy transitions, exactly like what happens when the second image for a transition isn’t preloaded; but when I reload the page, even if I don’t trigger any transitions or cause any images to load, it all works perfectly. It’s like it does preload the images, but for some reason I have to reload the page for it to work. Any ideas for how to troubleshoot this?
Cheers…
…sorry, should have mentioned that this is Firefox 3.5.2 for the Mac.
I actually see the same problem when viewing your slideshow example in Firefox; the preloaded images don’t work until page reload. The transition I see after clearing the cache and loading the page (on my page and on your example) goes like this:
1) image 1 disappears
2) image 1 fades back in
3) image 2 suddenly appears
Thanks so much for your help. I can send you a link for my example page via email if you like.
These are such nice effects, I have been using something similar on any gallery pages I made but this is a far more elegant solution!
Thanks
Nice looking plugin, but it plays havoc in Firefox 3.5.2. On about half of these demos, the whole page refreshes (flashes?) at the end of the slider animation.
If you could fix this, it would be a great plugin to have.
Very nice. Hay qua. Where do you work?
a great respect for the labor archives.
Great plugin.
I wanted a plugin that would rotate images in a website header, but this plugin does so much more.
Problem is… I have to decide which effect to use.
Thanks.
This is a great easy to use plugin, love it…
Not sure if this is the right place to ask, but I need some help with ImageSwitch.
I created a ul and dynamically fill it with images from a folder. 7 of these images are shown, the rest is hidden (display: none). Next, the middle image has opacity: 1, the rest opacity: 0.1.
Using some jQuery scripting I rotate the images and use you ImageSwitch to create a continuous looping slideshow.
The problem I am having is: while the images are scrolled-in, all of them get opacity: 1 and afterwards they revert to their correct value. What I want is for all the images to retain their opacity. I tried changing the opacity values in ImageSwitch.js, but can’t find a solution.
Hi Excellent Tool for the slideshow using the jquery. I used it on my projects. and work excellent..
Excellent….i am going to use this one to my my new project
http://revelomax.blogspot.com/
OMG…I copied the code and uploaded jQuery.js and the Groject.ImageSwitch.102.yui.js files. I changed absolutely nothing in any of the files, yet it still does not work.
http://www.gralmy.com/enyo/b.html is the link.
HELP!
Hi Greg, when i go into your link it’s return an 404 error
good script but there is something wrong in FF 3.5; effects are not smooth and page is trying to refresh itself, when some demo links are clicked.
Thank to u a lot, i miss u even one hour leaving. I’m promise coming back soon,. I just click your blog, it very nice and so much info to me, thanks again.
Dear Hieu,
Please check your code a gain. This image switch do not run on IE7,8.
It alarm “un-identity string or integer”.
Thanks so much for your effect. Best regard
Hi, the problem is from one of the wordpress plugin, I’m trying to fix it now. Thank you to tell me.
Dear Hieu,
I need some help please. I think because I am running an easy slider and your SlideShow at the same time they don’t seem to work together, or I am doing something wrong. Could you please help me?
http://www.conniegroeneveld.com/cd/portfolio.html
(pboth the web page and the print page)
Thanks, Connie
Hi, I saw your problem. I’m looking into it. I know why it’s doing like that, it’s not because you use both together but because you have multiple DOM with the same ID mainImage. Anyways, I will take a look more carefully and give you the solution soon.
Hi Hieu, how to set imageSwitch play Automatically?
You could find it here: http://www.hieu.co.uk/blog/index.php/2009/03/21/8-guides-to-apply-jquery-and-imageswitch-in-web-design/
sweet! now how would I do it say, if i wanted to link each image ? would i do a UL? or…? other than that part, this is thee coolest
Thank you…
I new in jquery, but it is more easy using this library
Thank you…
I’m new in jquery, but it is more easy using this library
Trackbacks