Displaying Images in Slider when clicking on Folder using Ecma Script Client Object Model

ExecuteOrDelayUntilScriptLoaded(getRoostImages, "sp.js");


var imagesCollection;
var imagecurrentcontext;
var folderURL='';
var listimages;
var listimageRoot;



function loadRootFolderDocumentContents()
{
    getRoostImages();
    //document.getElementById('folderlink').style.display = 'none';
    //document.getElementById('spliter').style.display = 'none';
    //document.getElementById('rootfolderlink').style.display = 'none';
    document.getElementById('ImagesFolder').style.display = 'none';

}


function loadDocsFolderContents(folderServerRelativeUrl)
{  
    //alert(folderServerRelativeUrl);
    var folderStrcut='';
  
    //Split by comma
    var hashes = folderServerRelativeUrl.split('/');

    if (typeof (hashes) != 'undefined' && hashes != null) {
  
        folderStrcut="<a id ='rootfolderlink' style=\"cursor:pointer;\" onclick=\"loadRootFolderDocumentContents();\"   title='MCF Image Gallery' >MCF Image Gallery</a>" ;
      
        //loop all folders, start from 7 to eliminate /sites/roost/Projects Home/projects_1320/Project Documents/Folder 1
        for (var i = 4; i < hashes.length; i++) {
            var folderName = hashes[i];
            var folderFullURLSplit=folderServerRelativeUrl.split(folderName);
            var folderFullURL=folderFullURLSplit[0] + folderName;

            folderStrcut=folderStrcut + " <span id='spliter'> > </span><a id='folderlink' style=\"cursor:pointer;\" onclick=\"loadDocsFolderContents('" + folderFullURL + "');\"   title='" + folderName + "'>" + folderName+ "</a>" ;
        }
    }
  
    //document.getElementById('folderlink').style.display = 'block';
    //document.getElementById('spliter').style.display = 'block';
    //document.getElementById('rootfolderlink').style.display = 'block';
    document.getElementById('ImagesFolder').style.display = 'block';

    document.getElementById("ImagesFolder").innerHTML = folderStrcut;
  
   var imagecurrentcontext = new SP.ClientContext.get_current();
    //var siteUrl = 'https://mcf1.sharepoint.com/sites/roost';
    //var imagecurrentcontext = new SP.ClientContext(siteUrl);
    listimages = imagecurrentcontext.get_web().get_lists().getByTitle('images');
    listimageRoot = listimages.get_rootFolder();
     
    var imagefoldercamlQuery = new SP.CamlQuery();
  
    var imagefolderspQuery= "<View Scope=\"RecursiveAll\"> " +
                    "<Query>" +
                    "<Where>" +
                                "<Eq>" +
                                    "<FieldRef Name=\"FileDirRef\" />" +
                                    "<Value Type=\"Text\">" + folderServerRelativeUrl + "</Value>" +
                                 "</Eq>" +
                    "</Where>" +
                    "</Query>" +
                    "</View>";
  
    //get list item by project ID
    imagefoldercamlQuery.set_viewXml(imagefolderspQuery);

    imagesCollection= listimages.getItems(imagefoldercamlQuery);
  
    imagecurrentcontext.load(listimages, 'Title', 'Id');
    imagecurrentcontext.load(listimageRoot);
    imagecurrentcontext.load(imagesCollection, 'Include(FileLeafRef,FileDirRef,FSObjType,FileRef,Title)');
    imagecurrentcontext.executeQueryAsync(Function.createDelegate(this, getRoostImagesandFolderResult), Function.createDelegate(this, oncListQueryFailed));
}


function getRoostImages() {
  
    //document.getElementById("ImagesFolder").innerHTML = '';
    //document.getElementById("Imagetabs-1").style.display = 'block';

    //load site
    //var siteUrl = 'https://mcf1.sharepoint.com/sites/roost';
    //var imagecurrentcontext = new SP.ClientContext(siteUrl);

    imagecurrentcontext = new SP.ClientContext.get_current();
    listimages= imagecurrentcontext.get_web().get_lists().getByTitle('images');
       listimageRoot = listimages.get_rootFolder();
     
    var imagescamlQuery = new SP.CamlQuery();

    //get list item by project ID
    imagescamlQuery.set_viewXml('<View><OrderBy><FieldRef Name=\'FSObjType\' Ascending=\'FALSE\' /></OrderBy></View>');

    imagesCollection = listimages.getItems(imagescamlQuery);
  
    imagecurrentcontext.load(listimages, 'Title', 'Id');
    imagecurrentcontext.load(listimageRoot);
    imagecurrentcontext.load(imagesCollection, 'Include(FileLeafRef,FileDirRef,FSObjType,FileRef,Title)');
    imagecurrentcontext.executeQueryAsync(Function.createDelegate(this, getRoostImagesResult), Function.createDelegate(this, oncListQueryFailed));
}

function getRoostImagesResult() {

  
    var count =0;
    var URL = '';
    var listID = listimages.get_id();
    var listURL = listimageRoot.get_serverRelativeUrl();
  
    //Split by comma
    var hashes = listURL.split('Project_Documents');

    var listItemEnumerator = imagesCollection.getEnumerator();
    var html = "";
    var imageHtml ="";
    //alert();
  
    html = html + "<table id='tblAllImages' border='0' cellspacing ='0' cellpadding='0'>";
    html = html + "<thead>"
    html = html + "<tr><th>FileName</th></tr>";
    html = html + "</thead>";
    html = html + "<tbody>";
  
    imageHtml = imageHtml +"<div id='wrapper' class='jcarousel-wrapper'><div class='jcarousel'><ul class='clearfix'>";
    //loop the items
    while (listItemEnumerator.moveNext()) {

        //current item
        this.oListItem = listItemEnumerator.get_current();

        //get item details
        var itemOpenURL;
        var itemViewPropertiesURL;
        var fileName = oListItem.get_item('FileLeafRef');
        var FSObjType=oListItem.get_item('FSObjType');
        var fileURL = oListItem.get_item('FileRef');
        var FileName = fileName.substring(0, fileName.length - 4);
        var title = oListItem.get_item('Title');
        //var count = oListItem.get_itemCount();
        //alert(count);
      
        var fileExt = fileName.split('.').pop();
        var fileImageURL;
     
        if(FSObjType=='0')
        {

                //count = count + 1;
              
                  //imageHtml = imageHtml +"<li><a onclick=\"PopUp('" + fileURL + "');\"><img src='"+fileURL +"' width='230' height='230' /></a></li>";  
                  imageHtml = imageHtml +"<li><a href='" + fileURL + "' data-lightbox='image-1' title='"+title+"'><img src='"+fileURL +"' width='200' height='200' /></a></li>";
                  //imageHtml = imageHtml +"<li><a href='" + fileURL + "' rel='thumbnail' title='This is beautiful castle for sale!'><img src='"+fileURL +"' width='230' height='230' /></a></li>";      
                
        }
      
        //SP folder
        if(FSObjType=='1')
        {
            //alert(count);
            count = count + 1;
            //alert(count);

            if(count==1)
            {
                URL = fileURL;
            }
            //fileImageURL='/_layouts/15/images/folder.gif?rev=23';
            //html = html + "<tr><td style='text-align:center;'><img src='" + fileImageURL + "' / ></td>";
            html = html + "<tr><td><div style=\"cursor:pointer;width:100%\" onclick=\"loadDocsFolderContents('" + fileURL + "');\"   title='" + FileName + "'>" + fileName+ "</div></td>";      
        }
        else
        {      
            //if( fileExt == "pdf" ){  
            //    fileImageURL = "/_layouts/Images/IC" + fileExt + ".png";
        //    }
        //    else if(fileExt == 'onetoc2'){              
        //        fileImageURL = "/_layouts/Images/ICone.gif";
        //    }
        //    else {  
        //        fileImageURL = "/_layouts/Images/IC" + fileExt + ".gif";
            //    }
          
            //do not want to see .one files.....the actual One NoteBook is .onetoc2
            ///if(fileExt != 'one') 
            //{                  
                //fileImageURL = "/_layouts/Images/IC" + fileExt + ".gif";
        //        html = html + "<tr><td style='text-align:center;'><img src='" + fileImageURL + "' / ></td>";
        //        html = html + "<tr><td><a target='_blank'  href='" + fileURL + "' title='" + fileName + "'>" + FileName+ "</a></td>";
        //    }
        }     
    }

    html = html + "</table>";
          
            imageHtml = imageHtml + "</ul>";
            imageHtml = imageHtml + "</div>";
            imageHtml = imageHtml + "<a href='#' class='jcarousel-control-prev'><</a><a href='#' class='jcarousel-control-next'>></a><p class='jcarousel-pagination'></p></div>";

    document.getElementById("Imagetabs-1").innerHTML = html;
    document.getElementById("Imageslider").innerHTML = imageHtml;
    $('.jcarousel').jcarousel({
    });
  
    $('.jcarousel-control-prev').jcarouselControl({
       target: '-=1'
   });
 
   $('.jcarousel-control-next').jcarouselControl({
        target: '+=1'
    });

    $('.jcarousel-pagination').jcarouselPagination({
    'carousel': $('.jcarousel'),
        item: function(page,carouselItems) {
            return '<a href="#' + page + '">' + page + '</a>';
        }
        });

    tableToGrid('#tblAllImages',
                        { //colNames: ['Type', 'File Name'],
                            //colModel: [
                        //{ name: 'Type', index: 'Type' , width:40 },
                        //{ name: 'FileName', index: 'FileName', width:100  },
                        //{name: 'Modified', index: 'Modified', width: 190  },
                        //{ name: '', width:100  }
                                    //],
                            width:  '100%',
                            height: 230,
                            caption: '',
                           // pager: '#tblAllImagesPager',
                            //rowNum: 8,
                            ignoreCase: true,
                            paging: true,
                            altRows: true,
                            altclass:'myAltRowClass',
                            emptyrecords: "No Documents",
                            viewrecords: true,
                            loadonce: true
                        });
  
    $("#tblAllImagesPager").css("width", 474);

    //Search
   // $("#tblAllImages").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });

    //For paging
    //$("#tblAllImages").jqGrid('setGridParam', {page: 1}).trigger("reloadGrid");
    //loadDocsFolderContents(\'" + URL + "\')
  
    //ExecuteOrDelayUntilScriptLoaded(loadDocsFolderContents(URL), "sp.js");

}



