Album, Horizontal Switch, Ajax Load (JSON Data), Auto Play, Customized Switch Events
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.SimpleCarousel.js"></script>
<script type="text/javascript">
(function($){
$("#carousel-album").SimpleCarousel({
// Ajax Load
ajax: {
// Request URL
url: "data.json",
// innerHTML template of the carousel list items
itemInnerHTML: "<p><a href=\"{url}\"><img width=\"{imgWidth}\" height=\"{imgHeight}\" alt=\"{title}\" src=\"{src}\"></a></p><h3><a target=\"_blank\" href=\"{url}\">{title}</a></h3>"
},
// HTML template of the container element
container: $("<div id=\"carousel-album-container\" class=\"carousel-album-container\"></div>"),
// HTML template of the carousel list element
carousel: $("<ul id=\"carousel-album-list\" class=\"carousel-album-list\"></ul>"),
// HTML template of the 'prev' page button element
prevBtn: $("<a title=\"Previous Page\" id=\"carousel-album-prev-btn\" class=\"carousel-album-prev-btn\" href=\"#prev\">‹</a>"),
// HTML template of the 'next' page button element
nextBtn: $("<a title=\"Next Page\" id=\"carousel-album-next-btn\" class=\"carousel-album-next-btn\" href=\"#next\">›</a>"),
playDirection: 'H',
autoPlay: true,
cyclePlay: true,
paginated: true,
easing: "easeOutBounce",
// The 'beforeSwitch' event handlers for each page
beforeSwitch: [function(){
console.log("b:1");
},function(){
console.log("b:2");
},function(){
console.log("b:3");
},function(){
console.log("b:4");
},function(){
console.log("b:5");
},function(){
console.log("b:6");
},function(){
console.log("b:7");
},function(){
console.log("b:8");
},function(){
console.log("b:9");
}],
// The 'afterSwitch' event handlers for each page
afterSwitched: [function(){
console.log("a:1");
},function(){
console.log("a:2");
},function(){
console.log("a:3");
},function(){
console.log("a:4");
},function(){
console.log("a:5");
},function(){
console.log("a:6");
},function(){
console.log("a:7");
},function(){
console.log("a:8");
},function(){
console.log("a:9");
}]
});
})(jQuery);
</script>