Simon Hibbard's Web Apps Blog

Scrolling Image Gallery with Hover Over Controls

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() {
                    $(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() {
                    $(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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s