ECMA Script to Display Images as Thumb Nail in CEWP from Picture Library in SharePoint 2010

We can display the images on the web part page in the form of thumbnail by using the client side scripting (ecma). Below is the code to be created in the web part page.

1. Define the table structure as shown below. Define the Div tag with the ID.

<table width="80%" align="center">

        <tbody>

            <tr>

                <td width="100%">

                    <div id="pictureMicroGallery">

                    </div>

                </td>

            </tr>

        </tbody>

    </table>

2. Now write the ECMAS script to get all the images from the picture library & display them in the above Div tag by generating the html code.

<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('Library');

var folderName = 'Folder Path';

//create the query to get all items

//var query = SP.CamlQuery.createAllItemsQuery();

var query = new SP.CamlQuery();

query.set_viewXml("<View Scope=\'RecursiveAll\'><Query><Where><Eq><FieldRef Name='FileDirRef' /><Value Type='Lookup'>" + folderName + "</Value></Eq></Where><OrderBy><FieldRef Name='FileLeafRef' /></OrderBy></Query></View>");

//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) {

//array to store the actual image with its original size

pictureArray = new Array();

//array to store the thumbnail image size

linkpicturearray = new Array();

//array to store preview image size

previewpictureArrey = new Array();

var pictureCount = 0;

var linkpicturecount = 0;

var previewpictureCount = 0;

var enumerator = this.pictures.getEnumerator();

//Get all the images from the library

while (enumerator.moveNext()) {

var currentItem = enumerator.get_current();

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

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

filename += '.jpg';

var linkfilename = filename.replace('_JPG', '');

linkfilename = linkfilename.replace('_jpg', '');

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

previewfilename = dir + '/_w/' + filename;

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

linkfilename = dir + '/' + linkfilename;

pictureArray[pictureCount++] = filename;

linkpicturearray[linkpicturecount++] = linkfilename;

previewpictureArrey[previewpictureCount++] = previewfilename;

}

//create the html source to be shown in the div tag

var newHtml = '';

newHtml += '<ul class="hoverbox">';

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

newHtml += '<li>';

newHtml += '<a target="_blank" href="';

newHtml += this.linkpicturearray[i];

newHtml += '">';

newHtml += '<img alt="description" src="';

newHtml += this.pictureArray[i];

newHtml += '" />';

newHtml += '<img class="preview" alt="description" src="';

newHtml += this.previewpictureArrey[i];

newHtml += '" /></a></li>';

}

newHtml += '</ul>';

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

}

function failed(sender, args) {

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

}

</script>

//css to enlarge the image on mouse hover

<style>

* {

       BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px

}

.hoverbox {

       LIST-STYLE-TYPE: none; CURSOR: default; LIST-STYLE-IMAGE: none

}

.hoverbox A {

       CURSOR: default

}

.hoverbox A .preview {

       DISPLAY: none

}

.hoverbox A:hover .preview {

       Z-INDEX: 1; POSITION: absolute; DISPLAY: block; TOP: -33px; LEFT: -45px

}

.hoverbox IMG {

       BORDER-BOTTOM: #ddd 1px solid; BORDER-LEFT: #bbb 1px solid; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; WIDTH: 100px; PADDING-RIGHT: 2px; BACKGROUND: #fff; HEIGHT: 75px; COLOR: inherit; VERTICAL-ALIGN: top; BORDER-TOP: #aaa 1px solid; BORDER-RIGHT: #ccc 1px solid; PADDING-TOP: 2px

}

.hoverbox LI {

       BORDER-BOTTOM: #aaa 1px solid; POSITION: relative; BORDER-LEFT: #ccc 1px solid; PADDING-BOTTOM: 5px; MARGIN: 3px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; DISPLAY: inline; BACKGROUND: #eee; FLOAT: left; COLOR: inherit; BORDER-TOP: #ddd 1px solid; BORDER-RIGHT: #bbb 1px solid; PADDING-TOP: 5px

}

.hoverbox .preview {

       BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000; WIDTH: 200px; HEIGHT: 150px; BORDER-RIGHT-COLOR: #000; BORDER-LEFT-COLOR: #000

}

</style>