Click here to Skip to main content
13,088,305 members (53,064 online)
Rate this:
Please Sign up or sign in to vote.
See more:
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">

CSS code:
       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;
            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);


My ajax code is this:

function PopulateThumbsEx(BookID, lastShown) {
            var tag = $("<div></div>");
                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.
        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());
            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++)
                for (int c = 0; c < 10; c++)
                    if (lastShown < tnFiles.Count)
                        FileInfo FI = new FileInfo(tnFiles[lastShown]);
                        string FileName = FI.Name; // get the
                        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>");
            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 3:45am

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web03 | 2.8.170813.1 | Last Updated 9 Oct 2012
Copyright © CodeProject, 1999-2017
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