Display Images from sharepoint library in table

Question

The below code displays the images in the image library Horizontally. But i want to display the first 5 images from my array in the table format. I have attached the output below. Can you please help me

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>

            <script type="text/javascript" language="javascript">
                var _clientContext;
                var _web;
                ExecuteOrDelayUntilScriptLoaded(RetrieveListItems, "sp.js");
                function RetrieveListItems() {
                    _clientContext = new SP.ClientContext.get_current();
                    _web = _clientContext.get_web();
                    var list = _web.get_lists().getByTitle('ImageLibrary');
                    var myquery = new SP.CamlQuery.createAllItemsQuery();
                    allItems = list.getItems(myquery);
                    _clientContext.load(allItems);
                    _clientContext.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
                }

                function success() 
{
                    var Image = null;
                    var Linkurl = null;
                    var Title = null;
                    pictureArray = new Array();
                    var pictureCount = 0;                   
                    var txtHTML = "";
                    var ListEnumerator = this.allItems.getEnumerator();
                    while (ListEnumerator.moveNext()) 
                    {
                        var currentItem = ListEnumerator.get_current();                     
                         var filename = currentItem.get_item('FileLeafRef');
                        //alert(filename);
                            filename = filename.replace('.', '_');
                            filename += '.jpg';
                            var dir = currentItem.get_item('FileDirRef');
                            filename = dir + '/_t/' + filename;
                            pictureArray[pictureCount++] = filename;                    
                    }                                                  
                        //Title = currentItem.get_item('Title');
                        var row = document.createElement("tr");
                        txtHTML += "<tr>";
                        for(i=0; i<this.pictureArray.length; i++) 
                         {
                             //alert(this.pictureArray[i]);
                             var fgh='http://google.com';
                             var res = this.pictureArray[i].split("/_t/");
                             var fin=res[1].split("_JPG.jpg");                            
                             txtHTML += "</td>";                       
                             txtHTML += "<a href='"+ fgh +"'><image border='none' src='" + this.pictureArray[i] + "'></Image></a>" + "</br>" +fin[0]                              
                             txtHTML +="</td>";

                         }
                       txtHTML +="</tr>";


                    $("#tblCustomListData").append(txtHTML);                    
                }
                function failed(sender, args) {
                    alert("failed Message" + args.gte_message());
                }
            </script>


            <table id="tblCustomListData" border="0">
                <thead>
                    <tr>


                    </tr>
                </thead>
            </table>

Output Image:

Answer 1

This isn't the most elegant solution, so feel free to tweak:

var row = document.createElement("tr");
var j = 0;
for(i=0; i<this.pictureArray.length; i++) 
{
    //alert(this.pictureArray[i]);
    if (j == 0)
        txtHTML += "<tr>";

    var fgh='http://google.com';
    var res = this.pictureArray[i].split("/_t/");
    var fin=res[1].split("_JPG.jpg");                            
    txtHTML += "<td>";                       
    txtHTML += "<a href='"+ fgh +"'><image border='none' src='" + this.pictureArray[i] + "'></Image></a>" + "</br>" +fin[0]                              
    txtHTML +="</td>";

    j++;
    if (j == 5)
    {
        txtHTML += "</tr>";
        j = 0;
    }
}
$("#tblCustomListData").append(txtHTML);

Also, I made a correction where I think you made a mistake in your HTML: txtHTML += "</td>"; should be txtHTML += "<td>";

Answer 2

Thanks to Submits help for achieving my scenario. Here is the complete solution for the same. It will read the Image and Title from a library and when you click on it you can redirect to another page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
<script type="text/javascript" language="javascript">
    var _clientContext;
    var _web;
    ExecuteOrDelayUntilScriptLoaded(RetrieveListItems, "sp.js");
    function RetrieveListItems() 
             {
                    _clientContext = new SP.ClientContext.get_current();
                    _web = _clientContext.get_web();
                    var list = _web.get_lists().getByTitle('ImageLibrary');
                    var myquery = new SP.CamlQuery.createAllItemsQuery();
                    allItems = list.getItems(myquery);
                    _clientContext.load(allItems);
                    _clientContext.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this,                                                         this.failed));
                }
                function success() 
                {
                            var Image = null;
                            var Linkurl = null;
                            var Title = null;
                            pictureArray = new Array();
                            TitleArray=new Array();
                            var TitleCount=0;
                            var pictureCount = 0;                   
                            var txtHTML = "";
                            var ListEnumerator = this.allItems.getEnumerator();
                            while (ListEnumerator.moveNext()) 
                            {
                                     var currentItem = ListEnumerator.get_current();                        
                                     var filename = currentItem.get_item('FileLeafRef');
                                     filename = filename.replace('.', '_');
                                     filename += '.jpg';
                                     var dir = currentItem.get_item('FileDirRef');
                                     filename = dir + '/_t/' + filename;
                                     pictureArray[pictureCount++] = filename;  
                                    Title = currentItem.get_item('Title');
                                    TitleArray[TitleCount++] = Title;
                            }

                                   var result = [];
                                    for(var i=0;i<pictureArray.length;i++)
                                    {
                                       result.push([pictureArray[i],TitleArray[i]]);
                                    }                                                      
                            var row = document.createElement("tr");
                            var j = 0;
                            for(i=0; i<result.length; i++) 
                        {
                            //alert(this.pictureArray[i]);
                                if (j == 0)
                                txtHTML += "<tr>";                                                       
                            var ImageUrl=result[i][0]; 
                            var ImageTitle=result[i][1];
                            var RedirectUrl= SP.ClientContext.get_current().get_url() +"/Myactivites.aspx?@ImageTitle="+ImageTitle;
                            txtHTML += "<td>";                       
                            txtHTML += "<a href='"+ RedirectUrl +"'><image border='none' src='" + ImageUrl + "'></Image></a>" + "</br>" +ImageTitle
                                txtHTML +="</td>";

                                j++;
                                if (j == 3)
                                {
                                    txtHTML += "</tr>";
                                    j = 0;
                                }
                         }
                            $("#tblCustomListData").append(txtHTML);
                    //redirect();               
                }

                function failed(sender, args) {
                    alert("failed Message" + args.gte_message());
                }
            </script>


            <table id="tblCustomListData" border="0">
                <thead>
                    <tr>                                                
                    </tr>
                </thead>
            </table>