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.

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.






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 -

 

 

googleAlbumLink

This must be the URL of you google+ album (Ex: https://plus.google.com/photos/104945011440675361336/albums/5866190936567927873)

 

This is a mandatory attribute.

mySlideWidth

The width of your slideshow.

 

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

mySlideHeight

The height of your slideshow.

 

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

mySlideDelay

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: "{http://example.com/product1}"



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.


Thanks!

12 comments:

  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

    ReplyDelete
    Replies
    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 :)

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

    ReplyDelete
  3. This is absolutely brilliant - thank you!

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


    Also visit my homepage scort

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

    M.Smith
    Qaulity Web Programmer

    ReplyDelete
  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?

    Thanks.

    ReplyDelete
    Replies
    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" /> ...

      Paulus

      Delete
  7. This comment has been removed by the author.

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

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

    ReplyDelete