Javascript Jquery缩略图图像预览
我已将JQuery Lightbox添加到我的ASP.net应用程序中。但我有一个问题，当我点击缩略图的预览图像显示是非常大的图像与滚动上下，右左。像这样 我想像这样显示图像预览 如何确定特定预览的宽度和高度？为此，我应该编辑或更改哪个文件？。添加的文件如下图所示 下面给出了ASP.net代码Javascript Jquery缩略图图像预览,javascript,jquery,Javascript,Jquery,我已将JQuery Lightbox添加到我的ASP.net应用程序中。但我有一个问题，当我点击缩略图的预览图像显示是非常大的图像与滚动上下，右左。像这样 我想像这样显示图像预览 如何确定特定预览的宽度和高度？为此，我应该编辑或更改哪个文件？。添加的文件如下图所示 下面给出了ASP.net代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyAPNSWebAp
<%@ 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>
jquerylightbox示例
$（函数（）{
$（#画廊a'）。灯箱（）；
});
/*jQuery lightBox插件-图库风格*/
#画廊{
背景色：#444；
填充：2px；
宽度：800px；
}
#库ul{列表样式：无；}
#库ul li{显示：内联；}
#伊姆格画廊{
边框：5px实心#3e3e；
边框宽度：5px 5px 20px；
}
#画廊ul a：悬停图像{
边框：5px实心#fff；
边框宽度：5px 5px 20px；
颜色：#fff；
}
#画廊：悬停{颜色：#fff；}
例子
单击图像，查看正在运行的jQuery lightBox插件
-
-
-
-
-
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
$（函数（）{
$（#画廊a'）。灯箱（）；
});
<script type="text/javascript">
$('#gallery a').lightBox({
maxHeight: 500,
maxWidth: 700
});
</script>
$（#画廊a'）。灯箱({
最大高度：500，
最大宽度：700
});
用您自己的选择替换值。有人知道我的问题吗？还有其他Lightbox样式的插件，当您单击打开大图像或执行相同操作时，它们可以使图像适合您的视口，此外，还可以在调整窗口大小时调整图像大小。-（在我的头顶上，我记不起任何其他做这些事情的人）这在新页面中打开图像（url=），但我想像lightbox弹出窗口一样预览第二张红叶图像。在你的每个锚定标记中添加rel=“lightbox”，然后检查。我想lightbox正在预览图像的实际大小。我需要固定图像的高度和宽度，因为我的所有图像都具有相同的属性。我不确定，但这可能是一个JQuery冲突问题。我不认为这是图像高度/宽度的问题。