I recently needed to implement a scrolling gallery of images with hover over controls quickly without too much fuss. The result can be see here on the GUL Website in the history museum section.
I came across JCarousellite which is a lightweight version of JCarouselle.
This widget (based on JQuery) had pretty much everything I needed apart from handling mouse over for the previous and next controls.
Some quick modification allowed the controls to be clicked or hovered over and also provides a opacity change (JQuery fade) to add an effect as the user hovers over the controls.
There is probably a better way to get the continous scroll while the user hovers than using a timer to recall the scroll function but we needed a solution quick and it provides a nice way to pause slightly during the scroll so that the user can see the images.
The modifications required are made to the jcarousellite_1.0.1.js file as below:
var t; var d; if (o.btnPrev) $(o.btnPrev).mouseover(function() { t = setInterval(movePrev, 100); $(this).fadeTo("fast", 1); }); function movePrev() { go(curr - o.scroll); } if (o.btnPrev) $(o.btnPrev).mouseout(function() { clearInterval(t); $(this).fadeTo("fast", 0.5); }); if (o.btnNext) $(o.btnNext).mouseover(function() { d = setInterval(moveNext, 1); $(this).fadeTo("fast", 1); }); function moveNext() { go(curr + o.scroll); } if (o.btnNext) $(o.btnNext).mouseout(function() { clearInterval(d); $(this).fadeTo("fast", 0.5); });
Thats it, follow the instructions on the JCarousellite page to get it working, make these minor changes and that’s all there is to it.