Quantcast
Channel: Melbourne Web Developer, Website Design & Development » Interesting
Viewing all articles
Browse latest Browse all 10

jCarousel Lite Mouse Hover Event Improvement

$
0
0

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


Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles





Latest Images