Saturday, 1 June 2013

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

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.

- 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.

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.

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

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

The description of all variables is shown below -




This must be the URL of you google+ album (Ex:


This is a mandatory attribute.


The width of your slideshow.


If this is not supplied, width of mySlide widget defaults to 640px.


The height of your slideshow.


If this is not supplied, width of mySlide widget defaults to 280px.


The delay in milliseconds between the auto change of your slideshow images.


If this is not supplied, a 3 second delay is used.

Other functionalities:

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

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: "{}"

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

2. Include plugins

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!

3. 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. I'm impressed, I must say. Rarely do I encounter a blog that's both educative and entertaining, and without a doubt, you've hit the nail on the head. The issue is an issue that not enough folks are speaking intelligently about. I'm very happy
    I came across this during my hunt for something concerning this.

    My web page download free movies online

    1. Well thanks, im glad you liked it!

      And I liked you webpage design too..

      And yes, the issue is an issue with many new blogs like me but im trying to get over it :)

  2. Looks great... will check it out!

  3. This is absolutely brilliant - thank you!

  4. Good article. I definitely appreciate this site. Continue the good work!

    Also visit my homepage scort

  5. great work, really impressed! will try soon!

    Qaulity Web Programmer

  6. Hey Guys,

    great work. Thank you. I have one little problem. Since i want to use the slideshow in a blogger post, i need to change the path to the arrow images in the javascript. This is because it is not possible to host the js library on blogger.
    How change it?


    1. The myslide.min.js maintains the paths of its 2 pointer-images, however you need to decompress the js to a readable script. You can find a section: $('#slide').append( ...< img id="lpointer-img" class="pointer-img" src="./lpointer-big.png" /> ...


  7. This comment has been removed by the author.

  8. Keep it up!! You have done the nice job having provided the latest information.
    MySpace account

  9. Is there a way to start at a random spot on the album on load?

  10. Hi, Nice work, I've bookmarked this page and have a feeling I'll be returning to it regularly.
    bra tape

  11. Slide shows for wedding are becoming very popular. But where does the wedding slide show fit into the days events?

  12. Multimedia content including sound, music and video clips add more energy and interest to your web pages. Using website add-ons that has been available online for years now, you can embed any number of different types of multimedia files easily to your own web page, even if you have no programming experience. Read more

  13. Thank you so much admin, while giving us the opportunity to take their link on this forum

  14. This comment has been removed by the author.

  15. Is it true that you are feeling you don't get the most out of your home office and your work area? Ensure you read this article now. It will help you to get sorted out right now and later on. This may well be the most critical article you read today. See More

  16. Thanks for sharing these useful information! This is really interesting information for me.
    - google mail