{"id":1207,"date":"2014-04-08T21:03:26","date_gmt":"2014-04-09T04:03:26","guid":{"rendered":"https:\/\/mmman.itgroove.net\/?p=1207"},"modified":"2023-02-24T21:48:32","modified_gmt":"2023-02-24T21:48:32","slug":"an-alternative-photo-rotator-solution","status":"publish","type":"post","link":"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/","title":{"rendered":"An Alternative Photo Rotator Solution"},"content":{"rendered":"

A customer of ours had an issue with the out of the box photo rotator in SharePoint \u2013 every few minutes it kept prompting them for credentials.  After some inspection, I noticed that pretty much every rotator solution would always change the image by swapping between two <img> elements, and changing the URL of the one not currently in focus.  As this was ultimately causing the browser to fetch new content every few seconds, I decided to write my own rotator which instead does a one time pull of all the images, and iterates between the collection.<\/p>\n

Many thanks to Bill Simser for much of the code for querying the lists in this article here<\/a>.<\/p>\n

First off, get a copy of a jQuery library and store it somewhere on your site.  Next, create a picture library, and name it \u201cRotator Images\u201d.  <\/p>\n

After you\u2019ve got those in place, put this code into a content editor (using edit HTML source), and your rotator should come alive.<\/p>\n

Here\u2019s the code, enjoy!<\/p>\n

\n[code language=”html”]
\n<div id="RotatorCont"><\/div>
\n<style type="text\/css">
\n.pictureWrapperDiv
\n{
\n\tmargin: 0px;
\n\tpadding: 0px;
\n\tborder: 0px;
\n}
\n.pictureGallery
\n{
\n\tmargin: 0px;
\n\tpadding: 0px;
\n\tborder: 0px;
\n}
\n<\/style><\/p>\n

<script type="text\/javascript" src="\/Style%20Library\/Branding\/Scripts\/jQuery-1.7.1.js"><\/script>
\n<script type="text\/javascript"><\/p>\n

\/\/Globals for # of secs between images, max width and height, and the name of the picture library (must be local to this web site)
\n\/\/You can modify these as necessary
\nvar itgLoadTimeSecs = 8;
\nvar itgImgHeight = 296;
\nvar itgImgWidth = 390;
\nvar itgRotatorLibraryTitle = "Rotator Images";<\/p>\n

\/\/Globals for internal use only (don’t change these)
\nvar itgImgRotCount = 0;
\nvar itgImgRotIter = 0;
\nvar picid = "itgDynaImg";
\nvar itgLoadTime = itgLoadTimeSecs * 1000;<\/p>\n

$(document).ready(function(){
\n \/\/start your engines
\n\tpageonload();<\/p>\n

\t\/\/Set a slight delay before kicking off the query (just for good measure)
\n\tsetTimeout(loadSharePointPictures, 250);
\n});<\/p>\n

function pageonload()
\n{
\n\tvar rota = $("#RotatorCont");
\n\trota.css("display", "inline-block");
\n}<\/p>\n

function loadSharePointPictures()
\n{
\n\t\/\/fetch the list of items using the client object model
\n\tvar context = new SP.ClientContext.get_current();<\/p>\n

\t\/\/get the current website
\n\tvar web = context.get_web();<\/p>\n

\t\/\/get the pictures list
\n\tvar list = web.get_lists().getByTitle(itgRotatorLibraryTitle);<\/p>\n

\t\/\/create the query to get all items
\n\tvar query = SP.CamlQuery.createAllItemsQuery();<\/p>\n

\t\/\/get all items from the query
\n\tpictures = list.getItems(query);<\/p>\n

\t\/\/load the context
\n\tcontext.load(pictures, ‘Include(FileLeafRef,FileDirRef)’);<\/p>\n

\t\/\/execute the query in async mode
\n\tcontext.executeQueryAsync(
\n\t\tFunction.createDelegate(this, this.success),
\n\t\tFunction.createDelegate(this, this.failed)
\n\t);
\n}<\/p>\n

function success(sender, args)
\n{
\n pictureArray = new Array();
\n var pictureCount = 0;<\/p>\n

\t\/\/pull the details about each image (directory and filename) out of the result
\n var enumerator = this.pictures.getEnumerator();
\n while(enumerator.moveNext())
\n\t{
\n var currentItem = enumerator.get_current();
\n var filename = currentItem.get_item(‘FileLeafRef’);
\n var dir = currentItem.get_item(‘FileDirRef’);
\n filename = dir + ‘\/’ + filename;
\n pictureArray[pictureCount++] = filename;
\n }
\n var newHtml = ”;<\/p>\n

\t\/\/set the first image to display
\n\tvar itgdispval = "block";<\/p>\n

\t\/\/iterate through the result and create HTML code (img with div wrapper) for each picture
\n for(var i = 0; i < this.pictureArray.length; i++)
\n\t{
\n\t\tif (i > 0)
\n\t\t{
\n\t\t\t\/\/set all the additional images to hidden
\n\t\t\titgdispval = "none";
\n\t\t}
\n newHtml += ‘<div id="’ + picid + i.toString() + ‘" class="pictureWrapperDiv" style="height: ‘ + itgImgHeight + ‘px; max-height: ‘ + itgImgHeight + ‘px; width: ‘ + itgImgWidth + ‘px; max-width: ‘ + itgImgWidth + ‘px; display: ‘ + itgdispval + ‘;"><img class="pictureGallery" src="’;
\n newHtml += this.pictureArray[i];
\n newHtml += ‘" style="max-height: ‘ + itgImgHeight + ‘px; max-width: ‘ + itgImgWidth + ‘px;"\/><\/div>’;
\n }
\n\t\/\/store the number of images
\n\titgImgRotCount = i;<\/p>\n

\t\/\/start the iterator
\n\titgImgRotIter++;<\/p>\n

\t\/\/assign the HTML to the rotator container
\n $(‘#RotatorCont’).html(newHtml);<\/p>\n

\t\/\/start the rotator
\n\tsetTimeout(itgRotateImg, itgLoadTime);
\n}<\/p>\n

function failed(sender, args)
\n{
\n\t\/\/alert("Failure: [" + sender + "] \/ [" + args + "]");
\n}<\/p>\n

function itgRotateImg()
\n{
\n\tvar dynapicid = picid + itgImgRotIter.toString();
\n\tvar dynalast = 0;
\n\tif ((itgImgRotCount > 0) && (itgImgRotIter == 0))
\n\t{
\n\t\tdynalast = itgImgRotCount – 1;
\n\t}
\n\telse
\n\t{
\n\t\tdynalast = itgImgRotIter – 1;
\n\t}
\n\tvar dynapicidlast = picid + dynalast.toString();<\/p>\n

\t\/\/hide the last image to be displayed
\n\t$(‘#’ + dynapicidlast).css("display", "none");<\/p>\n

\t\/\/show (fade in) the next image
\n\t$(‘#’ + dynapicid).fadeIn(400);
\n\tif ((itgImgRotIter + 1) < itgImgRotCount)
\n\t{
\n\t\titgImgRotIter++;
\n\t}
\n\telse
\n\t{
\n\t\titgImgRotIter = 0;
\n\t}
\n\tsetTimeout(itgRotateImg, itgLoadTime);
\n}
\n<\/script>
\n[\/code]<\/p>\n","protected":false},"excerpt":{"rendered":"

A customer of ours had an issue with the out of the box photo rotator in SharePoint \u2013 every few minutes it kept prompting them for credentials.  After some inspection, I noticed that pretty much every rotator solution would always change the image by swapping between two <img> elements, and changing the URL of the … <\/a><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[4,7],"tags":[],"acf":[],"yoast_head":"\nAn Alternative Photo Rotator Solution - Archive<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Alternative Photo Rotator Solution - Archive\" \/>\n<meta property=\"og:description\" content=\"A customer of ours had an issue with the out of the box photo rotator in SharePoint \u2013 every few minutes it kept prompting them for credentials.  After some inspection, I noticed that pretty much every rotator solution would always change the image by swapping between two <img> elements, and changing the URL of the …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/\" \/>\n<meta property=\"og:site_name\" content=\"Archive\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-09T04:03:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-24T21:48:32+00:00\" \/>\n<meta name=\"author\" content=\"Colin Phillips (Alumni)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Colin Phillips (Alumni)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/\",\"url\":\"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/\",\"name\":\"An Alternative Photo Rotator Solution - Archive\",\"isPartOf\":{\"@id\":\"https:\/\/regroove.ca\/archive\/#website\"},\"datePublished\":\"2014-04-09T04:03:26+00:00\",\"dateModified\":\"2023-02-24T21:48:32+00:00\",\"author\":{\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/adeb0df1cc7a862160be620ca7eace1b\"},\"breadcrumb\":{\"@id\":\"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog Archive\",\"item\":\"https:\/\/regroove.ca\/archive\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An Alternative Photo Rotator Solution\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/regroove.ca\/archive\/#website\",\"url\":\"https:\/\/regroove.ca\/archive\/\",\"name\":\"Archive\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/regroove.ca\/archive\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/adeb0df1cc7a862160be620ca7eace1b\",\"name\":\"Colin Phillips (Alumni)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/14eeab0d377e9630e0983d9c08911979?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/14eeab0d377e9630e0983d9c08911979?s=96&d=mm&r=g\",\"caption\":\"Colin Phillips (Alumni)\"},\"url\":\"https:\/\/regroove.ca\/archive\/author\/cphillips\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"An Alternative Photo Rotator Solution - Archive","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/","og_locale":"en_US","og_type":"article","og_title":"An Alternative Photo Rotator Solution - Archive","og_description":"A customer of ours had an issue with the out of the box photo rotator in SharePoint \u2013 every few minutes it kept prompting them for credentials.  After some inspection, I noticed that pretty much every rotator solution would always change the image by swapping between two <img> elements, and changing the URL of the …","og_url":"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/","og_site_name":"Archive","article_published_time":"2014-04-09T04:03:26+00:00","article_modified_time":"2023-02-24T21:48:32+00:00","author":"Colin Phillips (Alumni)","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Colin Phillips (Alumni)","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/","url":"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/","name":"An Alternative Photo Rotator Solution - Archive","isPartOf":{"@id":"https:\/\/regroove.ca\/archive\/#website"},"datePublished":"2014-04-09T04:03:26+00:00","dateModified":"2023-02-24T21:48:32+00:00","author":{"@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/adeb0df1cc7a862160be620ca7eace1b"},"breadcrumb":{"@id":"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/regroove.ca\/archive\/2014\/04\/08\/an-alternative-photo-rotator-solution\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Archive","item":"https:\/\/regroove.ca\/archive\/"},{"@type":"ListItem","position":2,"name":"An Alternative Photo Rotator Solution"}]},{"@type":"WebSite","@id":"https:\/\/regroove.ca\/archive\/#website","url":"https:\/\/regroove.ca\/archive\/","name":"Archive","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/regroove.ca\/archive\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/adeb0df1cc7a862160be620ca7eace1b","name":"Colin Phillips (Alumni)","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/14eeab0d377e9630e0983d9c08911979?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/14eeab0d377e9630e0983d9c08911979?s=96&d=mm&r=g","caption":"Colin Phillips (Alumni)"},"url":"https:\/\/regroove.ca\/archive\/author\/cphillips\/"}]}},"_links":{"self":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/1207"}],"collection":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/comments?post=1207"}],"version-history":[{"count":1,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/1207\/revisions"}],"predecessor-version":[{"id":1879,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/1207\/revisions\/1879"}],"wp:attachment":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/media?parent=1207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/categories?post=1207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/tags?post=1207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}