Pause and resume / images always by www.riccardovandoni.com

I like cats, and I like jQuery. So this gallery.

Controls

Showcase is going on

You can pause and resume the sequence of the images just calling the methods ".pause()" and ".stop()" upon a started showcase.

<input type="button" id="btnPause" value="pause cats" />
<input type="button" id="btnResume" value="resume cats" />
<span id="lblStatus">Showcase is going on</span>

JS:

$("#btnPause").click( function() {
    $("#showcats").pause();
    $("#lblStatus").text("wait a moment");
});

$("#btnResume").click( function() {
    $("#showcats").go();
    $("#lblStatus").text("let's go, cats");
});

Gallery settings

$("#showcats").showcase({
	animation: { interval: 3200, speed: 500,
        stopOnHover: false, easefunction: "swing", type: "vertical-slider" },
    css: { border: "solid 3px #121212", "-moz-border-radius": "6px", width: "450px", height: "266px" },
	images: [{ url:"images/cats_1.jpg", link:"http://www.riccardovandoni.com", target:"_blank" }, 
        { url:"images/cats_2.jpg", link:"http://www.riccardovandoni.com", target:"_blank" }, 
        { url:"images/cats_3.jpg", link:"http://www.riccardovandoni.com", target:"_blank" },
        { url:"images/cats_4.jpg", link:"http://www.riccardovandoni.com", target:"_blank" },
        { url:"images/cats_5.jpg", link:"http://www.riccardovandoni.com", target:"_blank" }],
	navigator: { position:"top-left", showNumber:true,
         item: { 
             css: { 
                 width: "30px", height:"20px", "line-height": "20px", 
                 backgroundColor: "#EEDA2D", borderColor: "#E1CD23", "font-weight": "normal" },
             cssHover: { 
                 backgroundColor: "#F4F376", borderColor: "#EBE95F" },
             cssSelected: {
                 backgroundColor: "#F4973C", borderColor: "#EC711F", "font-weight": "bold" }
         }
    },
    titleBar: { enabled: false }
});