Jquery縮略圖圖片預覽

我已將JQuery Lightbox添加到我的ASP.net應用程序中。但是當我點擊縮略圖圖像時，我遇到了一個問題，顯示的預覽圖像非常大，圖像上下左右滾動。像這樣iamgeJquery縮略圖圖片預覽

enter image description here

，我想要顯示的圖像預覽是這樣的。

enter image description here

如何我可以修復的寬度和高度爲特定預覽？我應該爲此編輯或更改哪個文件？添加的文件是圖片如下。

enter image description here

的ASP.net代碼下面給出

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyAPNSWebApp._Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
     <title>Jquery LightBox Example</title> 
     <script type="text/javascript" src="js/jquery.js"></script> 
     <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> 
     <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> 
    <script type="text/javascript" src="js/lightbox_resize.js"></script> 
    <link rel="stylesheet" href="css/lightbox_r.css" type="text/css" media="screen"> 
     <script type="text/javascript"> 
      $(function() { 
       $('#gallery a').lightBox(); 
      }); 
     </script> 
     <style type="text/css"> 
     /* jQuery lightBox plugin - Gallery style */ 
      #gallery { 
       background-color: #444; 
       padding: 2px; 
       width: 800px; 
      } 
      #gallery ul { list-style: none; } 
      #gallery ul li { display: inline; } 
      #gallery ul img { 
       border: 5px solid #3e3e3e; 
       border-width: 5px 5px 20px; 
      } 
      #gallery ul a:hover img { 
       border: 5px solid #fff; 
       border-width: 5px 5px 20px; 
       color: #fff; 
      } 
      #gallery ul a:hover { color: #fff; } 
     </style> 
    </head> 
    <body> 
     <form id="form1" runat="server">  
      <h2 id="example">Example</h2> 
      <p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p> 
      <div id="gallery"> 
       <ul> 
        <li> 
         <a href="photos/image1.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
          <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /> 
         </a> 
        </li> 
        <li> 
         <a href="photos/image2.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
          <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> 
         </a> 
        </li> 
        <li> 
         <a href="photos/image3.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
          <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> 
         </a> 
        </li> 
        <li> 
         <a href="photos/image4.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
          <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /> 
         </a> 
        </li> 
        <li> 
         <a href="photos/image5.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
          <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /> 
         </a> 
        </li> 
       </ul> 
      </div> 
     </form> 
    </body> 
</html>

來源

2012-10-16 Mohsinjan110

任何人知道我的問題？ – Mohsinjan110

還有其他的燈箱樣式插件，當您點擊打開大圖像或做同樣的事情時，使圖像適合您的視口，除此之外，還調整窗口大小調整圖像。 http://fancybox.net/ - http://www.shadowbox-js.com/download.html（我的頭頂我不記得任何其他那些做這些事情） – Joonas

而不是

<script type="text/javascript"> 
    $(function() { 
     $('#gallery a').lightBox(); 
    }); 
</script>

試試這個

<script type="text/javascript"> 
    $('#gallery a').lightBox({ 
     maxHeight: 500, 
     maxWidth: 700 
    }); 
</script>

與你自己的選擇替換值。

來源

2012-10-16 06:02:21 ganesh

這打開圖像在新的頁面（url = http：// localhost：1608/photos/image5.jpg），但我想預覽像lightbox上方的彈出窗口，如上圖第二張紅色圖片。 – Mohsinjan110

在你的每個錨標籤添加rel =「lightbox」，然後檢查。 – ganesh

仍然是同樣的問題:( – Mohsinjan110

Jquery縮略圖圖片預覽

回答

相關問題