Creating a page layout with a picture-library-based image carousel using JavaScript

Page layouts provide easy-to-use templates for content creators to use when creating SharePoint site content. In scenarios where a certain page design is used repetitively, a page layout is ideal. One example of this is an image carousel used by landing pages. In this recipe, we will create a JavaScript-based image carousel that displays images from a picture library in the SharePoint site.

To simplify the process of creating the JavaScript image carousel, we will use the jQuery framework (http://www.jquery.com) and jQuery bxSlider plugin (http://www.bxslider.com).

Note

This recipe will look for images in the Images picture library in the SharePoint site. Upload a few 750 px wide images (each with a constant height) for the image carousel to use.

Getting ready

For this recipe, we will use the page layout we previously created in the Creating a page layout with three columns of web part zones recipe.

How to do it...

Follow these steps to create a page layout with an image carousel:

  1. Open SharePoint Designer.
  2. Select Open Site. Enter the complete URL to the SharePoint site and select Open.
  3. From the Navigation pane, select Page Layouts.
  4. In the list of files in the Page Layouts library, make a copy of PageLayout_ThreeColumn.aspx (for our example, we have renamed it PageLayout_ImageCarousel.aspx).
  5. Check out the new PageLayout_ImageCarousel.aspx page layout.
  6. Open the PageLayout_ImageCarousel.aspx page layout.
  7. Add an ImageCarousel.css stylesheet file and an ImageCarousel.js JavaScript file to the resources folder located at _catalogs/masterpage/resources.
  8. Add references to our custom stylesheet, the jQuery bxSlider stylesheet, the jQuery JavaScript, and the jQuery bxSlider plugin JavaScript to the page. In addition, reference the SharePoint JavaScript files to ensure they are loaded on the page.
    <SharePointWebControls:CssRegistration ID="customCss" name="<% $SPUrl:~Site/_catalogs/masterpage/resources/imagecarousel.css %>" runat="server"/>
<SharePointWebControls:CssRegistration ID="bxSliderCss" name="<% $SPUrl:~Site/_catalogs/masterpage/resources/jquery.bxslider.css %>" runat="server"/>
<SharePointWebControls:ScriptLink ID="jQuery" Name="~site/_catalogs/masterpage/resources/jquery-2.0.2.min.js" runat="server"></SharePointWebControls:ScriptLink>
<SharePointWebControls:ScriptLink ID="bxSliderJs" Name="~site/_catalogs/masterpage/resources/jquery.bxslider.js" runat="server"></SharePointWebControls:ScriptLink>
<SharePointWebControls:ScriptLink ID="customJavaScript" Name="~site/_catalogs/masterpage/resources/imagecarousel.js" runat="server"></SharePointWebControls:ScriptLink>
<SharePointWebControls:ScriptLink Name="sp.js" runat="server" Localizable="false" LoadAfterUI="true" />      
<SharePointWebControls:ScriptLink Name="sp.runtime.js" runat="server" Localizable="false" LoadAfterUI="true" />
<SharePointWebControls:ScriptLink Name="sp.core.js" runat="server" Localizable="false" LoadAfterUI="true" />
  9. Locate the first <div class="ms-table ms-fullWidth"> element.
  10. Before the <div> elements it contains, add the following <div> tag to contain the image carousel:
    <div class="ImageCarousel"></div>
  11. In our ImageCarousel.css stylesheet, provide a default height, width, and display for the image carousel as follows:
    .ImageCarousel {
height: 400px;
width: 800px;
display: block;
}
  12. In our ImageCarousel.js JavaScript file, create a function to initialize the carousel and use the ExecuteOrDelayUntilScriptLoaded function to execute the function after the SharePoint JavaScript files load as shown in the following code:
    function InitializeImageCarousel() {    
}
ExecuteOrDelayUntilScriptLoaded(InitializeImageCarousel, "sp.js");

    Tip

    The ExecuteOrDelayUntilScriptLoaded function is provided by SharePoint to allow us to instruct SharePoint to load the required core JavaScript and then execute our function.

  13. In our initialization function, get the current SharePoint context:
    var context = new SP.ClientContext.get_current();
  14. From the context, get the current SharePoint site:
    var web = context.get_web();
  15. Get the Images picture library from the SharePoint site as follows:
    var list = web.get_lists().getByTitle('Images'),
  16. Use a CAML query to limit the number of returned items to five:
    var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><RowLimit>5</RowLimit></View>'),

    Note

    CAML is an XML-based query schema used by SharePoint to query SharePoint lists.

  17. Get the items from the list with the CAML query as follows:
    var items = list.getItems(camlQuery);
  18. Instruct the context to load the items with the Id, Title, and FileRef properties as follows:
    context.load(items, 'Include(Id, Title, FileRef)'),
  19. Call the executeQueryAsync method on the context to execute the query and provide delegate functions to execute on success or failure of the request, as shown in the following code:
    context.executeQueryAsync(
Function.createDelegate(this, function (sender, args) {
  // Success
}),
Function.createDelegate(this, function (sender, args) {
    // Failed
}));
  20. In the failure delegate function (the second function), use the SharePoint debug trace function to write the error to the browser console as follows:
    Sys.Debug.trace('Request failed. ' + args.get_message() + '
' + args.get_stackTrace());
  21. In the success delegate function (this first function), create the <ul> container object for the image carousel using the following line of code:
    var slider = $('<ul class="bxslider"></ul>'),
  22. Iterate through each item and add the <li> element representing the image using the following code:
    var listItemEnumerator = items.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var itemHtml = $('<li><img title="' + oListItem.get_item("Title") + '" src="' + oListItem.get_item("FileRef") + '" /></li>'),
itemHtml.appendTo(slider);
}
  23. Add the <ul> image carousel container to the following image carousel <div> we have on the page:
    var imageCarousel = $('.ImageCarousel'),
slider.appendTo(imageCarousel);
  24. Initialize the jQuery bxSlider plugin using the following line of code:
    $('.bxslider').bxSlider({ captions: true, slideWidth: 750 });
  25. Set the height of the image carousel <div> to match the bxSlider height to ensure there is no overlapping content:
    $('.ImageCarousel').height($('.bx-wrapper', $('.ImageCarousel')).height());
  26. Save the page layout.
  27. Navigate back to the Properties page for the page layout.
  28. Select Manage all file properties in the browser from the Customization section.
  29. Select Edit Item from the ribbon and ensure that the Content Type is set to Page Layout.
  30. Provide a new title for the page layout (for example, Image Carousel).
  31. For the Associated Content Type option, set Content Type Group to Page Layout Content Types and Content Type Name to Article Page.
  32. Save the item.
  33. Check in and publish the page layout using the Check In and Publish options.
  34. Navigate to the Pages library of the SharePoint site using your preferred web browser.
  35. Select New Document from the Files tab on the ribbon.
  36. Provide a title and URL for the new page in the Title and URL fields.
  37. Select the newly created page layout.
  38. Click on Create.
  39. View the page to observe our image carousel. The following screenshot shows the Image Carousel window:
    How to do it...

How it works...

In addition to the server-side object model, SharePoint provides additional object models to interact with SharePoint content. In this recipe, we used the JavaScript object model (JSOM). Using JSOM, we retrieved the current site from the current SharePoint context. We used a CAML query to retrieve the Images picture library in the current site. We then created an unordered list with the images and used our JavaScript libraries and plugins (jQuery and bxSlider) to create our image carousel. Once we had our page layout created, we created a page with it to observe our image carousel.

See also

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.141.42.116