It’s a week since I released the new jQuery plugin, ImageSwitch and the result’s amazing. I have thousands of page views a day, link backs(even from Japan) and a lot of emails, twitter followers, subscriptions… Thank you everyone.

As I received many emails asking about how to use IS and improvements for the IS. In one weeks I worked hard to bring you some good news.

1. The release of new ImageSwitch 1.0.2

2. 8 guides to apply jQuery and IS into web design

The guides aren’t just cover jQuery and IS, it’s also cover some important javascript which could help you use javascript more effectively.

You could also download all the examples in a zip file here.

New stable version of ImageSwitch: 1.0.2

As always, the first version will has a few problems even though I tested in different situations. With the new version, it will be more stable, more interactive and easier to control.

Don’t worry if you using the old version. The new version is back-compatible with the old one, so you don’t need to change your scripts, CSS or HTML.

There are some new features in this new version. I received a lot of request for ImagePreload function, so even it’s quite simple but it could be useful. Another function is ImageStop allow you to stop an animation and ImageAnimating to let you know if the object is Animating or not.

8 guides to apply jQuery and IS into web design

I received a lot of email said: my IS would be perfect for their galleries/slide shows websites. However IS is more than just for pictures galleries. It could also be used for almost any part of web design (which use images of cause).

Bellow is the tutorials guide you through the steps to make IS works for you. I also include download versions of all tutorials so you could learn from it. The CSS and Javascript codes are all included in HTML file to help you read it easier.

Flip the card

Example

Answer some FAQ: 

1. Flip a card
2. Preload images

It’s the first one in the series because it’s so simple. I read somewhere one of my visitor said he want to use the IS to assembly the card flip effect. I’m quite like that’s idea so I try to make it with my IS.

It’s quite simple with a few lines of code. There won’t be any problem with CSS as IS will take care of it.

So start with basic html for an image:

<img id="FlipInCard" src="images/pc1.jpg"/>

Now, we will need to add an event to this image so whenever users click on the image, it will flip to the next one.

$("#FlipInCard").click(function(){
	if(!$(this).ImageAnimating()){
		$(this).ImageSwitch({	Type:"FlipIn",
								NewImage:"images/pc"+ImgIdx+".jpg",
								EndLeft: 80,
								EndTop: -20,
								StartOpacity: 1,
								Speed: 500
								});
	}
	ImgIdx++;
	if(ImgIdx>3) ImgIdx = 1;
});

ImgIdx is a counter variable to keep track of which image will show up next. Also if the index is more than the maximum number, it will starts over again.

We use the FlipIn with some simple setting. Keep StartOpacity: 1 to make the card always at maximum opacity.

This tutorial also present a new function of ImageSwitch. Which is ImagePreload.

function PreloadImg(){
	$.ImagePreload("images/pc1.jpg");
	$.ImagePreload("images/pc2.jpg");
	$.ImagePreload("images/pc3.jpg");
}

The function is quite simple, it just loads all the image into the memory so there won’t be any delay when the effect start.

Try it now – 3 lines of code for 9 different effects

Example

I asked my friend, how many lines of javascript codes he think I have used to create the front page of ImageSwitch – which is 9 different effects. He said 36 lines, fair enough, 4 lines for each effect which is pretty short already. Or is it?

When I said the actual effects only 3 lines. He was like no way. Let’s see the code:

