Responsive Image Slideshow with jQuery and CSS3 - RadioShow2

File Size: 1.66 MB
Views Total: 897
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Image Slideshow with jQuery and CSS3 - RadioShow2

RadioShow2 is a cool new jQuery plugin for showcasing your images in a responsive slideshow with amazing CSS3 animations. Works great with modern browsers who support CSS3 transition and transform properties.

How to use it:

1. Load the jQuery RadioShow 2 plugin's stylesheet in the head of your web page.

<link rel="stylesheet" href="css/radioshow.css" />

2. Load the jQuery RadioShow 2 plugin's script file at the bottom of your page after jQuery library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="radioshow.js"></script>

3. Create an empty container element for your image slideshow.

<div id="showcase" class="radioshow"></div>

4. Create image data in the javascript, just simulating an AJAX request result.

var channels = [
{
name: "example", // image name prefix
size: "medium", // medium, large
showImgLink: false,
shots: [
{
headline: "Title 1",
desc:"Description 1"
},
{
headline: "Title 2",
desc:"Description 2"
},
{
headline: "Title 3",
desc:"Description 3"
},
{
headline: "Title 4",
desc:"Description 4"
}
]
}
];

4. Rename images your want to showcase to example-1.jpg, example-2.jpg, example-3.jpg, example-4.jpg and put them into images folder.


This awesome jQuery plugin is developed by jasesmith. For more Advanced Usages, please check the demo page or visit the official website.