• home
• demo 1
• demo 2
• demo 3
• documentation

In this demo I've disabled the titlebar, fixed the navigator to the bottom-left corner, activated the numbers inside the navigator items and configured some styles.

$("#showcase_left").showcase({
    css: { width: "450px", height: "266px" },
    animation: { interval: 4500, 
                stopOnHover: true, 
                easefunction: "swing", 
                speed: 600 },
    images: [/*
        ... imagelist ... 
    */],
    navigator: { 
        position: "bottom-left",
        css: { padding:"0px", 
               margin: "0px 0px 1px 1px" },
        showNumber: true,
        item: { 
            css: {  height:"16px", 
                    "line-height":"16px", 
                    width:"16px", 
                    "-moz-border-radius": "0px", 
                    "-webkit-border-radius": "0px", 
                    backgroundColor: "#383838", 
                    borderColor:"#323232", 
                    margin: "0px", 
                    "text-align": "center", 
                    "vertical-align": "middle" },
            cssHover: { 
                backgroundColor: "#ababab", 
                borderColor: "#ababab" },
            cssSelected: { 
                backgroundColor: "#dadada", 
                borderColor: "#dadada" }
        }
    },
    titleBar: { enabled: false }
});
                        

In this other I setted up the images in the "old style", using anchors and images tag. By javascript I simply setted the animation type to "fade", fixed the titlebar and add autoHide to the navigator.

<div id="showcase_right">
    <a>
        <img src="images/showcase_set_1.jpg" alt="description of this image (really??)" />
    </a>
    <a>
        <img src="images/showcase_set_2.jpg" alt="yet another image" />
    </a>
    <a>
        <img src="images/showcase_set_3.jpg" alt="and the third" />
    </a>
</div>
                        

And the javascript:

$("#showcase_right").showcase({
    animation: { type: "fade" },
    titleBar: { autoHide: false },
    navigator: { autoHide: true }
});