试图弄清楚如何以水平线或垂直线显示缩略图 [英] Trying to figure out how to display thumbnails in a horizontal line or vertical line

问题描述

试图弄清楚如何以水平线或垂直线显示缩略图
我正在使用Ajax C#jQuery和CSS.我创建以下div:

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代码:

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

我的jquery代码是这样的:

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


           });

我的Ajax代码是这样的:

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');
                   
                }
            });
        }

而我的网络方法C#代码是这样的:

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

所以我有两个问题.我必须单击$(#ThumbNails").图片两次以显示缩略图.

第二个是在方形框中显示的内容.我希望水平显示-一条直线.

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.

推荐答案

(" #ThumbNails").bind( 点击"， 功能(html){ lastShown = CurrentPage; PopulateThumbsEx(BookID，lastShown);

("#ThumbNails").bind("tap", function (html) { lastShown = CurrentPage; PopulateThumbsEx(BookID, lastShown);

(" ).fadeOut(" );

("#book").fadeOut("fast");

( " ).fadeIn( 500 );

(".ThumbNailNav").fadeIn(500);

这篇关于试图弄清楚如何以水平线或垂直线显示缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！