The code sample above is incorrect; It should read:
$(document).ready(function(){
$(“#TestTrigger”).click(function(){
$(“#TestImg”).ImageSwitch({NewImage:”image2″});
});
});

*Julio Thank You. This worked perfect for me!

Thank for pointing out, Julio. I fixed the code.

I’m trying to set up the Single Door effect on mouseover of the image, any pointers for setting up a mouseover event?

Hi,
This link contain the guide of how to make the script fore mouseover effect with imageSwitch, hope it will help
http://www.hieu.co.uk/blog/index.php/2009/03/21/8-guides-to-apply-jquery-and-imageswitch-in-web-design/

hello,

I have 10 divs. Each div has its own image (with class=”select”), and its own button ( with class = “button”)

could i use this pluggin to implement:
everytime the botton of a particular div is clicked, ITS image is flied-out with direction of the button clicked? Also, i dont want the actual image to change. Just a fly-out effect added to it.
If so, how?

Thanks very much in advance!!!
rv

I love this but I cant get it to work at all in my html page. I have some small experience working with javascript but all I get when I try this is the first image on the page and when I click the image – nothing
Can anyone show me how this would look in a html code view
Thanks in advance!

Hey,

Can I get this working with xml or json ? Thnx in advance!

It would be cool to have a random setting for the type of transition, so it makes the images change with a different transition every time.

Hi. I too don’t unerstand how make it work.

Where I must poot this code?

$(document).ready({
$(“#TestTrigger”).click(function(){
$(“#TestImg”).ImageSwitch({NewImage:”image2″});
});
});

I am new to jQuerry, so it’s hard for me to understand.

You should put this code in the end of the HTML file

Is there a simple way to get the transitions to initiate on page load? I want to use the imageswitch without using a button. Thanks!

Hi, there isn’t a really simple way but there is way to do it. You could check out this post its contain almost everything you need to work with imageSwitch:
http://www.hieu.co.uk/blog/index.php/2009/03/21/8-guides-to-apply-jquery-and-imageswitch-in-web-design/

Hi,
I have a problem, the script works only in local server but uploading file on a web provider, it doesn’t work at all!
I’m sorry about my english, but I’m italian.
Could you help me please? )

Hi seven_v,

There is a good chance that’s when u upload to server, the path to the javascript files could be different so it couldn’t load the javascript files.

Or you forgot to upload one of the javascript file (jquery.js, imageswitch.js)

As it’s only javascript, it doesn’t matter if it run on local server or run on a web provider.

If it still doesn’t work, you could just send me the code folder and I will check for you.

Hi HieuUK,
thanks!! I’m not sure to understand the meaning of your first sentence,
what can I do to bypass the problem you suppose to be (I mean the problem about the path to the javascript)??
thank you!! )

V.

I have found the solution!!! ))
It didn’t work because Linux is case sensitive and I need to put a ‘Q’ instead of a lowercase ‘q’ on jquery.js file, because in html I have:

Now it works!!!
thank you!

Valentina

Hi.

Is it possible to get the same effect when changing the background image of DIV and not the src of an image?

Thanks.

Nevermind, I managed.

I created my “own” animation, FlyBG, exactly like the FlyIn and added the change of the bg url:

$(‘#divChris’).css(‘background-image’,'url(http://www.myimage.com/image.jpg)’);

I then used http://www.evanbot.com/article/jquery-delay-plugin/4 to delay the change of the image until the animation completes.

Cheers.

Thanks, the plugin is very useful.

One issue, though – ImageAnimating() always returns false for the “FadeIn” animation, because the data(“imageswap”) is never set. This also causes ImageStop() to fail.

Does it work with jquery 1.4+?

Hi,

My problem is that, if I use a width or height on the images , the the Imageswitch open it at first in an original size, and then will be a defined size. Do you have an idea how can I resolve this problem?

Example:

Simple image gallery

Play slide show

Julio!
Just delete and write again the quotation marks.
Great slider!:D

Hello and congratulations for this fine work.

I am not very strong in jquery and I wonder if it is possible to do that every single animated images without having to click on an effect?

Thank you

Hi there!

Anyone knows how to use this wonderful plug-in to create interactive maps

(img hot spots that activate an effect) if is possibile?

Thanks!
F,

Does this code work for linking the image to a page?

Can you update the example code:

FROM
$(document).ready({

TO
$(document).ready( function () {

What to do for automatic image sliding with different effects?

Hi,

My basic javascript code that puts an image-object in an empty div on the ‘onclick’ event :

var vFotodiv = document.createElement(“DIV”);
vFotodiv.id = “Fotodiv1″;
vFotodiv.onclick = fShowImage;
…
function fShowImage() {
vSelected = window.event.srcElement;
var vImg = new Image();
vImg.src = “foto.jpg”;
vSelected.appendChild(vImg);
}

this works fine, but i can’t figure out how to implement one of the imageswitch effect in this code.
Would be very nice if one of these effect appears when the image comes into the div.

Could someone help me on this please…
thx

nice try, but is slightly usable

- you should expect that the image is fully loaded before starting FadeIn
- you should add the effect of “loading”with a spinner or similar
- you should avoid running other FadeIn while the former
- you should avoid doing the exchange on the same image

Is there a way to make it auto rotate without having to click?

Why didn’t upload a zip example? It’s complicated to deploy it for a novice.
Thanks.

Trying to install this on my website, but having some difficulty. A zip file with demo html would be much help.

Yes, a ZIP will be great!

Throughout New York, London, milan and Paris fashion week.

Thanks, I was trying to do this manually but your solution worked great!

Very strange. All scripts work perfect on my localhost, but when I upload them to remote server they don’t.
Do you know why?

It’s a very nice Slider.

It’s working for me very well with jquery.1.4 version

I try many slider in same page, and it’s working very well

thanks again

Hi HieuUK. Thanks for great script. But I have a problem. Script, doesn’t work with jquery v1.4.2. Can’t understand why.

Great slider. Best I’ve seen so far and that’s saying a lot. I’ve seen my fair share of sliders.

Hi I am really trying to utilize this Image Switch in HTML is that possible? I am familar how to make stylistic change….but can never seem to get the item activated…..

how do I link the pages..I use coda….

My questions would be…

1. Where exactly to put each code..
a. ex. I know about putting the stuff in head section but do i make title changes to make it specific for my page?
b. when I put the .JS into my root…do I need to re-title it?
c. how do I link it all together…

2. how and where do I save images files to be called on.
3. how do I call to images?? IDK maybe if I sent the code you could mark it up and show me what you did or something I would really really like to learn how to use these JS sliders and stuff PLEASE HELP

thank you so much for any help

Its interesting. I would like to know more about this…I really wanted to know how this works can you please help me out…….Thanks for sharing. HER3W

This slider is so sweet. Wondering why I haven’t seen it around the web a lot.

You said to put this code at “the end of the HTML file?” Just like this? Cause it ain’t working, so maybe there’s something else you didn’t mention?

$(document).ready({
$(“#TestTrigger”).click(function(){
$(“#TestImg”).ImageSwitch({NewImage:”image2″});
});
});

So I’ve spent an hour or more trying to figure this out, and the last comment from the author is two years ago. So I guess this was a waste of my time.

cha the code you have above is incorrect. Try

$(document).ready(function(){
$(“#TestTrigger”).click(function(){
$(“#TestImg”).ImageSwitch({NewImage:”image2″});
});
});

ImageSwitch( {…}, function) <–what does the 'function' mean ?