function getRoostImagesandFolderResult() {
        var listURL = listimageRoot.get_serverRelativeUrl();

    var listItemEnumerator = imagesCollection.getEnumerator();
    var html = "";
    var imageHtml ="";
    html = html + "<table id='tblAllDocs' border='0' cellspacing ='0' cellpadding='0'>";
    html = html + "<thead><tr><th>FileName</th></tr></thead><tbody>";

    imageHtml = imageHtml +"<div id='wrapper' class='jcarousel-wrapper'><div class='jcarousel'><ul class='clearfix'>";
                      
  
    //loop the items
    while (listItemEnumerator.moveNext()) {

        //current item
        this.oListItem = listItemEnumerator.get_current();

        //get item details
        var fileURL = oListItem.get_item('FileRef');
        var fileName = oListItem.get_item('FileLeafRef');
        var FSObjType=oListItem.get_item('FSObjType');
        var FileName = fileName.substring(0, fileName.length - 4);
        var title = oListItem.get_item('Title');
      
      
        var fileExt = fileName.split('.').pop();
        var fileImageURL;
      
        if(FSObjType=='0')
        {

        //imageHtml = imageHtml +"<li><img src='"+fileURL +"' width='230' height='230' alt=''></li>";
        imageHtml = imageHtml +"<li><a href='" + fileURL + "' data-lightbox='image-1' title='"+title+"'><img src='"+fileURL +"' width='200' height='200' /></a></li>";
        }  

        //SP folder
        if(FSObjType=='1')
        {
            //fileImageURL='/_layouts/15/images/folder.gif?rev=23';
            //html = html + "<tr><td style='text-align:center;'><img src='" + fileImageURL + "' / ></td>";
            html = html + "<tr><td><div style=\"cursor:pointer;width:100%\" onclick=\"loadDocsFolderContents('" + fileURL + "');\"   title='" + FileName + "'>" + fileName+ "</div></td>";      
        }
        //else
        //{      
        //    if( fileExt == "pdf" ){  
        //        fileImageURL = "/_layouts/Images/IC" + fileExt + ".png";
        //    }
        //    else if(fileExt == 'onetoc2'){              
        //        fileImageURL = "/_layouts/Images/ICone.gif";
        //    }
        //    else {  
        //        fileImageURL = "/_layouts/Images/IC" + fileExt + ".gif";
            //    }
          
            //do not want to see .one files.....the actual One NoteBook is .onetoc2
            //if(fileExt != 'one') 
            //{                  
                //fileImageURL = "/_layouts/Images/IC" + fileExt + ".gif";
            //    html = html + "<tr><td style='text-align:center;'><img src='" + fileImageURL + "' / ></td>";
            //    html = html + "<td><a target='_blank'  href='" + fileURL + "' title='" + fileName + "'>" + FileName+ "</a></td>";
            //}
        //}     
    }

    html = html + "</tbody></table>";
    
    
      imageHtml = imageHtml +"</ul></div>";
      imageHtml = imageHtml + "<a href='#' class='jcarousel-control-prev'><</a><a href='#' class='jcarousel-control-next'>></a><p class='jcarousel-pagination'></p></div>";              
  
    document.getElementById("Imagetabs-1").innerHTML = html;
    document.getElementById("Imageslider").innerHTML = imageHtml;
    $('.jcarousel').jcarousel({
    });
    $('.jcarousel-control-prev').jcarouselControl({
       target: '-=1'
   });
 
   $('.jcarousel-control-next').jcarouselControl({
        target: '+=1'
    });
  

    $('.jcarousel-pagination').jcarouselPagination({
    'carousel': $('.jcarousel'),
        item: function(page,carouselItems) {
            return '<a href="#' + page + '">' + page + '</a>';
        }
        });




    tableToGrid('#tblAllDocs',
                        { //colNames: ['Type', 'File Name'],
                            //colModel: [
                        //{ name: 'Type', index: 'Type' , width:40 },
                        //{ name: 'FileName', index: 'FileName', width:100  },
                        //{name: 'Modified', index: 'Modified', width: 190  },
                        //{ name: '', width:100  }
                        //            ],
                            width:  '100%',
                            height: 230,
                            caption: '',
                            //pager: '#tblAllDocsPager',
                            //rowNum: 8,
                            ignoreCase: true,
                            paging: true,
                            altRows: true,
                            altclass:'myAltRowClass',
                            emptyrecords: "No Documents",
                            viewrecords: true,
                            loadonce: true
                        });
  
    $("#tblAllDocsPager").css("width", 474);

    //Search
    //$("#tblAllDocs").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });

    //For paging
    $("#tblAllDocs").jqGrid('setGridParam', {page: 1}).trigger("reloadGrid");

}

function PopUp(pPage) {
window.open(pPage,'popWin','resizable=yes,scrollbars=yes,width=880,height=880,toolbar=no');
}