On the example before I've setted the animation to a "vertical-slider", with an interval of 4.5 sec. and a speed of 1.8sec.
As you can see it bounce on animation stop. To do this I've used the jquery.easing 1.3 library, thet defines a really usefull set of animation functions.
I have also set the image link on titles, instead of images, and the autohide on both navigator and titlebar.
$("#showcase1").showcase({
css: { width: "979px", height: "375px" },
animation: { type: "vertical-slider", interval: 4500, stopOnHover: false, easefunction: "easeOutElastic", speed: 1800 },
linksOn: "titles",
images: [
{ url:"images/panorama1.jpg",
description: "panorama - another great imageset provided by Riccardo Vandoni",
link:"http://www.riccardovandoni.com", target: "_blank" },
{ url:"images/panorama2.jpg",
description: "...the second panorama photo...",
link:"http://www.riccardovandoni.com", target: "_blank" },
{ url:"images/panorama3.jpg",
description: "...and the last",
link:"http://www.riccardovandoni.com", target: "_blank" }],
navigator: { position: "top-right", orientation: "vertical", autoHide: true,
css: { padding:"6px", margin: "4px 0px 0px 0px" },
item: {
css: { height:"8px", width:"8px", "-moz-border-radius": "8px", "-webkit-border-radius": "8px",
backgroundColor: "Transparent", borderColor:"#878787" },
cssHover: { backgroundColor: "#ababab" },
cssSelected: { backgroundColor: "#dadada", borderColor: "#dadada" }
}
},
titleBar: { css: { backgroundColor: "#2c546f", color: "Black", fontSize: "1.4em", opacity: "0.86" } }
});
You can also use css classes to setup parts of the showcase. Using this stylesheet:
.titleBar {
padding: 4px;
font-style: italic;
font-weight: bold;
background-color: #2c546f;
font-size: 1.4em; }
.titleBar a { color: #000000; }
.navigationItem { height:8px; width:8px; line-height: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background-color: Transparent;
border: solid 1px #878787;
margin: 0px 3px 3px 0px; }
.navigationItemHover { background-color: #ababab; }
.navigationItemSelected { background-color: #dadada; border-color: #dadada; }
Your options can be like:
...
navigator: { position: "top-right", orientation: "vertical", autoHide: true,
css: { padding:"6px", margin: "4px 0px 0px 0px" },
item: {
cssClass: "navigationItem",
cssClassHover: "navigationItemHover",
cssClassSelected: "navigationItemSelected"
}
},
titleBar: { cssClass: "titleBar", css: { opacity: "0.86" } }
...