$(".SlashEff ul li").click(function(){
				$(".Slash").ImageSwitch({Type:$(this).attr("rel"),
											NewImage:"images/slash"+ImgIdx+".jpg"
										});

So how it works. Basically, in every effect trigger <li> I set the rel attribute is the name of the effect. So whenever users click on a trigger, I could get the name of the effect from that attribute. It’s more of a tricky way but it saves me a lot of time. Now let take a look at a sample line of the html as well, shall we.

Fade in

You could check full code in the HTML example file.

Interactive menu with fly in icon

Example

This example is more likely used in web design. When users move the mouse over a link in the menu, create a attractive fly in effect for that icon.

It wouldn’t be simple without IS, but with IS, it’s just a few simple line of options.

So the effect will be trigger by event hover. This how I implement the fly in effect.

$(".TriggerEffect").hover(function(e){
	$(this).children("img").ImageStop(true,false);
	$(this).children("img").ImageSwitch({	Type:"FlyIn",
											NewImage:$(this).children("img").attr("src"),
											EffectOriginal: false,
											StartLeft: -20,
											Speed: 500});
	e.preventDefault();
});

First thing first, it will stop any animating of the current effect before it start fly in. Because IS only allows one effect run at a time for each object, if you not checking it, the new effect will have to wait for the current effect stop before it could run.

A see a lot of people forgot to use e.preventDefault(). So what is it for? Say you have a link

Test link

Even it won’t lead to any where it still a link. So if you click on this link 10 times to try the effects, you will need to go back 11 times to get back to the page before this page. e.preventDefault() will stop this default event happen.

If the icon flied in, than it should also fly out. So another IS for the fly out effect.

				$(this).children("img").ImageStop(true,false);
				$(this).children("img").ImageSwitch({	Type:"FlyOut",
														NewImage:$(this).children("img").attr("src"),
														EffectOriginal: false,
														EndLeft: 20,
														Speed: 500});

				e.preventDefault();			

Again, nothing special about the CSS. Just an image object next to a text. As simple as that:

Email 

Popular beautiful RSS fade in effect

Example

A lot of website’re using this effect. Even though it’s a straightforward effect, it still impresses a lot of people (include myself). I made one of my own on top of the page.

Without IS, you will need to create a div with the background is the light grey RSS logo, inside that div, make an image object with src is the orange RSS logo, then set the orange RSS logo’s opacity = 0. After that, create a hover event to trigger the animation of the RSS logo opacity increasing and decreasing…

Well, it’s easy, but how about this. Create an image object. Then using hover event IS between those two images. Sound much more straight forward right.

Start with the code:

		$(".TriggerEffect").hover(function(e){
			$("#RSSImg").ImageStop(true,false);
			$("#RSSImg").ImageSwitch({	Type:"FadeIn",
										NewImage:"Images/RSSOrange.jpg",
										EffectOriginal: false, Speed: 500});
			e.preventDefault();
		},function(e){
			$("#RSSImg").ImageStop(true,false);
			$("#RSSImg").ImageSwitch({	Type:"FadeIn",
										NewImage:"Images/RSSbw.jpg",
										EffectOriginal: false, speed: 500});

			e.preventDefault();
		});

The same with the fly in effect. One IS for mouseover and one IS for mouseout. Make sure to keep the ImageStop on top so it will clear any animation which’s running before starting a new one.

You will see I use EffectOriginal: false here. What is it actually do? ImageSwitch Fade In effect is actually 2 layers of image. The original image will be at the back. If we set EffectOriginal: true. The original image will fade out and the new image will fade in. It’s good for many cases but in middle of the animation, there is a bright image which is both of the image has opacity: 0.5. It’s not what we want in this situation.

Another no CSS. HTML is also quite simple. An image with an <a> around it.

My top navigation effect

Example

Another popular effect. When I visit NCover website, I love their front design with hand draw pictures. Whenever you move the mouse on top of a section, that image change to another one. The images are really good, but I was just thinking. Why they don’t use my IS, it would be amazing. And guess what, 5 lines of code for it. Again, why not???

So let get to the code

			$("#ImgObject").ImageStop(true,true);
			$("#ImgObject").ImageSwitch({	Type:"FadeIn",
											NewImage:$(this).attr("href"),
											EffectOriginal: false,	Speed: 500});
			e.preventDefault();

So whenever user moves the mouse on top of a button, the big image will change to another one with fade in effect. Now you have more choices as IS support 9 different effects. Scroll or Door is also good in this situation. As you could see in the code, all the image link will be store in the <a> surround the image.

The HTML is a bit more complex now and you also need to work a bit on the CSS. However, it’s only because of the way I layout my menu, it’s not effect the animation at all.

The CSS will make sure all the <li> will be in one line. The size of the <a> will also set the size of the <li> as well. Which pretty the main problem.

#BackgroundDiv{
	background: url("images/topbg.jpg");
	margin: 0 auto;
	width: 968px;
	height:354px;
	position: relative;
	overflow: hidden;
}
#SwitchImg{
	left: 300px;
	top: 124px;
	position: absolute;
}
#TabMenu{
	left: 460px;
	top: 90px;
	position: absolute;
}
#TabMenu ul li{
	list-style-type: none;
	margin-right:12px;
	overflow: hidden;
	float: left;
}
#TabMenu ul li a{
	display: block;
	width: 95px;
	height: 30px;
}

