You are hereBlogs / alif's blog / Carousel of JS / jQuery, PHP with JSON File that gracefully degrades
Carousel of JS / jQuery, PHP with JSON File that gracefully degrades
I decided to create a carousel which will be efficient and offer graceful degradation. The only Carousel I came across which offers such feature is the one of Yahoo! Canada (Featured Area of Home Page). Turn off the JS, and you will still see the same layout, with each Items on the right now acting as a link. Upon clicking them will take you to their corresponding page.
In this jQuery Carousel I use PHP to create the layout and using an external JSON File. This will offer degradation for old browsers or when JS is blocked. The Carousel displays either image file or can load a Full HTML File.
The Carousel
Files that will be used:- class.carousel.php
- jquery.simplecarousel.js
- list.json
- simplecarousel.css
Brief Explanation of the files:
| class.carousel.php | This is the Class File. All you have to do is initialize the Class and call the Method createCarousel to create the Layout |
| jquery.simplecarousel.js | This is the JS File. The JS was created as a jQuery plugin, and its used just like any other jQuery plugin. |
| list.json | This is the external file which lists the images/html files to be loaded. The filename is customizable |
| simplecarousel.css | This is CSS File used for styling the Carousel. |
{ "entry" : [ { "type" : "html" , "url" : "http://www.yahoo.ca/", "src" : "/myblog/final/item1.html" , "title" : "Batman", "body" : "Dark Knight Story" }, { "type" : "image" , "url" : "http://www.flickr.com/", "src" : "/myblog/final/images/flickr.jpg", "title" : "Flickr", "body" : "Its Awesome!" } ] }
As you can see, each entry contains 'type', 'url', 'src', 'title', 'body'. Below are the explanation of these terms:
| type | It can be either 'html' or 'image' |
| url | This is the Link. When type is specified as 'image', then the entire image acts as a link, and the value of link is this url. |
| src | This is the source from where the image or HTML is to be loaded |
| title | This is the title to be shown on 'right' side (depending on Layout) |
| body | This is the body text shown on 'right' side (depending on Layout) |
Details of the JS File:
Show Code »
Usage:
Include the CSS and JS File at first. Since this is a jquery plugin, at first include jquery like any other plugin. Then include this js file
<style type="text/css" media="all"> @import url('simplecarousel.css'); style>