Flickr/Instagram Slideshow - CommonSpot Element Examples - Webmaster - UW-Superior

Webmaster

University of Wisconsin-Superior

Belknap and Catlin
P.O. Box 2000
Superior, WI 54880

ph. 715-394-8300

Webmaster

CommonSpot Custom Element Examples

Flickr/Instagram Slideshow

Purpose

Flickr and Instragram are very popular photo sharing/management websites that our website editors make use of. This slideshow element allows website editors to embed a slideshow of selected photos from their Flickr or Instragram account.

Screenshots

Campus Tour Flickr Slideshow
Campus Tour Flickr Slideshow
News Article Slideshow (fullscreen lightbox)
News Article Slideshow (fullscreen lightbox)

Management

Photos have to managed at either Flickr or Instagram. Website editors can put this Slideshow element on a page, and just copy+paste in the URL of the Flickr photostream, photoset, or photo tag URL. For Instragram, they need to enter the Instagram account name. This element is available to all website editors to put on any webpage of their choice as needed.

Features

  • Website Editors can specify a Flickr photostream, photoset, or photos by tag
  • They can also display photos of an Intragram account
  • Slideshow is touchscreen friendly - it allows users to swipe left/right to navigate to the previous/next photo in the slideshow
  • Photos slide in from the right. Thumbnail navigation is displayed beneath.
  • JQuery slideshow
  • Slideshow component can technically render any array of photos - where they're from doesn't matter
  • Slideshow is responsive - it conforms to the width of it's container so it works well in a responsive webpage design
  • Unlimited number of photos can be included the slideshow, but for load time, I put a cap at 20 photos
  • The slideshow can be embedded onto a page, or the first photo can be embedded onto the page and when clicked, a lightbox opens full-browser width displaying the slideshow much larger
  • This Slideshow is integrated into the News/Events Global Custom Element and the Blog Global Custom Element
  • Multiple Slideshows can be put on the same page

Working Examples


Back to Top