Create carousel (Slideshow) using SharePoint App

-
Open Visual Studio 2013 and create a new SharePoint App as shown here:

Open Default.aspx file and add the below code

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.slides.min.js"></script>
    

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div id="slider" style="position: relative; left: 0px; width:200px; height: 200px;">
            <!-- The following content will be replaced with the user name when you run the app - see App.js -->
            
      
    </div>

</asp:Content>

Open App.js file and add the below code


'use strict';

var hostweburl;
var appweburl;
var oItems;


// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
    hostweburl =decodeURIComponent(getQueryStringParameter("SPHostUrl"));
    appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
    getListData();
   
});

// This function prepares, loads, and then executes a SharePoint query to get the List data
function getListData() {
    var ctx = new SP.ClientContext(appweburl);
    var appCtxSite = new SP.AppContextSite(ctx, hostweburl);
    var web = appCtxSite.get_web();
    var list = web.get_lists().getByTitle("Slideshow");
    var query = new SP.CamlQuery(); //The Query object. This is used to query for data in the List

  query.set_viewXml('<View><RowLimit></RowLimit>10</View>');

  oItems = list.getItems(query);
    ctx.load(list);
    ctx.load(oItems,'Include(EncodedAbsUrl)');
    ctx.executeQueryAsync(onGetTitlesSuccess, onGetTitlesFail);
}

// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetTitlesSuccess() {
    var imageTitles = oItems.getEnumerator();
    var titles = '';
    while (imageTitles.moveNext()) {
        var currentListItem = imageTitles.get_current();
        $('#slider').append("<img src='" + currentListItem.get_item('EncodedAbsUrl') + "' >");
    }
    $('#slider').slidesjs(
      {
          play: {
               active: true,
              auto: true,
              interval: 4000,
              swap: true,
              pauseOnHover: true,
              restartDelay: 2500
          }
      });
}

// This function is executed if the above call fails
function onGetTitlesFail(sender, args) {
    alert('Failed to get images. Error:' + args.get_message());
}

// Function to retrieve a query string value.
// For production purposes you may want to use
//  a library to handle the query string.
function getQueryStringParameter(paramToRetrieve) {
    var params =
        document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}

Comments

Post a Comment

Popular posts from this blog