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

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

Third, modify function go: (around line 293)

Change "if(!running)" to "if(!running && !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

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

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

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.

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 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.

In here, I would like to introduce some useful utilities for Joomla development. Actually the tools are also good for any website development.

Firefox

I don’t want to spend too much time introduce the open source website browser. There are at least 3 must-have plug-ins for Firefox:

1. Firebug

Good for Javascript debug, CSS preview and website structure analysis.

2. Fireshot

Sometimes we got a headache because you need to capture a screen shot of the website which is oversize in height. For a long time, I need to use window painter to join every single pieces of screenshot together to form a integrated website. With Fireshot, just fire it in one shot. Absolutely good tool.

3. Rainbow

This tool is quite useful if you need to get the color from the website (in hex decimal)

Just 3 tools? Hmm, for me, I think they are enough for the development. Of course you might need other tools to help you. In my opinion, not all tools are useful. But at least those 3 tools, especially Firebug could save you a lot of time if you need to deal with many HTML/CSS and javascript stuff.

The improvement includes:

• Uses template engine to show widget. No more embedded HTML.
• Moves all functions to a util class
• Supports up to 5 RSS
• Still reads RSS feed dynamically on client-side

The feature version will be released next day or two, will enhance javascript flexibility. E.g., not compulsorily needs jQuery framework.

You can download the widget on http://www.koumei.net/download/wp-webKlip.zip

Relative article:

Wordpress Widget: Client-side RSS util, The Web Klip Released!

The following files should be updated (if you want to satisfy IE 8 users):

• \components\com_virtuemart\js\mootools\mootools-release-1.11.js  (update to 1.21)
• \components\com_virtuemart\js\mootools\mooPrompt.js (you have to revise it manually. Should change a lot of JS class definitions in accordance with mootools 1.21 syntax)
• \components\com_virtuemart\js\slimbox (update to slimbox for mootools 1.21)
• \components\com_virtuemart\themes\default\theme.js (you have to revise it manually. Should fix a bug on line 59, change to var timeoutID = setTimeout( ‘document.boxB.close()’, 3000 );)

Besides updating corresponding files, you can also disable Ajax function on the administration page. Or.. Wait until next stable release of VM). If you need the files above, just leave me a message, and I will pack them up for you.

Download: http://www.koumei.net/download/wp-webKlip.zip

Not too much special effects. In order to make the contents which read from the underneath javascript show themselves up naturally. Not in a harsh.

If you want to try, just download the widget on http://www.koumei.net/download/wp-webKlip.zip , then unzip to wp-content/plug-ins/ folder, and activate the plugin and add widget to you wordpress blog.

Before using this widget, there are some notes you should know:

1. Defects:
   Currently only support ONE RSS excerpt.
   Only shows the first RSS item.
   jQuery should be included on your blog.
2. Usability:
   Site that provide at least 1 item RSS feed could be refered by this widget.
3. Extension:
   Multiple-RSS and rollover will be available  on next release.

The Demo:

Picture 1. The plugin will be shown after you copy the unzipped file to your plugin folder

Picture 2. Add the widget to the “Widgets” menu on your administration panel. You can add a RSS feed to this widget

You can  find the demo on the right side of my blog.