The last 3 effects are much more complex (only compare to the ones above) and of course much much more interesting.

Sequence of different effects

Example

1. Trigger effect without click event
2. Run a sequence of different effects with different settings

Right, so we want to run a list of different effects with IS as a continue animation. First thing we need to know is trigger the animation.

We could trigger the animation by using :

setInterval(StartAds,3000);

So now it will trigger the StartAds function every 3 seconds.

To store a sequence of effect with different setting, I use a multi-dimension array.

	var ListEffect = [	["I make 3D", "I do script", "I play Lego"],
						["ScrollIn", "ScrollOut", "ScrollIn"],
						["TopDown", "LeftRight", "DownTop"]];

Now we set a index variables and everytime trigger the StartAds functions, we increase the index by 1. Change the new image, and get the effect and the direction from the array list.

			if(!$("#Ads").ImageAnimating()){
				$("#Ads").ImageSwitch({	Type:ListEffect[1][ImgIdx],
										NewImage:"images/Ads"+(ImgIdx+1)+".jpg",
										Direction: ListEffect[2][ImgIdx],
										StartOpacity: 1,
										EndOpacity: 1,
										Speed: 500
										});
			}

You will see the title will hide when the effect start and come back again when the effect stop. To do that, we need a animate surround our IS image and another animate for that div after finish the animation. The code will look like this:

		$("#Description").animate({"top": "-20px"},500,function(){
			if(!$("#Ads").ImageAnimating()){
				$("#Ads").ImageSwitch({	Type:ListEffect[1][ImgIdx],
										NewImage:"images/Ads"+(ImgIdx+1)+".jpg",
										Direction: ListEffect[2][ImgIdx],
										StartOpacity: 1,
										EndOpacity: 1,
										Speed: 500
										},function(){//Come back when the effect stop
											$("#Description").html(ListEffect[0][ImgIdx]);
											$("#Description").animate({"top": "0px"},500);
											ImgIdx++;
											if(ImgIdx>2) ImgIdx = 0;
										});
			}
		});

The HTML is just so plain, nothing special:

I make 3D

			
		

That’s it, we have a pretty cool sequence effects with minimum of codes.

Slide show gallery with jQuery

Example

ImageSwitch was born for slide show, so when I think about make a list of way to apply IS in web design, this is on top of my list. With the power of jQuery combine with ImageSwitch, this work is just a piece of cake.

This tutorial is also show you the use of index and eq in jQuery which become handy in a lot of situation.

Now let’s start with the HTML structure, a big image to display the main image and a list of all thumbnail bellow it. Also, add trigger to start the animation.

Play slide show

			
		

			
			
			
			
		

Ok, we need to create a function, which using the index of current thumbnail to switch the main image. I call it ChangeImage.

		var ChangeImage = function(){
			//If the image still animating, stop it and start the new one
			$("#MainImage").ImageStop(true,true);
			$("#MainImage").ImageSwitch({NewImage: $(".TnImage").eq(Idx).attr("src").replace("tn-","med-")});
			//Mark which thumbnail is displaying
			$(".TnImage").css("opacity","0.5");
			$(".TnImage").eq(Idx).css("opacity","1");
			//Set the next image will be display
			Idx++;
			if(Idx>3){
				Idx = 0;
			}
			//Start preload the next image
			$.ImagePreload($(".TnImage").eq(Idx).attr("src").replace("tn-","med-"));
		};

