Full syntax
Bellow is the full syntax of ImageSwitch with its default value:
$.ImageSwitch({
Type: "FadeIn", // Type of effect to run the function
NewImage: "", //The new image will be loaded in
EffectOriginal: true,
Speed: 1000, //Speed of the effect
StartLeft: 50, //The position the effect start compare to original position could be (-)
StartTop: 0,
StartOpacity: 0, //Which start opacity it would be
EndLeft: -50, //The position the effect end compare to the original position could be (-)
EndTop: 0,
EndOpacity: 0, //Which start opacity it would be
Direction: "RightLeft", //Which Way the image will be sroll
Door1: "", //The image for the door 1
Door2: "" //The image for the door 2
}, function);
Although it’s quite long, all the effect could work with only 2 settings: “Type” and “NewImage”.
You could still use it with only “NewImage” setting as ImageSwitch it will run “FadeIn” as default.
How to use the plugin
To use the plugin you will need to include jQuery javascript file which you could download at:http://jquery.com
Then include the plugin file download from the download section.
The full source is:
Then create an < IMG > object which will be used to load new image. Name it anything you want. I will name it: TestImg. We also need a button to trigger the effect. You could just make a link for it
Use the syntax ask in the example, the full code could be:
$(document).ready({
$("#TestTrigger").click(function(){
$("#TestImg").ImageSwitch({NewImage:"image2"});
});
});
That’s it. Done for a simple ImageSwitch effect.
If you need any further help, you have an idea of new effect, you could give us a quick comment.
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
Trackbacks