Wednesday, June 25, 2014

jQuery Slider in Google Sites

How to embed an image slider in Google Sites


I found a simple little jQuery image slider that can be easily embedded into Google Sites.  It is fast loading and adapts well when rendering on mobile devices.  Here are the steps I use:
  1. Get Unslider: The jQuery slider that just slides. No fancy effects or unnecessary markup, and it’s less than 3kb.
  2. Upload .JS and .HTML files to a new folder in Google Drive
  3. Create your banner IMAGES and upload them to the same Drive folder
    • Tip - use a sequential naming convention... 01.JPG, 02.JPG, 03.JPG
  4. Modify the inline CSS contained in file unslider.html
  5. Modify the transition speed and image timing in file unslider.min.js
  6. Share the Google Drive folder and all of contents
  7. Copy the URL from share link
  8. Insert an iFrame gadget in Google Sites
  9. Configure the iFrame gadget settings
    1. Paste URL:
      https://googledrive.com/host/0BwbEKZDYh_HCbGw3SXBmS1dfeXc/unslider.html
    2. Change the folder URL to match the share link generated from Google Drive in step 7
    3. Change the gadget width to 100% and experiment with the other settings until you get desired look
  10. Save the page in order to see your image slider in action
One issue that I have not been able to resolve is how to preserve the slider's aspect ration when viewed on a mobile device.  You will notice the images are pinched a bit.  However, it's still a cool solution and integrates nicely within the Google Sites framework.

Example of jQuery Unslider image slider hosted on Google Drive



Patrick LaJuett
Patrick LaJuett manages a website design agency: + LaJuett.com, where he supports clients as a Web technology consultant and search marketing strategy adviser.

No comments :

Popular Posts