0

我已将 JQuery Lightbox 添加到我的 ASP.net 应用程序中。但是当我点击缩略图图像时出现问题，显示的预览图像是非常大的图像，上下滚动，左右滚动。喜欢这张图片

在此处输入图像描述

我想像这样显示图像预览。

在此处输入图像描述

我如何修复特定预览的宽度和高度？为此我应该编辑或更改哪个文件？添加的文件如下图所示。

在此处输入图像描述

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>
4

1 回答 1

1

代替

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

尝试这个

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

用您自己的选择替换值。

于 2012-10-16T06:02:21.370 回答