Question

我是Lightbox2库的忠实粉丝，过去曾经使用它而不是MVC项目。在过去，我记得Lightbox2对脚本，css和图像所在的路径很挑剔。我记得特别要把所有东西放在页面路径的子目录中，否则它就行不通了。

在非MVC应用程序中，该方法很好，但现在我发现自己正在处理MVC应用程序，而页面的URL可能与目录结构无关。因此，按照以下说明链接到Lightbox2：

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

显然不起作用。

我尝试将绝对路径放到JavaScript上，它给了我效果，只是没有图像。我怀疑JavaScript“知道”它的图像在哪里，并且找不到它们。

有没有人在MVC环境中使用Lightbox2取得成功？也许只是成功将Lightbox2部署到非子目录？

谢谢！

Answer 1

我相信Lightbox假设你有如下结构：

/images
    prevlabel.gif
    nextlabel.gif
    loading.gif
    closelabel.gif
/css
    lightbox.css
lightbox.js

您只需打开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; }

随便随便做。

Answer 2

<script src="~/LightBox/js/jquery.js"></script>

<script src="~/LightBox/js/jquery.lightbox-0.5.min.js"></script>

<a title="Title here" class="lightbox" href="~/LightBox/images/lightbox-btn-close.gif">click</a>



<script type="text/javascript">
    $(function () {
        $('a.lightbox').lightBox();//.lightBox(); // Select all links with lightbox class
    });
</script>

Answer 3

我们在这里讨论哪个MVC框架？虽然我不熟悉那个特定的灯箱库，但我强烈建议你找出通过网站根目录的绝对路径引用javascript文件的正确方法：


<script type="text/javascript" src="/js/prototype.js">

如果你能弄清楚如何让它发挥作用，我敢打赌它会解决你的图像问题。

此外，拥有遍布整个网站的相同javascript文件的副本是一个坏主意。除了明显的混乱问题之外，浏览器必须一遍又一遍地下载相同的文件，而不是从缓存中读取它们，因为它们位于不同的URL。

如何在MVC下使用Lightbox

3 个答案: