How to use Lightbox under MVC

Question

I am a big fan of the Lightbox2 library, and have used it in the past just not on an MVC project. In the past I remember that Lightbox2 was picky about the paths it scripts, css, and images resided in. I remember specifically have to put everything in subdirectories of the page's path, else it wouldn't work.

In a non-MVC application that approach was fine, but now I find myself working on an MVC application and a page's URL may have nothing to do with the directory structure. So linking to Lightbox2 per the instructions of:

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

obviously does not work.

I tried putting the absolute path to the JavaScript which gave me the effects, just without the images. I am suspecting that the JavaScript "knows" where its images are, and cannot find them.

Has anyone had success with Lightbox2 in an MVC environment? Perhaps just success deploying Lightbox2 to a non-subdirectory?

Thanks!

Answer 1

Which MVC framework are we talking about here? While I'm not familiar with that particular lightbox library, I'd highly recommend you figure out the proper way to reference the javascript files via an absolute path at the root of your site:

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

If you can figure out how to get that to work, I'll bet it will solve your problem with the images.

Also, having copies of the same javascript files littered all over your site is a bad idea. Besides the obvious clutter problem, browsers will have to download the same files over and over again instead of reading them from cache because they're at different URLs.

Answer 2

I believe Lightbox assumes you have a structure as follows:

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

You can just open lightbox.js and find:

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

And in lightbox.css find:

#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; }

And do as you please with it.