如何在MVC下使用Lightbox

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。