Well, the 3 days 2 nights Pay Fong Carnival 2009 (“全球培风人 临九汇狮城”) will kick start at 10am, 28 Aug 2009. It is a Biennial event organized for all alumni from my secondary school to get together. Singapore alumni is organizing this year carnival here in Singapore. For me,  I was involved mainly in the website design and ebook creation. It was a great experience to play with some photoshop, play with WordPress design, play with javascript, play with CSS and play with flash based ebook.

Creation of Pay Fong Carnival Website

From starting with the conceptual design, I spent time with our carnival event director (统筹) to streamline the content, create the ebook, change the website layout… Honestly, my event director is a tough person to deal with. He demand high standard and high quality of work. He demanded everything to be complete and thorough.

Our event director had lots of ideas and he also requested for many considerations to make the website more user friendly. I kept telling him “Not possible”, “This one can’t be done lah”, “That one too tough”… Too bad, none of this reasoning was able to move him.  I was also touched by his excitement despite his demanding style… ;-) Frankly, I had no idea on how to solve those issues at that moment. It was a totally a JIT (Just in Time) learning. Grab the idea, search on Google, read online documentations… and finally, the website of Pay Fong Carnival 2009 is finally born.

Through this learning, I learned from him the “Fighter” spirit… Nothing is impossible, we can do it with our passion… Now, as I think back, it wasn’t that difficult after all… This is the first website KokPinLab created.

Pay Fong Carnival 2009 - Website Launched

However, I just felt that the user experience was damn lousy in that way. In particular, it is very disturbing to see new windows being opened or new pop up appearing to show the photo elsewhere. That gave me a feeling of lost of connection from the main website.

LightBox Photo Display Javascript

I search online trying to look for some idea or solution to improve user experience. I found a very cool photo gallery display javascript called LightBox. It allows a photo to be enlarged and displayed right at the center of the screen upon a single click on the thumbnail. On top of that, the background will also be dimmed down to make the photo standing out. It also included some basic “Previous” and “Next” buttons to scroll between all the photos in the same gallery without opening up all the disturbing windows or pop up.

The set up is not very complicated and quite straight forward. You simple need to download the script files, upload it to your server. Personally, I put it under my wordpress theme directory. An instruction is provided in the ZIP file that comes with the script. Follow the instruction to add javascript and CSS headers into your theme files.

If you are familiar with PHP, you can disable the default WordPress gallery setting and modify it to use Lightbox. Programming is just not my cup of tea. I utilized a WordPress Plugin called Cleaner WordPress Gallery for setting up the wordpress gallery for me.

After which, I was done!!! Open up the gallery @ KokPinLab.com and I have my lightbox working… *Happy*… hehe…

Lightbox Photo Display on KokPinLab

Lightbox Script Download

You can download the Lightbox script at: http://www.lokeshdhakar.com/projects/lightbox2/

Setup WordPress for Both English & Chinese Languages

1. Open phpMyAdmin in CPanel

In order to type chinese on your blog, you will need to change some settings inside the SQL database. Firstly, you will need to login to your CPanel, then open phpMyAdmin as followed:

phpMyAdmin in CPanel

2. Select Database & Table of Your Blog

After launching the phpMyAdmin screen, you will need to select the database of your blog on the pull down menu. Once you have selected the database, you will be able to see all the existing tables of the database showing right below the pull down menu.

Select Database & Table in phpMyAdmin

3. Set Collation to utf8_unicode_ci

Click on the database table, you will see the table structure appearing on the right hand side of the screen. In order to store chinese in the database, you need to change the collation setting from latin1_swedish_ci to utf8_unicode_ci.

To change the collation setting, click on the pencil button and you will be a pop up window appearing. Scroll on the pull down menu to select utf8_unicode_ci and save the setting.

You need to go through this steps for all the fields that has existing setting of latin1_swedish_ci. You also need to repeat this step for all tables in the database as well.

Set utf8_unicode_ci in phpMyAdmin

You are Done… Good Luck to You!

After completing the above mentioned steps, you should be able to type and store chinese text (中文） like I do. I suppose you should be able to do this for all other asian language as well. But I have never tried that. Maybe you can share with me if you do have some success on that.

All the best and enjoy blogging in your asian language…