Click here to Skip to main content
11,924,800 members (57,623 online)
Rate this:
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">

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 4: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 | Mobile
Web02 | 2.8.151125.3 | Last Updated 9 Oct 2012
Copyright © CodeProject, 1999-2015
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