jQuery Google Plus & Picasa Photo Slideshow Plugin - Google slides
File Size: | 14.1KB |
---|---|
Views Total: | 5912 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Google slides is a jQuery slideshow plugin that displays your photos from Google plus & Picasa albums in a customizable slideshow with fade animations and image caption support.
See also:
- jQuery Plugin For Showing Picasa/Google Plus Albums and Images - Pimax
- jQuery Picasa Web Albums Gallery Plugin - Picasa Gallery
- jQuery Plugin For Google+ Albums Slideshow - mySlide
How to use it:
1. Load the latest jQuery javascript library on your web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2. Load the jQuery google slides plugin files on the web page.
<link href="src/jquery.googleslides.css" rel="stylesheet" type="text/css" /> <script src="src/jquery.googleslides.js" type="text/javascript"></script>
3. Create a container where you want to place the slideshow.
<div id="demo1"> </div>
4. Get your Picasa/Google plus User Id & Album Id and enter them in the javascript as shown below. Any album you want to display with this plugin must be marked for 'Public' sharing from Google.
<script type="text/javascript"> $(document).ready(function () { $("#demo1").googleslides({ userid: 'USER ID', albumid: 'ALBUM ID' }); }); </script>
5. All the options.
<script type="text/javascript"> $(document).ready(function () { $("#demo1").googleslides({ userid: 'USER ID', albumid: 'ALBUM ID' authkey: '', // If albumid is shared with 'Limited' visibility, you must provide your album authkey. imgmax: 460, // Max size, in pixels, of the photos. (Note: A value of 100 will produce square sized thumbnails.) maxresults: 100, // Max number of photos to show from the album. random: true, // Randomize the order the photos are displayed in. caption: true, // Show the photo caption, if available. albumlink: true, // Link the photos to the Google album page. time: 5000, // Time to show each photo before advancing (in milliseconds). fadespeed: 1000 // Fade in/out speed (in milliseconds). }); }); </script>
This awesome jQuery plugin is developed by bradyholt. For more Advanced Usages, please check the demo page or visit the official website.