Please i need help with my script,I want my page to generate thumbnails directly being read from a share point list, below is the already existing code :

    <script type="text/javascript">

          var doc_lib = "HrOne Document Library";
          var doc_name = "Name";
          var doc_office = "Office";
          var doc_type = "Type";
          var doc_title = "Title"; // Name of the list that contains slides
          var department = "Created By"; //Name of the Rich text field that has slide content

     function doc_thumb(doc_lib,doc_name,doc_type,doc_title,department) {
         //query to retrieve all items
         var query = "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Number'></Value></Neq></Where></Query>";
         //return fields for slide content and background picture
         var camlViewFields = "<ViewFields><FieldRef Name='"+doc_name+"' /><FieldRef Name='"+doc_type+"' /><FieldRef 

Name='"+doc_title+"' /><FieldRef Name='"+department+"' /></ViewFields>";
              operation: "GetListItems",
              async: true,
              listName: doc_lib,
              CAMLViewFields: camlViewFields,
              CAMLQuery: query,
              completefunc:function(xData, Status) {
                   $(xData.responseXML).SPFilterNode("z:row").each(function() {
                   var name = ($(this).attr("ows_"+doc_name));
                    var type = ($(this).attr("ows_"+doc_type));
                   var title =($(this).attr("ows_"+doc_title));
                   var url = $(this).attr("ows_EncodedAbsUrl") + "";
                   var li_thumb = " <li> <article class="portfolio-item pf-documents">
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="/sites/cbn/SiteAssets/images/portfolio/4/5.jpg" alt="Console Activity"/>
                                &nbsp;&nbsp;<div class="portfolio-overlay">
                                    <a href="/sites/cbn/SiteAssets/images/portfolio/full/5.jpg" class="left-icon" data-

lightbox="image"><i class="icon-line-plus"></i></a>
                                    <a href="portfolio-single.html" class="right-icon"><i class="icon-line-ellipsis"></i></a>
                             <div class="portfolio-desc">
                                <h3><a href="portfolio-single.html">"+name+"</a></h3>
                                <span><a href="#">Documents</a>  <a href="#">"+creator+"</a></span>
                        </article></li> ";

 var creator=$(this).attr("ows_"+department)==undefined?"":$(this).attr("ows_"+department).split(",")[0];

                   //create slide (li) and append it to other slides
              }); // end completefunc
              //start the slider

         }); // end SPServices call


I just want other eyes to point out what im doing wrong so i can correct it.

Here is the html code it appends to :

<div  class="col_two_third portfolio-single-image nobottommargin col_last">
                    <ul id="generate">



I want the script to append the article in the html code from a SharePoint document library, but it is not working at all. so i just feel like i'm doing something wrong.

  • 2
    Have you checked the console (F12) for errors after running this? That is always a good place to start when JS code isn't working.
    – Akhoy
    Commented Aug 25, 2015 at 7:14

1 Answer 1


I would suggest to use a simple IDE to develop your code. This IDE will help you by finding simple errors. A free example for a IDE is Visual Studio Code but there are loads of IDE's for you to choose.

Here's the output if I paste your code: enter image description here

After knowing the simple errors fixing is not the problem - at least the ones caused by bad syntax.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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