The main switch function is only the first two lines. The different between my thumbnails and the normal size images is the prefix, that why I need to change from tn to med. We also preload the next image, so there won’t be any delay when we start the next effect.

You may also notice I increase Idx everytime the function called. The reason for that is to start the slide show we only need continuously call the function by setInterval.

The work is simple now. Whenever user click on the thumbnail, we change the Idx and call the function ChangeImage.

		$(".TnImage").click(function(){
			Idx = $(".TnImage").index(this);
			ChangeImage();
		});		

Start trigger the slide show by setInterval and call the ChangeImage every second.

IntervalKey = setInterval(ChangeImage,1000);

However, we could start the slide show, we should also allow user to stop it. We use the bind and unbind function of jQuery. Here is the fully code:

		var StartSlideShow = function(){
			IntervalKey = setInterval(ChangeImage,1000);
			$("#SlideShow").text("Stop Slide show");
			$("#SlideShow").unbind("click");
			$("#SlideShow").bind("click",StopSlideShow);
		};

		var StopSlideShow = function(){
			clearInterval(IntervalKey);
			$("#SlideShow").text("Start Slide show");
			$("#SlideShow").unbind("click");
			$("#SlideShow").bind("click",StartSlideShow);
		};

		$("#SlideShow").bind("click",StartSlideShow);

To create just a gallery is simple, special with the ImageSwitch. The a little bit complex part is only how to bind and unbind events. However when you get use to it. It’s not that’s hard after all.

Flip clock, the most interesting effect

Example

This is the most interesting effect however unfortunately, it’s also the most useless effect. Can’t think of how you want to put a flip clock into you website. However it could be nice to stimulate the effect of, I don’t know, stock market information I guess.

This is quite complex. You start by get the current time.

var CurrentDate = new Date();

Start by drawing the second. Get the second out, check to see if it is 1 or 2 characters. If it’s 1 character, set the first character = 0; You get the idea

			//Set for seconds
			var sec1 = 0;
			var sec = 0;
			if((CurrentDate.getSeconds()+"").length>1){
				sec1 =(CurrentDate.getSeconds()+"").substr(1,1);
				sec = (CurrentDate.getSeconds()+"").substr(0,1);
			}else{
				sec1 = (CurrentDate.getSeconds()+"").substr(0,1);
			}		

Now see if we need to change the flip clock for the first number. 

			if($("#Sec").attr("src") != "images/c"+sec+".jpg")
			{
				$("#Sec").ImageSwitch({	Type:"ScrollIn",
										NewImage:"images/c"+sec+".jpg",
										Direction: "TopDown",
										StartOpacity: 1,
										Speed: 500
										});
			}

Using the scroll in effect, a simple touch for an interesting effect.

Then the second number.

			$("#Sec1").ImageSwitch({Type:"ScrollIn",
									NewImage:"images/c"+sec1+".jpg",
									Direction: "TopDown",
									StartOpacity: 1,
									Speed: 500
									});

Now, that’s how it work. The reason the code is so long is because you need to repeat it for minutes and hours as well. Well just copy and paste really.

To start the trigger right when the page ready. We use these codes:

	$(document).ready(function(){
		setInterval(DrawClock,1000);
	});

Conclusion

With the help of ImageSwitch, I can’t seem to say any of these tutorial is difficult. It’s pretty straight forward. With just a bit of code, you could make your website much more interactive.

I improve the plugin quite a lot since the first time it come out thank to the suggestions of my visitors. I know there are still potential for this plugin. If you find any effect you like, any idea which could be put in here. Please let me now. Also, if you have trouble with the plugins or the example, just email me, I will try to reply to you ASAP.

Thank you