Show Pictures with Slimbox in SharePoint

Pictures are an important part of a SharePoint site, it enriched the otherwise plain look and feel. With a little extra effort we can integrate Slimbox to show the pictures in a very slick and modern way.

Solution

1. Download Slimbox2 and jQuery, in this example I used jQuery 1.8.3 uncompressed.
2. Save the files in the Style Library of SharePoint. Note that not all the Slimbox files are required to be stored in SharePoint.
3. Include the jQuery javascript, the Slimbox javascript and the Slimbox CSS to the page, page-layout or the master page.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2-rtl.css" type="text/css" media="screen" />

5. Create a picture library and save a couple of pictures to the library. The picture library will provide the necessary thumbnails without any extra effort.
6. Add a CQWP to a page and query the pictures.
7. Create a XSLT that shows the small thumbnails of the pictures, for example in a banner view.

Slimbox Result 1

8. I created two variables for the default SharePoint Thumbnails, Thumbnail_w and Thumnbail_t. And used the following code to show the small thumbnail with a Slimbox link to the bigger thumbnail.

<a href="{$Thumbnail_w}" rel="lightbox" title="{@Title}">
   <img src="{$Thumbnail_t}" alt="alt" class="PhotoAppThumbnail" />
</a>

9. Also note that the title field is added to the Slimbox link, the title will be displayed on the Slimbox overlay.

Result

Slimbox Result 1

SharePoint 2013 Editable column in the Dataview and Quickedit

With the dataview and Quickedit view user are able to quickly edit multiple items and columns. The following overview contains a list of which columns are editable. Remember depending on the SharePoint 2013 version and updates different columns might be editable.

Overview

Column Type SP 2013 Cloud SP 2013 Onpremise
Title Editable Editable
Single Text Editable Editable
Multiple lines of Rich Text Editable Editable
Multiple lines of plain Text Editable Editable
Choice Editable Editable
Numbers Editable Editable
Currency Editable Editable
Date and Time Editable Editable
LookUp Editable Editable
Checkbox Editable Editable
Person and Group Editable Editable
Hyperlink Editable Editable
Hyperlink as Picture Editable Editable
Managed Metadata Editable Editable
Task Outcome Not Editable Not Editable
Calculated Not Editable Not Editable
Content type Not Editable Not Editable