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



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

<script type="text/javascript" src="/Scripts/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="/Scripts/jquery.thumbhover.js"></script>

    <div id="pictureMicroGallery">

        Loading...

    </div>

 <script>

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.