Get Pictures From SharePoint Picture Library and Enlarge on Mouse Hover

A picture library is a type of a Document Library that is dedicated to store digital pictures or graphics. A SharePoint picture library is useful for sharing photos with other people. OOB the picture library provides many features. Whenever you upload an image to a SharePoint Picture Library, SharePoint automatically creates two additional images and stores them in different locations. A small thumbnail it used in views and a preview image it used when you're viewing the picture properties.

The URLs of pictures are as below:

http:/<servername>/<PictureLibraryName>/_w/imageFile
http:/servername/<PictureLibraryName>/ _t/ imageFile

In this article I will explain how to enlarge a picture on a mouse hover.

Use the following procedure to do that:

Step 1: Create a picture library. In my case say MyPicture
Step 2: Upload a few images there

Upload few images

Step 3: Create a Photo.Js file and add the following scripts:

</div>

ExecuteOrDelayUntilScriptLoaded(loadSharePointPictures, 'sp.js');

function loadSharePointPictures() {

//fetch the list of items using the client object model

var context = new SP.ClientContext.get_current();

//get the current website

var web = context.get_web();

//get the pictures list

var list = web.get_lists().getByTitle('MyPictures');

//create the query to get all items

var query = SP.CamlQuery.createAllItemsQuery();

//get all items from the query

pictures = list.getItems(query);

//load the context

context.load(pictures, 'Include(FileLeafRef,FileDirRef)');

//execute the query in async mode

context.executeQueryAsync(

Function.createDelegate(this, this.success),

Function.createDelegate(this, this.failed));

}

function success(sender, args) {

pictureArray = new Array();

var pictureCount = 0;

var enumerator = this.pictures.getEnumerator();

while(enumerator.moveNext()) {

var currentItem = enumerator.get_current();

var filename = currentItem.get_item('FileLeafRef');

filename = filename.replace('.', '_');

filename += '.jpg';

var dir = currentItem.get_item('FileDirRef');

filename = dir + '/_t/' + filename;

pictureArray[pictureCount++] = filename;

}

var newHtml = '';

for(i=0; i<this.pictureArray.length; i++) {

newHtml += '<img class="pictureGallery" src="';

newHtml += this.pictureArray[i];

newHtml += '" style="margin:4px;"/>';

}

$('#pictureMicroGallery').html(newHtml);

$('img.pictureGallery').thumbPopup({

imgSmallFlag: '_t',

imgLargeFlag: '_w',

cursorTopOffset: 5,

cursorLeftOffset: 5,

});

}

function failed(sender, args) {

$('#pictureMicroGallery').html(args.get_message());

}

</script>

Step 4: Create a Document Library and upload the "jquery.thumbhover.js","jquery-1.4.2.min.js" and "Photos.Js" script files.

Step 5: Create a page in a SitePage Library (say, PictureViewer).
Step 6: Add content Editor WebPart to that page.

Step 7: Edit the WebPart and add the path of Photos.Js in TextEditor.

Step 8: The Page will display the images thumbnail as below:

Step 9: Hover the Mouse over the each image, you will find the enlarged image of the stored image.

Conclusion

In this article I explained how to open a popup on mouse hover over the images, stored in the SharePoint Picture Library.