Example

Bellow are some of the combination you could do with ImageSwitch(so far) with the code to demonstrate it.

Fade in

Default Setting

$(“Img”).ImageSwitch({Type:”FadeIn”, NewImage:”NewImg.gif”});
Not fade out the first image

$(“Img”).ImageSwitch({Type:”FadeIn”, NewImage:”NewImg.gif”, EffectOriginal: false});
Full customize

$(“Img”).ImageSwitch({Type:”FadeIn”, NewImage:”NewImg.gif”, EffectOriginal: false, Speed: 2000});

Fly in

Default Setting

$(“Img”).ImageSwitch({Type:”FlyIn”, NewImage:”NewImg.gif”});
With customize start position

$(“Img”).ImageSwitch({Type:”FlyIn”, NewImage:”NewImg.gif”, StartTop: -50, StartLeft: -100});
With customize speed

$(“Img”).ImageSwitch({Type:”FlyIn”, NewImage:”NewImg.gif”, StartTop: 50, StartLeft: 100, Speed:5000});
With customize start opacity

$(“Img”).ImageSwitch({Type:”FlyIn”, NewImage:”NewImg.gif”, StartOpacity: 0.5, Speed:2000});

Fly Out

Default Setting

$(“Img”).ImageSwitch({Type:”FlyOut”, NewImage:”NewImg.gif”});
With customize end position

$(“Img”).ImageSwitch({Type:”FlyOut”, NewImage:”NewImg.gif”, EndTop: -50, EndLeft: -100});
With customize speed

$(“Img”).ImageSwitch({Type:”FlyOut”, NewImage:”NewImg.gif”, EndTop: 50, EndLeft: 100, Speed:5000});
With customize end opacity

$(“Img”).ImageSwitch({Type:”FlyOut”, NewImage:”NewImg.gif”, EndOpacity: 0.5, Speed:2000});

Flip In

Default Setting

$(“Img”).ImageSwitch({Type:”FlipIn”, NewImage:”NewImg.gif”});
With customize end position

$(“Img”).ImageSwitch({Type:”FlipIn”, NewImage:”NewImg.gif”, EndTop: -150, EndLeft: -0});
With customize speed

$(“Img”).ImageSwitch({Type:”FlipIn”, NewImage:”NewImg.gif”, EndTop: -50, EndLeft: 300, Speed:2000});
With customize start opacity

$(“Img”).ImageSwitch({Type:”FlipIn”, NewImage:”NewImg.gif”, StartOpacity: 1, EndTop: 100, EndLeft: 200, StartOpacity: 1});

Flip Out

Default Setting

$(“Img”).ImageSwitch({Type:”FlipOut”, NewImage:”NewImg.gif”});
With customize end position

$(“Img”).ImageSwitch({Type:”FlipOut”, NewImage:”NewImg.gif”, EndTop: -150, EndLeft: -0});
With customize speed

$(“Img”).ImageSwitch({Type:”FlipOut”, NewImage:”NewImg.gif”, EndTop: -50, EndLeft: 300, Speed:2000});
With customize end opacity

$(“Img”).ImageSwitch({Type:”FlipOut”, NewImage:”NewImg.gif”, EndOpacity: 1, EndTop: 100, EndLeft: 200, EndOpacity: 1});

Scroll In

Default Setting

$(“Img”).ImageSwitch({Type:”ScrollIn”, NewImage:”NewImg.gif”});
Without effect original layer

$(“Img”).ImageSwitch({Type:”ScrollIn”, NewImage:”NewImg.gif”, EffectOriginal: false});
Different Direction

$(“Img”).ImageSwitch({Type:”ScrollIn”, NewImage:”NewImg.gif”, Direction:”RightLeft”});
With full customize

$(“Img”).ImageSwitch({Type:”ScrollIn”, NewImage:”NewImg.gif”, Direction:”DownTop”, EffectOriginal: false, StartOpacity:1});

Scroll Out

Default Setting

$(“Img”).ImageSwitch({Type:”ScrollOut”, NewImage:”NewImg.gif”});
Without changing opacity

$(“Img”).ImageSwitch({Type:”ScrollOut”, NewImage:”NewImg.gif”, EndOpacity:1});
Different Direction

$(“Img”).ImageSwitch({Type:”ScrollOut”, NewImage:”NewImg.gif”, Direction:”RightLeft”});
With full customize

$(“Img”).ImageSwitch({Type:”ScrollOut”, NewImage:”NewImg.gif”, Direction:”DownTop”, EndOpacity:1});

Single Door

Default Setting

$(“Img”).ImageSwitch({Type:”SingleDoor”, NewImage:”NewImg.gif”});
With door image

$(“Img”).ImageSwitch({Type:”SingleDoor”, NewImage:”NewImg.gif”, Door1: “url(images/metal.jpg) repeat”});
Different Direction

$(“Img”).ImageSwitch({Type:”SingleDoor”, NewImage:”NewImg.gif”, Direction:”RightLeft”});
With full customize

$(“Img”).ImageSwitch({Type:”SingleDoor”, NewImage:”NewImg.gif”, Direction:”DownTop”, Door1: “url(images/metal.jpg) repeat”});

Double Door

Default Setting

$(“Img”).ImageSwitch({Type:”DoubleDoor”, NewImage:”NewImg.gif”});
With door image

$(“Img”).ImageSwitch({Type:”DoubleDoor”, NewImage:”NewImg.gif”, Door1: “url(/imageswitch/images/metal.jpg) repeat”, Door2: “url(/imageswitch/images/metal.jpg) repeat”});
Different Direction

