Category Archives: Interesting

jCarousel Lite Mouse Hover Event Improvement

jCarousel Lite is a fantastic jQuery plug-in to display photo gallery. You can have a look at the demo at: http://www.gmarwaha.com/jquery/jcarousellite/#demo

On this demo, the photo gallery will only scroll left or right when you click on the left arrow and right arrow. On jCarousel’s document, we can initialize the carousel start scrolling when the page finishes loading by specify the option: auto

$(".slider").jCarouselLite({
visible: 4,
<strong>auto: true</strong>,
speed: 2000
});

What if I want it to stop when my mouse hover on any of the images? Oh, jCarousel does not originally handle mouse hover event. Well, DIY time.

Firstly, download the carousel original source code from the official website

open that file (jcarousellite_1.0.1.js)

Second, add a code block between line “function go(to){” (about line 292):

//&lt;!--add by koumei
var isMouseOver = false;
$(this).mouseover(function(){
isMouseOver = true;
}).mouseout(function(){
isMouseOver = false;
});
//add by koumei--&gt;
function go(to) {
...
...

Third, modify function go: (around line 293)

Change "if(!running)" to "if(!running &amp;&amp; !isMouseOver)"

Fourth, DONE.

Quite simple, I hope the author will consider this function to the next release. :-)

You can also download my modified version and the demo at:

http://koumei.net/download/carousel-demo.zip

Office Story – TimTam Story 3D

It’s quite a funny story that my very creative colleague found a post card and made an office story which is now pinned on my desk. Now I revise to TimTam Story in 3D..

What’s wrong with me recently… I think I am going crazy about 3D images :)

Copyright is reserved

Original Story: David Jones ( Office Story )

Cosplay: Koumei, Ritika

Script Revision: Koumei

Tim Tam Story Take 1

3D Image Howto – A Simple Technique To Create 3D Vision

3D has been popular recently and become common ever since James Cameron filmed Avatar in 3D. Nobody can resist its marvellous effects. If the visual effect has already been impressive then 3D vision will make it double.

Well, 3D movie is not easy to make in contrast to 3D still picture. With photoshop, you can easily make your picture/photo shown on 3D. Of course, to gain the 3D vision, you have to get a red-cyan 3D glasses first. You can even make it yourself, but trust me, it’s cheap just search on eBay.

First of all, you need to know a little bit about the color channel system and layer system in photoshop. In a word, if you know photoshop well, making 3D still picture is just a piece of sushi. :)

Normally we need to take 2 photo (towards the same object or view) to simulate the left and right eye vision, then render them (project them) into the same place, We need to use the red-cyon glasses to filter the different color to cheat human’s eye that there is a depth of the object to form 3D vision. But In our case, we just have one photo, so need to use some powerful tool like photoshop to separate the color channel and combine them together.

Let’s do it now. First of all, you need to get a photo which you would like to make it 3D. Well, theoretically can be any picture. But better use some simple for practicing at the first time. You need to adjust detailed part of picture to make the depth of vision vary ( make it more 3D)

In this example I would like to use Ninja Gaiden Sigma II poster, I am fascinate in Ninja Gaiden series ever since XBOX age. It is considered to be the great action game in the world, even now, I don’t think there is an action game can beat it. But believe me it’s more vicious and violent when comes to episode 2 (Ninja Gaiden II and Ninja Gaiden Sigma II), please play this game with parent guided. :)

Download this picture(wallpaper from Tecmo official website):

Open it on photoshop, of course, you can DIY some decoration on this photo first.

1. Duplicate the image into 2 layers. Select the 1st layer, and go to channel panel, and delete whole red channel to create left eye vision, like the picture shown below:

2. Select the 2nd layer and do the same thing, but this time, remove Green and Blue channel to create right eye vision:

3. Select the top layer ( in this case, “layer 1 copy”), and then select “Multiply” color bending to combine those 2 layers:

Now you should be able to preview your picture using the red-cyon glasses. But, the 3D vision is not so strong, because we are not using 2 pictures and we just simulate these pictures are captured by both eyes. So need to adjust the detail part of the image to create more real vision.

Just take the Ryu Hayabusa’s foot as an example. As the picture shows, the foot should be closer to the camera, so we need to adjust the right eye vision a little bit, to create closer look:

4. Select the foot part of the body:

Use move tool to move the distance right a little bit, like 2 pixels. After moving the foot part, you can see there is a while gap between ankle and leg, So we need to fix this:

5. Select smudge tool to blur the gap:

6. Repeat the detailed adjustment like head, hand and the sword.

7. Finally: (Click to open to see the full image)

More :)

ASP.NET MVC Whole Site 301 Permanent Redirect

For some reasons, we need to permanently redirect the whole website to another website. It would be much easier that you are the owner of the server. But most of time you just host your website on the server out there. It wouldn’t be a big problem that your hosting company will support you to do some simple 301 redirect or may you have enough privilege to do it yourself. Is it possible to redirect permanently the website to other website by programming a little bit?

Sure you can. With MVC routing facilities, you can define your customized redirect logic: CREATE AN EMPTY MVC PROJECT, MODIFY GLOBAL.ASPX.CS FILE ONLY ON THIS EXAMPLE:

First of all, define two objects which implemented IRouteHandler and IHttpHandler, you can feel free to define those two objects on Global.aspx.cs file:

//@Implements IRouteHandler
class RedirectRouteHandler : IRouteHandler
{
private string newUrl;
public RedirectRouteHandler(string newUrl) { this.newUrl = newUrl; }
public IHttpHandler GetHttpHandler(RequestContext requestContext)
{
return new RedirectHandler(newUrl);
}
}

//@object implements IHttpHandler
class RedirectHandler : IHttpHandler
{
private string newUrl;

public RedirectHandler(string newUrl) { this.newUrl = newUrl; }

public bool IsReusable { get { return true; } }

public void ProcessRequest(HttpContext httpContext)
{
httpContext.Response.Status = “301 Moved Permanently”;
httpContext.Response.StatusCode = 301;
httpContext.Response.AppendHeader(“Location”, newUrl);
return;
}
}

Then add one line on RegisterRoutes(RouteCollection routes) method (in Global.aspx.cs):

routes.Add(new Route(“{*pathInfo}”, new RedirectRouteHandler(@”http://koumei.net”));

Now all request to the website will redirect to “koumei.net” permanently. :)

REMIX10 – Share the Web Love, Late Update

I almost forget the interesting 2-day event or you can say “meeting” in Melbourne. The idea of this conference is to show Microsoft developer the latest development kits and to let technical or IT people catch up each other. $300 for joining the meeting but I got it for free. Thanks to my boss to give me such great opportunity to join the great event.

I got 2 souvenirs, such as t-shirt, caps, but all are related to Microsoft stuff. You want to get the t-shirt? well, need to make some efforts. Everyone who attends the meeting will get a magic cube from the host, and need to fix the cube to a designated image. After all, once cubes are fixed, the host sorts them out and put them in a frame, to shape a IE icon:

The Frame of Magic cubes

The Frame of Magic cubes,Everyone is involved

I think the most useful sessions are about how jQuery works peacefully with ASP.NET and VS.NET 2010 new features, and one interesting session talking about the future data representation, and introduce Pivot. Microsoft considers the cooperation with jQuery is a giant step forward, and shows its ambitions to open source community. Microsoft starts to contribute to open source community and make a lot of effort towards it, look forward to seeing its powerful tool released in months to come.

Frankly Speaking - Talk Show in REMIX10

Frankly Speaking - Talk Show in REMIX10

One thing somehow a little bit disappointed me is on this event, Microsoft doesn’t show any thing about HTML5 and CSS3, I think because Microsoft more focuses on sliverlight technology?