ImageSwitch

Slash
  • Fade in
  • Fly in
  • Fly out
  • Flip in
  • Flip out
  • Scroll in
  • Scroll out
  • Single Door
  • Double Door
Download

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

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 ^_^



DZone

Reddit

Digg

Dotnetkick

  • Delicious
March 30th, 2009
Daz

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

March 30th, 2009

Hi, I think I know your problem. Your header should be like this if I’m not wrong


...
< ?php wp_head(); ?>

It should be:

< ?php wp_head(); ?>
...


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).

April 3rd, 2009

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?

April 3rd, 2009
admin

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 :)

April 3rd, 2009

Thanks I’d really appreciate it when you have time :)

April 4th, 2009
admin

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 :) .

April 7th, 2009
tung

he he, ca’i tag 3d cua anh hay th’e

April 8th, 2009

FYI – the flip out -effect fails on Win Opera 9.64 (the content jumps down to the right some distance outside the box).

Casimir

April 8th, 2009
admin

@Casimir: Thank to notice, I didn’t check it carefully in Opera. Will try to fix it in the next version. Thanks :)

April 9th, 2009
thom

very likeable! RESPECT!

April 10th, 2009

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.

April 10th, 2009
admin

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.

April 20th, 2009

thanks for this awesome tool :D

April 22nd, 2009

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 :D

April 22nd, 2009

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.

April 23rd, 2009

Cool JQuery plugins. Nice for photo display and portfolio.

June 14th, 2009
ani

Wonderful script..loved it at looking it once

July 2nd, 2009

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

July 2nd, 2009

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

July 3rd, 2009

@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 :)

July 3rd, 2009

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

July 3rd, 2009

Never thought that would make any different! Anyways, good if it’s work :)

July 10th, 2009
Matt

Is there a way to make this do autoplay?

July 11th, 2009

Welcome to visit my art blog! I like sharing my SDFE art to give to everybody just like you!

August 4th, 2009

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!

August 5th, 2009
Jacket

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.

August 7th, 2009
Russ

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.

August 11th, 2009
sixswitch

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…

August 11th, 2009
sixswitch

…sorry, should have mentioned that this is Firefox 3.5.2 for the Mac.

August 11th, 2009
sixswitch

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.

August 12th, 2009

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

August 12th, 2009

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.

August 12th, 2009

Very nice. Hay qua. Where do you work?

August 13th, 2009

a great respect for the labor archives.

August 16th, 2009

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.

August 24th, 2009

This is a great easy to use plugin, love it…

September 1st, 2009
Yvar

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.

September 25th, 2009

Hi Excellent Tool for the slideshow using the jquery. I used it on my projects. and work excellent..

October 19th, 2009
Nikesh ponnen

Excellent….i am going to use this one to my my new project

http://revelomax.blogspot.com/

October 26th, 2009

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!

October 28th, 2009

Hi Greg, when i go into your link it’s return an 404 error

November 10th, 2009

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.

November 13th, 2009

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.

February 8th, 2010

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

February 8th, 2010

Hi, the problem is from one of the wordpress plugin, I’m trying to fix it now. Thank you to tell me.

February 9th, 2010

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

February 10th, 2010

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.

February 25th, 2010

Hi Hieu, how to set imageSwitch play Automatically?

March 1st, 2010
Sincere

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 :P

March 9th, 2010

Thank you…
I new in jquery, but it is more easy using this library

March 9th, 2010

Thank you…
I’m new in jquery, but it is more easy using this library

Trackbacks
March 28th, 2009
Trackback from: | HieuUK
March 31st, 2009
April 4th, 2009
April 12th, 2009
April 18th, 2009
Trackback from: jQueryを使ったス
April 21st, 2009
Trackback from: Sliding Content
August 16th, 2009
Trackback from: - ShakyaNilam
August 19th, 2009
August 24th, 2009
September 24th, 2009
February 10th, 2010
Leave a Reply