$(“Img”).ImageSwitch({Type:”DoubleDoor”, NewImage:”NewImg.gif”, Direction:”TopDown”, Door1: “#EBC012″, Door2: “#EBC012″});
With EffectOriginal set to false

$(“Img”).ImageSwitch({Type:”DoubleDoor”, NewImage:”NewImg.gif”, Direction:”DownTop”, EffectOriginal: false});

Write comment

28 comments
4 trackbacks

May 22nd, 2009

Seb

Hi,
“sorry for my english”
I d like have an hover effect with a back to the original image.
I try replace click by hover and ‘toggle’ by ‘FadeIn’ but it s not ok.

Thank you.

HieuUK

Hi Seb, not so sure what you mean, however did you read this one: http://www.hieu.co.uk/blog/index.php/2009/03/21/8-guides-to-apply-jquery-and-imageswitch-in-web-design/ . If you couldn’t find the answer from there, give me another comment here, I will try to to solve it out.

Thank you answering so fast ^^
I didn t find what I’m searching in the 8 guides.
Maybe was here : http://www.hieu.co.uk/ImageSwitch/ImageSwitchSample/FlyIcon.htm
but the link doesn t seems to be ok.

I try to explain you :
I would like use your beautiful Image switch in my Menu.
When I m on hover an image, this one dissapear and an other appear but when I m not hover this image the first image appear like a rollover with your effects …
… my poor english ^^

Hi, from your explaination I think the example in FlyIcon is right for you. The reason the link isn’t work because I don’t want it to . I add the link in already so you could see it in action.
You could download the example in the zip file back to your computer and play around with it. Change the effect to FadeIn if you want to. And if you don’t like the text, just remove it.
This also maybe useful as well:
http://www.hieu.co.uk/ImageSwitch/ImageSwitchSample/FadeInRSS.htm
Playaround and mix it together see if you could work out. If still not alrite, send me your HTML and I see if I could do anything with it.

Perfect !
It s work, Thank you very much

Long life to HieuUK ^^

May 31st, 2009

Ian

Hi, I really like the way you have implemented many different transitions, however what i noticed with the fadeIn particularly and ScrollOut is when the image is getting removed at the end of a fade or scroll it flickers between the two almost barely noticably;

hope you can get this fixed!!

June 9th, 2009

Hi Ian, couldn’t see the problem in my computer, but I heard a few complains about performance. Will try to make it better in the next version.

August 13th, 2009

Justin

I am completely new to this (js and jquery) and am doing the my best I can to understand how this is works. I don’t understand where I define the images I want to use. Where do I edit this, in what file? I tried using your example, and breaking apart the code and paths, but even when I copy this exactly I can’t get it to work. Please help.

April 13th, 2010

pritesh

dfstgsrzd

May 28th, 2010

kriscahya

hi is this cross browser compatible even in IE6?

thanks for any reply

June 24th, 2010

radyo

Thank you nice post

July 19th, 2010

Peter

How would one apply this effect on a background-image? I’d like to click on a menu link, and have the background image change, like http://www.wardancethemovie.com, but probably without the random image.

Thanks for any help you can provide.

September 5th, 2010

rolfen

Nothing happens.
I’m not trying your plugin if the demo dont work.
Thank anyway!

November 16th, 2010

Matthieu Brunet

Nice plugin, but this page doesn’t work on Safari 5.0.2 mac. I got a parse error on line 518. It’s a very long line, so I didn’t find where is the error, but I suppose something is not closed.
Other exemples on other pages works normally.
Thanks

November 17th, 2010

Bombozama

Great plugin. Life and timesaver.

Thanks!

January 15th, 2011

dipigraph

Hi,

I tested your demo in Chrome 8.0.552.237, Firefox 3.6.13, IE7+ on a Windows 7 64 bit and nothing works.

January 18th, 2011

Sale

I think it opens the website is very nice and I like to have web sites of mine, but you so beautiful I do not how good web design and people who collect my website could you help me friends

January 24th, 2011

ivo

jquery rules!!!

February 3rd, 2011

Craigslist Clone

Pretty cool stuff!

February 11th, 2011

Zeth

I hope I can get this to work – this is cool!!

February 25th, 2011

pirco

FF3.6.13 on mac: your demo doesn’t work!!

March 24th, 2011

Sam

examples doesnt work

July 8th, 2011

Amy @ As Seen on TV

I thought the same thing, i’ve been playing around with the examples but they don’t work for me neither.

August 6th, 2011

LOVEDAY

Wow. You can listen to the track right here, and happy divine thoughts about the universe everybody

SD Myusic

Great WORK!

Not able to make it work in IE…Any help is much appreciated….Code is below…Works fine in FireFox…

var ImgIdx = 1;//To mark which image will be select next

function PreloadImg(){
$.ImagePreload(“images/Banner_1.jpg”);
$.ImagePreload(“images/Banner_2.jpg”);
$.ImagePreload(“images/Banner_3.jpg”);
$.ImagePreload(“images/Banner_4.jpg”);
$.ImagePreload(“images/Banner_5.jpg”);

}

var StartBanner = function(){
$(“#Banners”).animate({“top”: “0px”},14500,function(){
if(!$(“#Banner”).ImageAnimating()){

$(“#Banner”).ImageSwitch({ Type:”FadeIn”,
NewImage:”images/Banner_”+(ImgIdx+1)+”.jpg”,

StartOpacity: 0,
EndOpacity: 1,
Speed: 5500

});
ImgIdx++;
if(ImgIdx>4) ImgIdx = 0;
}
});
}

$(document).ready(function(){
PreloadImg();
setInterval(StartBanner,7000);
});