|
|
|
|
|
The jQuery UI MediaSlide plugin turns a selected element into an image and media browser with a sliding thumbnail strip. All that's needed to get one setup is a media list in XML or JSON format, and the following simple jQuery JavaScript code:
<div id="slide_1"></div> <script> $('#slide_1').mediaslide({ json_ajax: { url: 'imagelist.json' } }); </script>
The plugin also supports loading images directly from Flickr. To do this, simply determine your Flickr user ID - this is not the same as your username. Flickr user IDs take the format 30529641@N08 - you can find yours by going to your Flickr page, viewing your public photos feed and observing the user ID in the address bar. Once you know your Flickr user ID, you can create a MediaSlide gallery for your photos using the following code: (Please note, Flickr feeds only show the most recent 20 images, so if you use Flickr feeds this will be the maximum size of your MediaSlide gallery.)
<div id="slide_2"></div> <script> $('#slide_2').mediaslide({ flickr_public_photos_data: { id: '30529641@N08' } }); </script>
Of course, you will also need to load jQuery UI and the jquery.ui.mediaslide.js plugin itself in the <head> section of your page. Something like this will do:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> <script src="jquery.ui.mediaslide.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" rel="stylesheet">
Exactly one of the following options must be specified to indicate where MediaSlide should read the media list from:
| json_data | String, Array (Default: null) | Specifies the media list directly - either as a string containing JSON to be parsed, or the already-parsed JSON data (which should be an array) (Show details) |
|---|---|---|
DetailsThis is the simplest (and probably the best performance) way to load the media list into the widget. Simply embed the entire list into your page as a JSON array of objects, with each object containing values for 'id', 'title', 'link', 'updated', 'thumb' and 'normal'.Code examplesInitialize the MediaSlide widget using JSON data:var data = [{"title":"Car and streetlights", "link":"2-Car-and-streetlights.html", "updated":1281765654, "thumb":"albums\/1\/thumb_03.jpg", "normal": "albums\/1\/normal_03.jpg", "id":"2219"}, {"title":"Dead cat", "link":"5-Dead-cat.html", "updated":1281765654, "thumb":"albums\/1\/thumb_06.jpg", "normal":"albums\/1\/normal_06.jpg", "id":"2224"}]; $('.selector').mediaslide({ json_data: data }); | ||
| json_ajax | String, Object (Default: null) | Specifies that the media list should be loaded via a JSON AJAX request to a specified URL. The URL may be specified as a string, or alternatively an options object may be passed containing a 'url' property, along with other config options for the request. (Show details) |
DetailsUse this option to load the media list via AJAX request - a request will be made to the URL you specify, and the result parsed as JSON. The JSON data must be an array of objects, with each object containing values for 'id', 'title', 'link', 'updated', 'thumb', and 'normal'.Code examplesInitialize the MediaSlide widget using JSON data retrieved via AJAX request to the URL 'ajaxurl.json' without specifying any additional options:$('.selector').mediaslide({ json_ajax: 'ajaxurl.json' });Initialize the MediaSlide widget using JSON data retrieved via AJAX request, specifying an additional input variable for the request ('gallery'): $('.selector').mediaslide({ json_ajax: { url: 'ajaxurl.json', options: {'gallery': 1} } }); | ||
| atom_xml_data | String, Array (Default: null) | Specifies the media list directly, either as a string containing Atom XML to be parsed, or the already-parsed Atom data (with jQuery.parseXML()). (Show details) |
DetailsUse this option to read the media list from some static XML data - simply pass the data in, either as a string containing XML, or that XML having already been parsed via jQuery.parseXML(). The media list must be in XML+Atom format, with each entry containing twoCode examplesInitialize the MediaSlide widget using Atom XML data:var data='<?xml version="1.0" encoding="utf-8"?> <feed xmlns="http://www.w3.org/2005/Atom"> <title>Kieran\'s Gallery - latest albums</title> <link href="http://slinq.com/gallery/"/> <id>urn:uuid:c7152327-ec21-a810-e77b-2317828b75ad</id> <description type="html"><![CDATA[]]></description> <entry> <title>Burning of the Clocks 2011</title> <link href="http://slinq.com/gallery/html/94-Page1-Burning-of-the-Clocks-2011.html"/> <id>urn:uuid:18bf260f-d047-aaab-7e6c-fe46beaba698</id> <updated>2011-12-22T23:19:27+00:00</updated> <summary type="html"><![CDATA[Burning the Clocks acts as an antidote to the excesses of a commercial Christmas]]></summary> <link rel="enclosure" type="image/jpeg" href="http://slinq.com/gallery/albums/Burning%20of%20the%20Clocks%202011/normal_IMG_3395.JPG" title="normal"/> <link rel="enclosure" type="image/jpeg" href="http://slinq.com/gallery/albums/Burning%20of%20the%20Clocks%202011/thumb_IMG_3395.JPG" title="thumb"/> </entry> <entry> <title>Alfie\'s first smiles</title> <link href="http://slinq.com/gallery/html/93-Page1-Alfie%27s-first-smiles.html"/> <id>urn:uuid:b174f621-ba8e-9a35-3970-859328cb4be7</id> <updated>2011-12-01T16:49:33+00:00</updated> <summary type="html"><![CDATA[Alfie's started giving us beaming toothless grins. Rather rewarding.]]></summary> <link rel="enclosure" type="image/jpeg" href="http://slinq.com/gallery/albums/Alfies%20First%20Smiles%202011-12-01/normal_2011-11-30_14-31-18_3.jpg" title="normal"/> <link rel="enclosure" type="image/jpeg" href="http://slinq.com/gallery/albums/Alfies%20First%20Smiles%202011-12-01/thumb_2011-11-30_14-31-18_3.jpg" title="thumb"/> </entry> </feed> '; $('.selector').mediaslide({ atom_xml_data: data }); | ||
| atom_xml_ajax | String, Object (Default: null) | Specifies that the media list should be loaded via AJAX request, and that the resulting data should be parsed as XML Atom data. (Show details) |
DetailsUse this option to read the media list via AJAX request and parse the result as XML+Atom data. The data must be in standard Atom format, with twoCode examplesInitialize the MediaSlide widget using Atom XML data loaded via AJAX request:$('.selector').mediaslide({ atom_xml_ajax: 'imagelist.xml' });Initialize the MediaSlide widget using Atom XML data loaded via AJAX request, specifying an additional parameter to be sent with the request ('gallery'): $('.selector').mediaslide({ atom_xml_ajax: { url: 'imagelist.xml', options: { 'gallery': 1 } } }); | ||
| flickr_public_photos_data | String, Object (Default: null) | Specifies that the media list should be loaded from a user's public photos feed on Flickr. Either specify the Flickr user ID as a string, or specify an options object with a 'id' property, along with other Flickr request options. (Show details) |
DetailsUse this option to load the media list from your Flickr public photos stream. Please consult the Flickr feed documentation for further information about this option's parameters.(Please note, Flickr feeds support a maximum of 20 images - this is a limitation of Flickr rather than MediaSlide) Code examplesInitialize the MediaSlide widget using a Flickr public photos stream as the data source:$('.selector').mediaslide({ flickr_public_photos_data: '30529641@N08' });Initialize the MediaSlide widget using a Flickr public photos stream as the data source, specifying some additional Flickr-specific config options at the same time: $('.selector').mediaslide({ flickr_public_photos_data: { id: '30529641@N08', ids: null, tags: null, tagmode: null smallthumbs: true, smallnormals: false, largenormals: true, } }); | ||
| flickr_favorites_data | String, Object (Default: null) | Specifies that the media list should be loaded from a user's favorites feed on Flickr. Either specify the Flickr user ID as a string, or specify an options object with an 'id' property. (Show details) |
DetailsUse this option to load the media list from a Flickr user's favorite photos list. Please consult the Flickr feed documentation for further details about this data source.(Please note, Flickr feeds support a maximum of 20 images - this is a limitation of Flickr rather than MediaSlide) Code examplesInitialize the MediaSlide widget using media list data loaded from a Flickr user's favorite photos list:$('.selector').mediaslide({ flickr_favorites_data: '30529641@N08' });Initialize the MediaSlide widget using media list data loaded from a Flickr user's favorite photos list, also specifying the Flickr-specific optional parameters: $('.selector').mediaslide({ flickr_favorites_data: { id: '30529641@N08', smallthumbs: false, smallnormals: true, largenormals: false } }); | ||
| flickr_groups_data | String, Object (Default: null) | Specifies that the media list should be loaded from a Flickr group feed. Either specify the group's user ID as a string, or specify an options object with an 'id' property. (Show details) |
DetailsUse this option to load the media list from a Flickr group's photo pool. For further details about this feed, consult the Flickr feed documentation.(Please note, Flickr feeds support a maximum of 20 images - this is a limitation of Flickr rather than MediaSlide) Code examplesInitialize the MediaSlide widget using a Flickr group photo pool as the data source:$('.selector').mediaslide({ flickr_groups_data: '71917374@N00' });Initialize the MediaSlide widget using a Flickr group photo pool as the data source, specifying additional Flickr-specific config options: $('.selector').mediaslide({ flickr_groups_data: { id: '71917374@N00', smallthumbs: true, smallnormals: true, largenormals: false } }); | ||
The following options are optional, but offer you lots of possibilities for customizing the plugin:
| start_position | Integer (Default: 0) | The zero-indexed start position in the media list. (0 displays the first media item, num items-1 displays the last.) (Show details) |
|---|---|---|
DetailsSpecifies where in the media list the widget should start - media lists are taken in the order they're given (no sorting is performed). All positions in the media list are zero-indexed; this means the first image is 0.Code examplesInitialize the MediaSlide widget with thestart_position option specified:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, start_position: 10 }); | ||
| thumb_width | Integer (Default: 200) | Specifies the maximum width of your thumbnail images in pixels - the widths may be smaller, but must not exceed this value. (Show details) |
DetailsSpecifies the maximum width of your thumbnail images - this number is used to calculate the size of each thumbnail in the thumbnail bar, and is needed for the animations. By default the widget will assume a thumbnail width of 200px, use this option to change that.Code examplesInitialize the MediaSlide widget with thethumb_width option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, thumb_width: 150 }); | ||
| thumb_spacing | Integer (Default: 10) | The spacing between each thumb in your thumb strip in pixels. (Show details) |
DetailsSpecifies the spacing (in pixels) between each thumbnail in the thumb strip. Due to the way this value is used, it's probably sensible to use even numbers - this is because the spacing value is divided by two with one half applied on the left side of the thumb and the other half applied on the right side. If the spacing is an odd number, you'll have an extra pixel of spacing on the right hand side.Code examplesInitialize the MediaSlide widget with thethumb_spacing option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, thumb_spacing: 5 }); | ||
| loading_thumb | String (Default: ajaxloader.gif) | The URL to your loading thumbnail animation. (Show details) |
DetailsSpecifies the URL of an image that should be used in place of a thumbnail while the thumbnail is loading. You probably want to use an "Ajax Loader" animated gif for this. Choose one that suits your design, or use the one that's bundled with the example.Code examplesInitialize the MediaSlide widget with theloading_thumb option specified:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, loading_thumb: 'loader.gif' }); | ||
| show_bottom_controls | Boolean (Default: true) | Disables or enables the controls below the image. (Show details) |
DetailsSpecifies whether there should be navigation controls at the bottom of the widget.Code examplesInitialize the MediaSlide widget with theshow_bottom_controls option specified:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, show_bottom_controls: false }); | ||
| show_top_controls | Boolean (Default: true) | Disables or enables the controls above the image. (Show details) |
DetailsSpecifies whether there should be navigation controls at the top of the widget.Code examplesInitialize the MediaSlide widget with theshow_top_controls option specified:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, show_top_controls: false }); | ||
| show_thumbs | Boolean (Default: true) | Disables or enables the thumb strip. (Show details) |
DetailsSpecifies whether the widget should include the sliding thumbnail strip.Code examplesInitialize the MediaSlide widget with theshow_thumbs option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, show_thumbs: false }); | ||
| show_scrollbar | Boolean (Default: true) | Disables or enables the scrollbar for the thumb strip. (Show details) |
DetailsSpecifies whether the widget should include a scrollbar for the thumbnail strip.Code examplesInitialize the MediaSlide widget with theshow_scrollbar option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, show_scrollbar: false }); | ||
| small_top_controls | Boolean (Default: true) | Whether or not to wrap the top controls in <small></small> tags. (Show details) |
DetailsSpecifies whether the top controls should be small or not.Code examplesInitialize the MediaSlide widget with thesmall_top_controls option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, small_top_controls: false }); | ||
| small_bottom_controls | Boolean (Default: true) | Whether or not to wrap the bottom controls in <small></small> tags. (Show details) |
DetailsSpecifies whether the bottom controls should be small or not.Code examplesInitialize the MediaSlide widget with thesmall_bottom_controls option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, small_bottom_controls: false }); | ||
| small_captions | Boolean (Default: true) | Whether or not to wrap the thumbnail captions in <small></small> tags. (Show details) |
DetailsSpecifies whether the thumbnail captions should be small or not.Code examplesInitialize the MediaSlide widget with thesmall_captions option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, small_captions: false }); | ||
| thumbs_on_top | Boolean (Default: false) | Display the thumb strip above the image rather than below it. (Show details) |
DetailsSpecifies whether the thumbnail strip should be positioned above rather than below the image.Code examplesInitialize the MediaSlide widget with thethumbs_on_top option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, thumbs_on_top: true }); | ||
| scrollbar_on_top | Boolean (Default: true) | Display the scrollbar above the thumb strip. (Show details) |
DetailsSpecifies whether the scrollbar should be positioned above or below the thumbnail strip.Code examplesInitialize the MediaSlide widget with thescrollbar_on_top option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, scrollbar_on_top: true }); | ||
| captions_on_top | Boolean (Default: false) | Display the captions above the thumbnails rather than below them. (Show details) |
DetailsSpecifies whether the captions should be displayed above or below the thumbnails.Code examplesInitialize the MediaSlide widget with thecaptions_on_top option specified:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, captions_on_top: true }); | ||
| top_navigation_controls_text | Boolean (Default: false) | Display text on the top navigation control buttons. (Show details) |
DetailsSpecifies whether the top navigation controls should contain text captions on the buttons (rather than just icons)Code examplesInitialize the MediaSlide widget with thetop_navigation_controls_text option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, top_navigation_controls_text: true }); | ||
| bottom_navigation_controls_text | Boolean (Default: false) | Display text on the bottom navigation control buttons. (Show details) |
DetailsSpecifies whether the bottom navigation controls should contain text captions on the buttons (rather than just icons)Code examplesInitialize the MediaSlide widget with thebottom_navigation_controls_text option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, bottom_navigation_controls_text: true }); | ||
| top_position_indicator | Boolean (Default: true) | Display a position indicator in the top controls. (Show details) |
DetailsSpecifies whether the top controls should contain a position indicator.Code examplesInitialize the MediaSlide widget with thetop_position_indicator option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, top_position_indicator: false }); | ||
| bottom_position_indicator | Boolean (Default: false) | Display a position indicator in the bottom controls. (Show details) |
DetailsSpecifies whether the bottom controls should contain a position indicator.Code examplesInitialize the MediaSlide widget with thebottom_position_indicator option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, bottom_position_indicator: false }); | ||
| top_media_title | Boolean (Default: false) | Display the current media item title in the top controls. (Show details) |
DetailsSpecifies whether or not the title of the current media item should be displayed in the top controls.Code examplesInitialize the MediaSlide widget with thetop_media_title option specified:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, top_media_title: true }); | ||
| bottom_media_title | Boolean (Default: true) | Display the current media item title in the bottom controls. (Show details) |
DetailsSpecifies whether or not the title of the current media item should be displayed in the bottom controls.Code examplesInitialize the MediaSlide widget with thebottom_media_title option specified:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, bottom_media_title: true }); | ||
| quantize_scroll | Boolean (Default: false) | Force the thumb strip so that when you scroll, it never lands in a position where part of a thumbnail is visible. (Show details) |
DetailsSpecifies whether to quantize scrollbar movement so that the thumbnail strip never lands in a position where a thumbnail is only half visible.Code examplesInitialize the MediaSlide widget with thequantize_scroll option specified:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, quantize_scroll: true }); | ||
| caption_formatter | Function (Default: function (caption) { return caption; }) | Specify a callback function to perform formatting or translation on each thumbnail caption. (Show details) |
DetailsAllows you to use your own Javascript code to alter the text that's displayed in each thumbnail caption. For example, you could wrap the caption in quotes, or any HTML tag.Code examplesInitialize the MediaSlide widget with thecaption_formatter option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, caption_formatter: function (c) { return ' - ' + c + ' - '; } }); | ||
| position_indicator_formatter | Function (Default: function (position) { return position; }) | Specify a callback function to perform formatting or translation on the position indicator text. (Show details) |
DetailsAllows you to specify a callback function to be used to perform modifications on the position indicator text. For example, you could use this to wrap the position indication text in your own custom HTML tags.Code examplesInitialize the MediaSlide widget with theposition_indicator_formatter option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, position_indicator_formatter: function (i) { return i.replace('/','of'); } }); | ||
| title_formatter | Function (Default: function (title) { return title; }) | Specify a callback function to perform formatting or translation on the title text. (Show details) |
DetailsAllows you to specify a callback function to be used to perform modifications on the image title text. For example, you could use this to wrap the title text in your own custom HTML tags.Code examplesInitialize the MediaSlide widget with thetitle_formatter option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, title_formatter: function (t) { return ' : ' + t + ' : '; } }); | ||
| picture_click_handler | Function (Default: function (link) { return true; }) | Specify a callback function to handle a click on the main image. Use this to use your own Lightbox style plugin to display zoomed-in images. Alternatively you could have this function call the MediaSlide's next() method to emulate Facebook-style behaviour. (Show details) |
DetailsAllows you to specify a function to be called when a click is received on the main image. If your callback function returns true, the normal click action will be performed as well (ie, the media item's "link" field becomes the browser's current URL).Code examplesInitialize the MediaSlide widget with thepicture_click_handler option specified:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, picture_click_handler: function (url) { alert(url); return false; } }); | ||
If you wish to update your own code with the state of the MediaSlide widget, simply hook into the following events.
| ready | Function | Triggered when the widget is finished setting up. (Show details) |
|---|---|---|
DetailsUse this event to have your own code respond after the MediaSlide widget has finished setting itself up.Code examplesAttach to theready event at initialization time:
$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, ready: function() { alert('MediaSlide ready'); } });Attach to the event after initialization: $('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); $('.selector').bind('mediaslideready',function () { alert('MediaSlide ready'); }); | ||
| startslide | Function | Triggered when the widget begins sliding from one image to another. (Show details) |
DetailsUse this event to have your code respond when the widget begins sliding - for example you might use this to begin your own animation effects to change other content on your page.Code examplesAttach to thestartslide event at initialization time:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, startslide: function() { alert('MediaSlide slide started'); } });Attach to the event after initialization: $('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); $('.selector').bind('mediaslidestartslide',function () { alert('MediaSlide slide started'); }); | ||
| endslide | Function | Triggered when the widget finishes sliding. (Show details) |
DetailsUse this event to have your code respond when the widget finishes sliding - for example you might use this to update your own code's idea of where the mediaslide might be. You could use this event to change the # component of the web page URL, or notify an Analytics tracker such as Google Analytics (or both).Code examplesAttach to theendslide event at initialization time:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'}, endslide: function() { alert('MediaSlide slide ended'); } });Attach to the event after initialization: $('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); $('.selector').bind('mediaslideendslide',function () { alert('MediaSlide slide ended'); }); | ||
A good use for this would be to update the browser URL to include a different # tag for each media item. This way when people copy and paste URLs from your MediaSlide you can automatically jump to the correct position in the media list via the start_position variable.
You can also use these events to wrap your own controls around the widget if you do not wish to use a standard jQuery UI theme, although an easier approach would be to simply create your own jQuery theme via Themeroller.
If you wish to control the widget via external controls, call the following methods:
| position_slide | .mediaslide("position_slide", offset) | Triggers the widget to slide forwards or backwards a number of places. Positive numbers move forward, negative numbers move backwards. (Show details) |
|---|---|---|
DetailsUse position_slide(1) to move forward one place, position_slide(-1) to move backwards one place. Attempts to move past the beginning or end of the gallery will fail, so you must check your bounds before you call this method.Code examplesInvoke theposition_slide method to move forward one place:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); $('.selector').mediaslide('position_slide',1); | ||
| position_slide_to | .mediaslide("position_slide_to", position) | Triggers the widget to slide to a specific position in the media list. (Show details) |
DetailsThis method allows you to slide to a numbered position in the media list. Counting starts at 0 (the media list is always zero indexed).Code examplesInvoke theposition_slide_to method to move to the beginning of the media list:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); $('.selector').mediaslide('position_slide_to',0); | ||
| next | .mediaslide("next"); | Slides to the next media item in the list. (Show details) |
DetailsSlides forward one place.Code examplesInvoke thenext method:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); $('.selector').mediaslide('next'); | ||
| previous | .mediaslide("previous"); | Slides backwards to the previous media item in the list. (Show details) |
DetailsSlide backwards one place.Code examplesInvoke theprevious method:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); $('.selector').mediaslide('previous'); | ||
| forward | .mediaslide("forward", offset) | Slides forward a number of places. (Show details) |
DetailsSlide forwards a number of places.Code examplesInvoke theforward method to move forwards two spaces:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); $('.selector').mediaslide('forward',2); | ||
| backward | .mediaslide("backward", offset) | Slides backwards a number of places. (Show details) |
DetailsSlide backwards a number of places.Code examplesInvoke thebackward method to move backwards two spaces:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); $('.selector').mediaslide('backward',2); | ||
| first | .mediaslide("first") | Slides back to the beginning of the media list. (Show details) |
DetailsGo back to the beginning of the media list.Code examplesInvoke thefirst method:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); $('.selector').mediaslide('first'); | ||
| last | .mediaslide("last") | Slides to the last item in the media list. (Show details) |
DetailsGo to the end of the media list.Code examplesInvoke thelast method:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); $('.selector').mediaslide('last'); | ||
| get_position | .mediaslide("get_position") | Returns the current (zero-indexed) position in the media list. (Show details) |
DetailsGet the current position in the media list. Position numbering always starts at 0 (it's zero-indexed).Code examplesInvoke theget_position method:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); alert('Position is: ' + $('.selector').mediaslide('get_position')); | ||
| get_count | .mediaslide("get_count") | Returns the total number of items in the media list. (Show details) |
DetailsGet the total number of items in the media list.Code examplesInvoke theget_count method:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); alert('Media count is: ' + $('.selector').mediaslide('get_count')); | ||
| get_current_title | .mediaslide("get_current_title") | Returns the current media item's title. (Show details) |
DetailsGet the title of the current media item.Code examplesInvoke theget_current_title method:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); alert('Current media title is: ' + $('.selector').mediaslide('get_current_title')); | ||
| get_current_id | .mediaslide("get_current_id") | Returns the current media item's ID. (Show details) |
DetailsGet the ID of the current media item.Code examplesInvoke theget_current_id method:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); alert('Current media ID: ' + $('.selector').mediaslide('get_current_id')); | ||
| get_current_link | .mediaslide("get_current_link") | Returns the current media item's link. (Show details) |
DetailsGet the current media item's link.Code examplesInvoke theget_current_link method:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); alert('Current media link: ' + $('.selector').mediaslide('get_current_link')); | ||
| get_current_updated | .mediaslide("get_current_updated") | Returns the current media item's updated date. (Show details) |
DetailsGet the current media item's update date.Code examplesInvoke theget_current_updated method:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); alert('Current media update date: ' + $('.selector').mediaslide('get_current_updated')); |
||
| get_current_object | .mediaslide("get_current_object") | Returns an object containing all of the information about the current media item. (Show details) |
DetailsGet an object containing all of the information we hold about the current media item.Code examplesInvoke theget_current_object method:$('.selector').mediaslide({ json_ajax: {url: 'imagelist.json'} }); var obj=$('.selector').mediaslide('get_current_object')); alert('Link is: ' + obj.link); alert('ID is: ' + obj.id); | ||
The MediaSlide plugin uses the jQuery UI CSS framework to style its look and feel, including colors and background textures. I would recommend using the Themeroller tool to customize the look-and-feel of the widget. However, you can also style everything yourself, as all the relevant containers have unique CSS class names. Simply use a DOM inspector such as Firebug to determine the class name of the element you wish to style.
If you find yourself making changes to MediaSlide and you think they'd be useful for other people, or if you'd like to do one of the items in the TODO file, please fork the GitHub repository, make your changes in your forked version, then issue me with a pull request when you're ready to have your changes checked by me and merged into the main trunk.
This software is made available completely free and open-source under my own 1-clause BSD license (the Javascript license), or the standard 2-clause BSD license if you prefer. I don't ask for donations, although if you want to say thanks for the software; the best thing you can do is give me a link - either to the MediaSlide page or my homepage.
  | |
|
| |
|
| |
 | |
Powered by Coppermine Photo Gallery
Music - Gallery - Software -
Links - Contact - Blog
Cuckmere Haven - Time-lapse - Desktop Wallpaper Downloads - PDF Picture Books
jQuery.ui.MediaSlide - jQuery.ui.FadeOver
Google Plus Profile
© 2001-2013 Kieran Simkin
All Rights Reserved
Powered by Coppermine Photo Gallery
Web hosting by Digital Crocus
Cuckmere Haven - Time-lapse - Desktop Wallpaper Downloads - PDF Picture Books
jQuery.ui.MediaSlide - jQuery.ui.FadeOver
Google Plus Profile
© 2001-2013 Kieran Simkin
All Rights Reserved
Powered by Coppermine Photo Gallery
Web hosting by Digital Crocus
