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缩略图图片预览

回答

相关问题