11 Jul 2008

Modifying Mimbo Pro 2: Autoscrolling the Carousel

  • Ben

One of the most common requests we get for Mimbo Pro modifications is changing the homepage carousel. In this post I am going to outline a few changes you can make that will help you give some individuality to your homepage design.

Automatic scrolling

Making the Carousel scroll without user interaction is pretty painless with Mimbo Pro. Open up header.php and find the code that initiates the carousel. It should look like this…

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
});
</script>

Then swap it for this

<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
});
</script>
You can change the auto: 2 - to adjust the scroll delay to a value you like.

Anything else

The carousel uses the code from jCarousel, so anything you can change in that can be changed in Mimbo Pro. A full list of all of the jCarusel properties can be seen here.

Comments »

1. Peter - July 24, 2008

Hi,

I get a javascript error on the carousel. This started when I published the first posting with the Image key added to a posting.

jQuery(”#mycarousel”).jcarousel is not a function
[Break on this error] jQuery(’#mycarousel’).jcarousel();

This is the listing from Firebug in Firefox.

jQuery(”#mycarousel”).jcarousel is not a function
(no name)()wordpressfamily (line 19)
e()jquery-1.2.1.pack… (line 11)
e()jquery-1.2.1.pack… (line 11)
e([function()], function(), undefined)jquery-1.2.1.pack… (line 11)
e()jquery-1.2.1.pack… (line 11)
[Break on this error] jQuery(’#mycarousel’).jcarousel();

Any thoughts? Regards,
Peter

2. Ben - July 26, 2008

Peter - do you have a website I can look at?

3. Kaname - August 4, 2008

it would be better if you highlight the code from the none code for better reading. just a suggestion :D

4. Guney - September 17, 2008

Hi ,

i did this but it’s too fast . Can we set the scroll time ?

Thanks for your help

5. Ben - September 17, 2008

Guney - notice the blue information box after the code? Change the auto:2 to something else (auto:5?) and it will change the speed :)

6. bz - November 16, 2008

Any luck with successful setup of automatic circular carousel (without any manual navigation)? None of the “wrap” property setting work in providing a true circular carousel. i tried to follow example here:

http://sorgalla.com/projects/jcarousel/examples/special_circular.html

But no luck in removal and re-insertion of item as part of itemVisibleOutCallback function. Any tips?

Post a Comment