Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# CSS Ajax jQuery
Trying to figure out how to display thumbnails in a horizontal line or vertical line
I am work with ajax c# jquery and css. I create the following div:
 
 <div class="ThumbNailNav">
       <div id="thumbimg">
       </div>
       </div>
 
CSS code:
.ThumbNailNav 
       {
       position:relative; width:700px; height:500px; margin:0px auto 0 auto; border:5px solid #fff; background:#bbb; padding:0; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
       overflow:scroll;
       display:none;
       overflow-x:hidden;
        }
        #thumbimg 
        {
            position:absolute;  
        }
        
        #tblThumbs
        {
            position:relative; height:100%; margin:0; left:0; top:0; display:inline-block; display:inline; 
        }
        
        #tblThumbs a{display:block; float:left; border:5px solid #ddd; margin:6px 10px 6px 0; background:#fff; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
 
My jquery code is this:
 $("#ThumbNails").bind("tap", function (html) {
                lastShown = CurrentPage;
                PopulateThumbsEx(BookID, lastShown);
                $("#book").fadeOut("fast");
                $(".ThumbNailNav").fadeIn(500);
                $("#thumbimg").append(html).prepend(thumbnails);
                $("#thumbimg").fadeIn(1000);
 

            });
 
My ajax code is this:
 
function PopulateThumbsEx(BookID, lastShown) {
            var tag = $("<div></div>");
            $.ajax({
                type: "POST", // AJAX type post
                url: "tabletbook.aspx/GetThumbNailPage",
                data: '{"BookID": "' + BookID + '",  "lastShown": "' + lastShown + '"}',
                contentType: "application/json; charset=utf-8", //This is required or you will get all sorts of strange things :-)
                dataType: "json", //We need to specifiy JSON as to have the AJAX serilize the data between Client and server 
                success: function (data) { // The msg that comes back has in it the d attribute which in this case contains an array from the server
                    thumbnails = data.d; //Lets copy the links to a global array this gets set by the odd guy. andthen the even comes in right after and sets it
                    // so when the odd goes to render the global has the even values in it. hard to debug because you are introducing pauesse that won't exist normally ok.
                    //tag.html(data).dialog({ modal: true }).mobile.changePage('#ThumbNailNavDialog');
                   
                }
            });
        }
 
 
and my web method C# code is this:
   //Load the thumbnails.
        [WebMethod(true)]
        public static string GetThumbNailPage(int BookID, int lastShown)
        {
            BookDC bdc = new BookDC();
            FlipBook book = bdc.GetBook(BookID);
            string s = book.ClientID.ToString();
 
            //Lets get a list to the thumbnail files
            List<string> tnFiles = Common.helpers.ExtractImagesFromFolder(HttpContext.Current.Server.MapPath("~/Clients/" + s + "/" + BookID.ToString() + "/Thumbs"));
            StringBuilder sb = new StringBuilder();
            string[] fileList = tnFiles.ToArray();
            Array.Sort(fileList, new Common.NaturalComparer());
            tnFiles.Clear();
            tnFiles.AddRange(fileList);
            sb.AppendLine("<ul style='margin-removedauto;margin-removedauto' width='100%' rel='{*}' id='tblThumbs' >");
            if (lastShown == tnFiles.Count)
            {
                lastShown = 0;
            }
            if (lastShown < 0)
            {
                lastShown = 0;
            }
            string PgNum = "";
            for (int r = 0; r < 4; r++)
            {
                sb.AppendLine("<li>");
                for (int c = 0; c < 10; c++)
                {
                    if (lastShown < tnFiles.Count)
                    {
                        FileInfo FI = new FileInfo(tnFiles[lastShown]);
                        string FileName = FI.Name; // get the
                        lastShown++;
 
                        PgNum = FileName.Substring(FileName.IndexOf("-") + 1);
                        PgNum = PgNum.Substring(0, PgNum.IndexOf("."));
 
                        sb.AppendLine("<a href='#'><img  class='thumbNailLink' title='" + PgNum + "' src='"
                            + "/Clients/" + s + "/" + BookID.ToString() + "/Thumbs/" + FileName + "' ></a>");
                    }
                }
                sb.AppendLine("</li>");
            }
            sb.AppendLine("</ul>");
            string retStr = sb.ToString().Replace("{*}", lastShown.ToString());
            return retStr;
        }
 

 
So I have two problems. One I have to click the the $("#ThumbNails"). image twice for the thumbnails to display.
 
The second is the display in a sqauare box. I would like for the to show up horizontal - a straight line.
Posted 9-Oct-12 4:45am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 6,803
1 Sergey Alexandrovich Kryukov 6,377
2 DamithSL 5,421
3 Manas Bhardwaj 4,841
4 Maciej Los 4,330


Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 9 Oct 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100