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.

Comments

Post a Comment

Popular posts from this blog

Universal Search / Blended Search

Image
If I had to recommend one thing regarding SEO/inbound marketing...embrace the social media tools like blogging, Twitter , Facebook, YouTube, etc. Google is transforming the way it ranks content: http://www.wired.com/magazine/2010/02/ff_google_algorithm/ You can already get a hint at what's on the horizon with universal or blended search (Websites, video, images, local maps, and even social "mentions"). According to Google, "The ultimate goal of universal search is to break down the silos of information that exist on the web and provide the very best answer every time a user enters a query." If a potential customer has a question...it makes sense to provide Google with your "very best answer".
Read more

Bacon Wrapped Strip Steak

Image
Bacon Wrapped Strip Steaks My first attempt at cooking bacon-wrapped steaks on my propane-fueled Weber grill.  They turned out great! I started by prepping the steaks. I seasoned them with a bit of salt and pepper. Next, I wrapped each steak with a strip of bacon, securing it with a toothpick. I grilled them for about 6 minutes on each side until the bacon was crispy and the meat cooked to a medium rare temperature. I removed the steaks from the grill and let them rest for a few minutes to allow the juices to redistribute. Then, I sliced them into thin strips and served them up. The bacon-wrapped strip steaks were delicious. It was the perfect summertime meal! The bacon added a salty and smoky flavor to the juicy and flavorful meat. PIN RECIPE Bacon Wrapped Strip Steak Recipe These bacon-wrapped strip steaks are juicy and flavorful, with a crispy bacon exterior. Perfect for grilling on a
Read more

Convert Your Website to a Mobile Friendly Design

Image
Make Sure Your Website is Mobile Friendly. Earlier this year, Google Search expanded its use of mobile-friendliness as a "ranking signal". This change affected mobile searches worldwide and had a significant impact on Google Search results. Google's Mobile-Friendly Test Tool How to get the“mobile-friendly” label from Google. Avoid software that is not common on mobile devices, like Flash Use text that is readable without zooming Size content to the screen so users don't have to scroll horizontally or zoom Place links far enough apart so that the correct one can be easily tapped If you want to make sure that your page meets the mobile-friendly criteria: Check your pages with the Mobile-Friendly Test . Read Google's updated documentation, " Webmasters Mobile Guide " on how to create and improve your mobile site
Read more