Cross-Browser Image Slider Plugin with jQuery and jQuery UI - mediaslide
File Size: | 177KB |
---|---|
Views Total: | 1334 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
mediaslide is a fully customizable and cross-Browser Image Slider Plugin built with jQuery and jQuery UI. It allows you to browse a collection of images which can loaded via JSON, Ajax JSON, XML, and direct from Flickr.
Other Features:
- Image can only loaded as they are needed to conserve bandwidth
- Fully customizable via jQuery UI Themes and API functions
Basic Usage:
1. Include required jQuery, jQuery UI and mediaslide plugin on the web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script> <script src="../jquery.ui.mediaslide.js"></script>
2. Choose and include a jQuery UI theme CSS on the page
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" type="text/css" media="all" />
3. Markup html structure
<div id="slide_1"> </div>
4. The javascript
<script> $('#slide_1').mediaslide({ num_thumbs:8, loading_thumb:'smallajaxloader.gif', flickr_public_photos_data: { id: '57329316@N06', // flickr user id smallthumbs: true, largenormals: false } } ); </script>
More Examples:
- Static JSON Example
- AJAX JSON Example
- AJAX Atom XML Example
- Flickr User Public Photos Example
- Flickr Group Photos Example
- Flickr Favorites Example
- External Controls Example
- Custom Formatters Example
- Large Gallery Example
- Plain and Simple Example
- Minature Example
- External Pagination Example
Change log:
v1.4.28 (2013-09-18)
- Don't hide thumbslide when you click on a thumb
v1.4.27 (2013-08-31)
- Minor fix
This awesome jQuery plugin is developed by kieransimkin. For more Advanced Usages, please check the demo page or visit the official website.