0

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);
0

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");
        });
        }
  • I have used the above code and the o/p which I got is in a vertical manner all the images are displayed instead of getting a slide show. – Bibhudutta Bhanja Aug 9 '18 at 10:49
  • did you tried my code ? i am using the same code it is working fine for me, or else you can use OOTB Picture library slideshow webpart (media and content ). – karthik Aug 9 '18 at 14:52
  • Yes it is showing any errors when I am debugging using the browser it shows me this error Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID and all images are coming in an vertical manner. – Bibhudutta Bhanja Aug 12 '18 at 11:12
  • try in different browser or clear the cache of browser and try again, and can you post the screen of that – karthik Aug 14 '18 at 13:19
0

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>

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.