Question

我正在尝试使用灯箱使用缩略图显示更大的图像，但它不起作用。

在我的布局视图中：

<link rel="Stylesheet" href="@Url.Content("~/Content/css/lightbox.css")" media="screen" />
<script type="text/javascript" src="@Url.Content("~/Content/js/prototype.js")" />
<script type="text/javascript" src="@Url.Content("~/Content/js/scriptaculous.js?load=effects,builder")" />
<script type="text/javascript" src="@Url.Content("~/Content/js/lightbox.js")" />

然后在我的视图中缩略图是：

@{
Layout = "~/CustomViews/abc.net/Shared/_DealerLayout.cshtml";

}

<td>
            <a href="@Url.Content("~/Content/Custom/abc.net/Images/fylerlarge.jpg")" rel="lightbox">
                <img src="@Url.Content("~/Content/Custom/abc.net/Images/fylersmall.jpg")" alt="Flyer1" />
            </a>
        </td>

灯箱所需的图像位于内容目录下的图像文件夹中。

在我的lightbox.js文件中，这是图像的设置方式。

fileLoadingImage: '/images/loading.gif',
fileBottomNavCloseImage: '/images/closelabel.gif'

在我的lightbox.css中，这是前一个和下一个链接按钮的设置方式：

#prevLink:hover, #prevLink:visited:hover { background: url(/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/images/nextlabel.gif) right 15% no-repeat; }

单击缩略图时，大图像不会显示在灯箱中。

使用MVC使用灯箱显示图像

0 个答案: