0

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: enter image description here

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>";

  • It displays all images in Vertical not in the Table format.Also my image Title is also displayed vertically.If i have 8 images it displays only 5 in the table . But i wan't to display 5 in the First row, and 3 in the second row along with the image Title. – santosh kondapalli Mar 3 '15 at 14:43
  • Can you share the value of txtHTML after the for loop has completed. – Submits Mar 3 '15 at 14:50
  • I see where the bug is and have amended the code. Try again. – Submits Mar 3 '15 at 15:17
  • It is Too long so i have edited in my orginal Post – santosh kondapalli Mar 3 '15 at 15:44
  • Yes You are correct :-). I have changed that and thanks it is working. But Why it is displaying one image in the First Row. and then 4 in one <TD>. How should i display first rows 3 , next row 3 , – santosh kondapalli Mar 3 '15 at 15:46
1

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>

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.