get items from a image library and bind using foreach loop with multiple HTML image ID using JSOM
-
21-01-2021 - |
Question
I am trying to create an image slider using JQuery where I am facing difficulty to bind multiple images to HTML labels. As I have already used in while loop how to use this using for each loop to retrieve. I am retrieving items using below code how can I retrieve images from the picture library using foreach loop, not by while loop. How to convert this code to foreach loop.
function onquarrySucceess(sender, args) { var listItemEn = ClevertoollistItems.getEnumerator(); var internalLinks = "";
while (listItemEn.moveNext()) {
var objListItem = listItemEn.get_current();
var urlItemId = "https://onlysharepoint2013.sharepoint.com/sites/Raju/Lists/CleverTools/DispForm.aspx?ID=" + objListItem.get_item('ID');
internalLinks += "<tr><td><a class=\'Title\' href='" + urlItemId + "'>" + objListItem.get_item('Title')+ "</td></tr>";
}
internalLinks += "</table>";
$("#Clevertool").html(internalLinks);
Solution
try this code :
html:
<div class="row">
<div id="divHomePageBanner">
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
</div>
</div>
</div>
</div>
JS:
$(document).ready(function(){
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', BindLinks);
});
function BindLinks()
{
var context= new SP.ClientContext(_spPageContextInfo.siteAbsoluteUrl);
var Lists_BannersManagement= context.get_web().get_lists().getByTitle('Banners');
GetAnnouncementItems(context, Lists_BannersManagement);
}
function GetAnnouncementItems(context, Lists_NMenuList) {
var camlQuery = new SP.CamlQuery();
var count=0;
camlQuery.set_viewXml("<View><Query><OrderBy><FieldRef Name='Modified' Ascending='FALSE'/></OrderBy></Query></View>");
var AnnouncementcollListItem = Lists_NMenuList.getItems(camlQuery);
context.load(AnnouncementcollListItem);
context.executeQueryAsync(function(){
var htmlString = "";
var listItemInfo = '';
var listItemEnumerator = AnnouncementcollListItem.getEnumerator();
htmlString += '<div class="carousel-inner" role="listbox">';
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var Title = oListItem.get_item('Title');
var ImageforCarousel = oListItem.get_item('FileRef');
if(count==0){
htmlString += '<div class="item active">';
htmlString += '<img alt="image" src='+ImageforCarousel+'></div>';
count++;
}
else{
htmlString += '<div class="item">';
htmlString += '<img alt="image" src='+ImageforCarousel+'></div>';
}
}
htmlString += '</div>';
htmlString += '<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">';
htmlString += '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>';
htmlString += '<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">';
htmlString += '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>';
$('#myCarousel').html(htmlString);
},function(){
console.log("Inside Failure");
});
}
OTHER TIPS
If you are using SharePoint 2013 or above version, you could use Rest API to achieve the same:
<script type="text/javascript" >
function LoadImages(){
$.ajax({
url: _spPageContextInfo.webServerRelativeUrl +
"/_api/web/lists/getByTitle('Pictures')/Items?$select=Title,FileLeafRef,FileDirRef,Description" ,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: this.success,
error: this.failed
}
);
}
function success(data, args) {
var pictureArray = new Array();
var pictureCount = 0;
var results = data.d.results;
console.log(results);
for(var i=0; i<results.length; i++) {
var filename = results[i].FileLeafRef ;
filename = filename.substr(0, filename.lastIndexOf("."))+"_"+ filename.substr(filename.lastIndexOf(".")+1 )+".jpg";
var dir = results[i].FileDirRef ;
filename = dir + '/_w/' + filename;
pictureArray[pictureCount++] = filename;
}
var newHtml = '';
console.log(pictureArray);
for(i=0; i<pictureArray.length; i++) {
newHtml += '<img class="pictureGallery" src="';
newHtml += pictureArray[i];
newHtml += '" style="margin:4px;"/>';
}
$('#pictureMicroGallery').html(newHtml);
}
function failed(sender, args) {
$('#pictureMicroGallery').html(args.get_message());
}
$(document).ready( function () {
LoadImages();
});
</script>
<div id="pictureMicroGallery"></div>
Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange