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
   
Cross-Browser Image Slider Plugin with jQuery and jQuery UI - mediaslide

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:

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.