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
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