Making an Image Gallery from the Asset Library: Part 2

This post is over a year old, some of this information may be out of date.

In the previous part I showed you how to manipulate the Asset Library Thumbnail view, so that it could be used as image gallery. In this part I will do a small update to the code, so that the first image will be used for the gallery.

Adding gallery images

In the first part I created a gallery section which looked like this:

What I want to do is change the default image to the first image of that folder/gallery. To do this, I will make use of the SharePoint REST service and an Ajax call.

Step 1

The first step is to retrieving the first image of our folder.

http://sp2010/_vti_bin/ListData.svc/Assets()?$filter=substringof(‘Gallery-Name’,Path)&$top=1

Step2

Creating a new JavaScript function that will be used to do the Ajax call for each gallery.

1
function GetFirstImage(elm, gallery) {
2
  // Check if the current context is not null
3
  // ctx can be used, because the object is created by the asset library view
4
  if (ctx != null) {
5
    // Create the list data url to retrieve the first image
6
    var listDataURL = ctx.HttpRoot + "/_vti_bin/ListData.svc"+ctx.listUrlDir+"()?$filter=substringof('"+gallery+"',Path)&$select=Name,Path&$top=1";
7
    jQuery.ajax({
8
      url: listDataURL,
9
      dataType: "json",
10
      success: function(data) {
11
        // Check if you retrieved an image
12
        if (data.d[0] != undefined) {
13
          // Update the current element with the image url
14
          elm.find('img').attr('src', data.d[0].__metadata.media_src);
15
        }
16
      }
17
    });
18
  }
19
}

Step 3

Now that the JavaScript function is created, the function call can be added to the each loop when creating the galleries.

1
// Show the picture galleries
2
jQuery('#pickerimages .ms-assetpicker-tiled-mediumprops a[onmousedown]').each(function() {
3
  var elm = jQuery(this);
4
  var gallery = elm.text();
5
  jQuery("#galleries").append(elm.html("![Gallery](/_layouts/images/ImagePreviewHH.PNG)<span>"+gallery+"</span>"));
6

7
  // Adding the first image as gallery image
8
  GetFirstImage(elm, gallery);
9
});

Result

The end result looks like this:

Event has still the default image, this is because there are no pictures added to this folder/gallery.

Making an Image Gallery from the Asset Library: Part 2

Adding gallery images

Step 1

Step2

Step 3

Result

Related articles

Making an Image Gallery Inside the Asset Library: Part 1

List Of All font-family and font-size Attributes Used in SharePoint 2010 StyleSheets

Fix: Search Box Suggestions Layout Problem When Used Outside a Search Center

Report issues or make changes on GitHub

Comments

Elio Struyf