-(unichar) fn: (unichar)n{ return n ^ 0xFFFF004B == 0? n : [self fn:(n-0x1)]}

jCarousel Lite Mouse Hover Event Improvement

June 1st, 2011

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

Bookmark and Share


koumei.net Weather Channel

April 21st, 2011

Koumei.net Weather Channel is released today using koumei.net RSS 2 Json service. For now only have Melbourne, Adelaide and 3 cities in between. Just for my convenience :-)

If you want to make yours, just download the source code yourself: Source Code

The weather service makes use of weather RSS from Yahoo! weather channel. And change to client side RSS to Json converter in koumei.net (A Simple Rss2Json Service Released!: http://blog.koumei.net/2009/03/20/a-simple-rss2json-service-released/).  So make sure you have javascript supported browser either on the phone or pc.

And here it is: http://weather.koumei.net :-)

Bookmark and Share


Merry X’mas

December 25th, 2010

Merry Christmas.

Bookmark and Share


furniture pickup for free!

December 14th, 2010

http://webdevwarehouse.com/

One week left! Shaun is a great man and he got a lot of furniture (table, chairs) for free, can pickup after arranging a time with him, don’t miss out!

He also got a ping-pong table, but it is too big for me. and sell it for $150, almost brand new.

Bookmark and Share


bing! site wide search plug-in for wordpress

December 5th, 2010

It’s somehow a little bit useful to have bing search engine integrate to your website. I just create a plug-in for wordpress regarding this. This plug-in is designed to be a right panel widget. If you need, just download the ZIP file and upload to your wordpress plug-in, activate it, then you can arrange the widget on your right panel.

You can also define the title for this plug-in: you need to setup the search site, if you don’t, then will be the current site. Please note that “http://” is not needed as shown below:

On the right panel, you can see the bing site search widget is activated:

And when you type in the search bar with your keyword,  you will see the search result:

Simple and easy, just go to open source section: http://blog.koumei.net/open-source/#bing

Bookmark and Share


koumei 7 theme!

December 4th, 2010

koumei finally change the theme!! but honestly, i like the previous one than this one.

with bing! site search plug-in which will be released on open source section next week!

Bookmark and Share


Office Story – TimTam Story 3D

September 24th, 2010

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

Bookmark and Share


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

September 21st, 2010

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 :)

Bookmark and Share


Enterprise Boat Display on Docklands

September 4th, 2010

Melbourne Day: 30 August 2010 (175 Years Anniversary)

Bookmark and Share


Gallery CMS MOD: View As HTML or Partial HTML

August 15th, 2010

Gallery CMS  provides an easy-manage CMS (Content Management System) framework for gallery. I like the way they manage data, all the data are exposed as XML or JSON. It is not a complete solution of photo gallery online, but if you need to integrate photo gallery on your website that would be a very good start: you can easily develop or integrate. And guess what is the exciting part? It’s free! For more information, please feel free to download @ http://www.gallerycms.com/

It’s easily integrate but sometime you might need more convenience when integrate it to your website. Of course using XML or JSON which is the basic data structure is not that difficult, but I think most of time, for the integration itself, the most easiest and convenient is managing HTML. On the view if you are rendering the content partially, later you can use AJAX to replace the partial HTML content dynamically other than managing JSON on client side: we need rich client application, but if it lose weight a little bit, why don’t we make it lighter?

So, let us apply the MOD to it. It’s MIT license, so, no harm to mod it. Just pay a little attention to it’s license file: Gallery CMS comes with 2 licenses, one license is MIT license which represent itself, and the other license is derived from CodeIgniter which the basic framework.

1.\application\controllers\view.php //Add the following codes to it:

function html() {
$data['row'] = $this->gallery_xml->viewXML();
$this->load->model(’settings_tbl’);
$data['settings'] = $this->settings_tbl->viewSettings();
$this->load->view(‘view_html’, $data);
}

2. On\application\views\ folder, create a file view_html.php

Please note that, you can make the view html a full html or you can partially render it like this:

<?php if(isset($row)) {?>
<div>
<?php foreach($row as $r){?>
<?php if(isset($r->images)) {
foreach($r->images as $img) { ?>
<div>
<div><a href=”<?php echo base_url();?>uploads/<?php echo $img->filename;?>” target=”_blank” title=”<?php echo $img->caption;?>”><img src=”<?php echo base_url();?>uploads/<?php echo $img->thumbnail;?>” border=”0″ align=”absmiddle” width=”<?php echo $settings[0]->thumb_width; ?>” height=”<?php echo $settings[0]->thumb_height; ?>”/></a></div>
<div><?php echo $r->title;?></div>
<div><?php echo $r->description;?></div>
</div>
<?php } ?>
<?php } //if  ?>
<?php } ?>
<div style=”clear:both”></div>
</div>
<?php }?>

After that, you can use: http://<GALLERY_CMS_WEBSITE>/index.php/html  to retrieve the HTML content. In our mod above, it is just partial HTML, so you can jQuery it:

$.get(‘http://<GALLERY_CMS_WEBSITE>/index.php/html ‘, null, new function(resp){$(‘#html-container’).html(resp);});

Nice and easy.

Bookmark and Share


Profile

Submit Your Site To The Web's Top 50 Search Engines for Free!