Code Play and Learn

Display and slide picture From Picture Library in Content Editor webpart using CSOM in 2010/13

Advertisements

Hi,

Today,I am going to Explain you here How to Display and slide picture From Picture Library in Content Editor webpart using CSOM

this is simple task Just Follow below step you will get the output

Below is Code for your JS or txt File

<div style="position: relative" id="imgCntr" paddingLeft="5px" peddingRight="5px">

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(loadSlideImages, "sp.js");
//Recommended to define this fun First 

function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = frontPictureItems.getEnumerator();
var listItems = '';
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
listItems += '<img src="http://sp:1000/student/iin/MySlider1/' + oListItem.get_displayName() + '.jpg" style="position:absolute" height="300px" width="900px"/>';
}

$('#imgCntr').html(listItems);
initSlider();
}

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());
}

function initSlider() {
$('#imgCntr img:gt(0)').hide();
setInterval(function(){$('#imgCntr :first-child').fadeOut().next('img').fadeIn().end().appendTo('#imgCntr');}, 6000);
}

var siteUrl='http://sp:1000/student/iin';
//i have taken static URL here you can used Absolute URL as well

function loadSlideImages() {
var clientContext = new SP.ClientContext(siteUrl); 
var oList = clientContext.get_web().get_lists().getByTitle('MySlider');//get PicLibrary

var camlQuery = SP.CamlQuery.createAllItemsQuery();
//you can use caml syntax to get desire result i have Just take all field
   		
this.frontPictureItems = oList.getItems(camlQuery);
clientContext.load(frontPictureItems, 'Include(Id,DisplayName,FileLeafRef,FileDirRef)');
//load neccessary Field to load image

clientContext.executeQueryAsync(
 Function.createDelegate(this, this.onQuerySucceeded),
 Function.createDelegate(this, this.onQueryFailed));
}

</script>

now Run your site…. wow your CEWP Image slider is ready

Happy Coding

Thanks
SPS

Advertisements