{"id":34,"date":"2015-03-12T20:46:56","date_gmt":"2015-03-13T03:46:56","guid":{"rendered":"http:\/\/jasonflaherty.com\/blog\/?p=34"},"modified":"2017-02-10T08:31:00","modified_gmt":"2017-02-10T16:31:00","slug":"sharepoint-2013-bootstrap-carousel-photo-app-library-and-spservices","status":"publish","type":"post","link":"https:\/\/jasonflaherty.com\/blog\/2015\/03\/12\/sharepoint-2013-bootstrap-carousel-photo-app-library-and-spservices\/","title":{"rendered":"SharePoint 2013 Bootstrap Carousel Photo App Library and SPServices"},"content":{"rendered":"

Recently I have been working with quite a few different SharePoint 2013 sites. A few of these have had requests for image sliders. My go to framework for SharePoint 2013 has been the Bootstrap 3<\/a> responsive framework<\/a>\"\", so using the flexible Bootstrap 3 Carousel is a logical choice.<\/p>\n

Note! This will only work if you are using the Bootstrap Framework already. If you are not, and would like a content slider check out some other options from Mark Rackley<\/a>, Ben Tedder<\/a> or Google<\/a>.<\/span><\/p>\n

The Carousel html is simple to setup in a static environment, but when it comes to loading data from a SharePoint 2013 library into the carousel we need to call upon the wonderful SPServices jQuery Library<\/a>! There is a great youtube video by Mark Rackley<\/a> showing how to use the Unslider<\/a> in SharePoint with a different type of library that helped in the creation of this Bootstrap carousel.<\/p>\n

There are four parts to this setup. Note! #2 is not a requirement.<\/em><\/p>\n

    \n
  1. Create an App, a Photo Library app and call it HomepagePhotos and add some optimized (I used 970×400 jpg’s) images to it.<\/li>\n
  2. Create an Image Rendition<\/a> (If you can. Read Prerequisites on the MS page.) called HomepagePhotos and give it the dimensions you would like your slider image to be. I have mine set to 970×400 for example. Note the Image Rendition ID. It will probably be 5 if you add a new one.<\/li>\n
  3. Create a single JavaScript file in your SiteAssets folder called slider.js and paste the code below into your slider.js file.<\/li>\n
  4. Add a Content Editor WebPart to your page and load the ..\/SiteAssets\/slider.js file.<\/li>\n<\/ol>\n
    <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js\"><\/script>\r\n<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery.SPServices\/2014.02\/jquery.SPServices.min.js\"><\/script><script type=\"text\/javascript\">\r\n<script>\r\njQuery(document).ready(function($) {\r\n   GetPics(\"HomepagePhotos\");\r\n});\r\n  function GetPics(hp) {\r\n      \/\/query to retrieve all items\r\n      var query = \"<Query><Where><Neq><FieldRef Name='ID' \/><Value Type='Number'><\/Value><\/Neq><\/Where><\/Query>\";\r\n      \/\/fields containing Carousel infomration. FileRef is picture URL with some junk to strip\r\n      var camlViewFields = \"<ViewFields><FieldRef Name='FileRef' \/><FieldRef Name='Title' \/><FieldRef Name='Description' \/><\/ViewFields>\";\r\n      \/\/using a counter to find the FIRST slide and give it the class active.\r\n      var i = 0;\r\n      $().SPServices({\r\n          operation: \"GetListItems\",\r\n          async: true,\r\n          listName: hp,\r\n          CAMLViewFields: camlViewFields,\r\n          CAMLQuery: query,\r\n          completefunc: function(xData, Status) {\r\n              $(xData.responseXML).SPFilterNode(\"z:row\").each(function() {\r\n                  \/\/Define variables\r\n                  \/\/You can do a console.log(xData.responseXML) and see all the fields real quickly\r\n                  var filename = ($(this).attr(\"ows_FileRef\"));\r\n                  var title = ($(this).attr(\"ows_Title\"));\r\n                  \/\/Description here is what is used for Alt text\r\n                  var desc = ($(this).attr(\"ows_Description\"));\r\n                  \/\/Filename has some data before it, so replace 1;# info before URL     \r\n                  var picture = filename.match(\/(?:(?!#).)*$\/);\r\n                  \/\/Check if it is the first entry... if so add active.\r\n                  \/\/You will see ?RenditionID=5 after the immage. I am using Image Reditions to make sure the images are the correct size... though this does not optimize. https:\/\/msdn.microsoft.com\/en-us\/library\/office\/jj720398.aspx\r\n                  if (i == 0) {\r\n                      $(\"#MyCarousel .carousel-indicators\").append(\"<li data-target='#hubCarousel' data-slide-to=\" + i + \" class='active'><\/li>\");\r\n                      $(\"#MyCarousel .carousel-inner\").append(\"<div class='item active'><img src='\/\" + picture + \"?RenditionID=5' alt='\" + desc + \"'><div class='carousel-caption'><strong>\" + title + \"<\/strong><\/div><\/div>\");\r\n\r\n                  } else {\r\n                      $(\"#MyCarousel .carousel-indicators\").append(\"<li data-target='#hubCarousel' data-slide-to=\" + i + \"><\/li>\");\r\n                      $(\"#MyCarousel .carousel-inner\").append(\"<div class='item'><img src='\/\" + picture + \"?RenditionID=5' alt='\" + desc + \"'><div class='carousel-caption'><strong>\" + title + \"<\/strong><\/div><\/div>\");\r\n                  }\r\n                  \/\/increase count until .each is done.\r\n                  i++;\r\n              }); \r\n          }\r\n      }); \r\n  }\r\n<\/script>\r\n\r\n<div id=\"MyCarousel\" class=\"carousel slide\" data-ride=\"carousel\">\r\n\u00a0 <ol class=\"carousel-indicators\"><\/ol>\r\n\u00a0 <div class=\"carousel-inner\"><\/div>\r\n\u00a0 <a class=\"left carousel-control\" href=\"#MyCarousel\" role=\"button\" data-slide=\"prev\">\r\n\u00a0\u00a0\u00a0 <span class=\"fa fa-chevron-left\"><\/span>\r\n\u00a0 <\/a>\r\n\u00a0 <a class=\"right carousel-control\" href=\"#MyCarousel\" role=\"button\" data-slide=\"next\">\r\n\u00a0\u00a0\u00a0 <span class=\"fa fa-chevron-right\"><\/span>\r\n\u00a0 <\/a>\r\n<\/div><\/pre>\n
    After you have added your CEW and linked to your slider.js file, save your page, check it in and publish it.<\/p>\n
    If all went well, you will see your Carousel begin. Hopefully this worked well for you. If you ran into issues, maybe I can help! Leave a comment below.<\/p>\n
    *BONUS! There is a wonderful set of Bootstrap Carousel’s by Rico Loschke on sevenx.de<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
    Recently I have been working with quite a few different SharePoint 2013 sites. A few of these have had requests for image sliders. My go to framework for SharePoint 2013 has been the Bootstrap 3<\/a> responsive framework<\/a>\"\", so using the flexible Bootstrap 3 Carousel is a logical choice.<\/p>\n
    ∼ Continue Reading ∼<\/a><\/p>\n","protected":false},"author":1,"featured_media":82,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"footnotes":"","_jetpack_memberships_contains_paid_content":false,"jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[12,13,37],"tags":[41,40,25,39,14,38],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/jasonflaherty.com\/blog\/wp-content\/uploads\/2015\/03\/sharepoint2013.png?fit=1920%2C1080&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5OfD9-y","jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/posts\/34"}],"collection":[{"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":1,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/posts\/34\/revisions"}],"predecessor-version":[{"id":296,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/posts\/34\/revisions\/296"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/media\/82"}],"wp:attachment":[{"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/media?parent=34"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/categories?post=34"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/tags?post=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}