The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

mySlide : slideshow on your website using Google+ album - jQuery plugin

Tags :

Plugin rate :

mySlide is a jquery plugin that will create a slideshow on your website using images from a particular google plus album.

All you have to do is specify that google album in your javascript.
You may also add a link url in the caption field of your image in the google+ albums interface.

When you do that, the slideshow image will have a link to that URL. Hence when users click on that image in the slideshow, they will be redirected to your custom URL.

 

Features :

  • - you can customize width and height of the widget on your website.
  • - you can customize the time interval between auto change of the slideshow images
  • - the widget itself is responsive; given a width or % for the widget, the inner contents will resize accordingly.

 

For better visibility, you can make sure that the dimensions of your widget are equal to the dimensions of your album images.

Implementation: 

HOW TO USE

The download pack contains the plugin file - myslide.min.js and the HTML file deployed in the demo slide.html

 

 

1. SPECIFY YOUR GOOGLE+ ALBUM URL

Open Google+ and navigate to your albums tab.

 

sl1.png

 

Click on the album you want to use as a slideshow on your website. Make sure the album has public visibility on google+.

 

sl2.png

 

Copy this URL from your browser navigator and paste it in your JS.

 

1
2
3
4
5
6
7
8
<script type="text/javascript">
 var googleAlbumLink = "https://plus.google.com/photos/104945011440675361336/albums/5866190936567927873?banner=pwa";
  
 //optional-----------------------
 var mySlideWidth = 600;
 var mySlideHeight = 280;
 var mySlideDelay = 3000; //delay in milliseconds - 3000 = 3 seconds delay
</script>

 

 

Other functionalities :

 

To specify the width of mySlide widget as a percentage(%), add the below code in your css

1
#slide{width:100% !important;}

 

 

2. ADDING A LINK IN YOUR CAPTION FIELD

Click on any image from your album. In the caption field towards the right of your page paste the link where the users will be taken when they click on this image from the slideshow. The link should be within curly braces. Example: "{http://example.com/product1}"

 

sl3.png

 

This is used in you slideshow to navigate users when they click on images.

 

sl4.png

 

 

3. INCLUDE PLUGN

Include the jQuery plugin if not done already. Now, include the plugin myslide.min.js before the end of your body tag and you are done!

1
2
3
4
5
6
<body>
  ...
  ... 
  <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
  <script src="./myslide.min.js"></script>
</body>

 

 

5. CREATE A CONTAINER FOR YOUR INTERFACE

Add a div as shown below in you HTML. This div will contain the mySlide widget and display your slideshow.

1
<div id="slide"></div>
Options: 
googleAlbumLink
String
Default : '' - This must be the URL of you google+ album (Ex: https://plus.google.com/photos/104945011440675361336/albums/5866190936567927873). This is a mandatory attribute.
mySlideWidth
Integer
Default : 640 - The width of your slideshow. If this is not supplied, width of mySlide widget defaults to 640px.
mySlideHeight
Integer
Default : 280 - The height of your slideshow. If this is not supplied, width of mySlide widget defaults to 280px.
mySlideDelay
Integer
Default : 3000 - The delay in milliseconds between the auto change of your slideshow images. If this is not supplied, a 3 second delay is used.
Screenshots

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.7
Current version
1.0
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Comments [0]