Lightbox with MVC. File not found.

When using Lightbox with MVC its scripts can cause System.Web.HttpException "File does not exist". It is because lightbox.js not always can resolve paths to loading.gif and closelabel.gif correctly. For example everything is fine when url is like /Home/Index. In that case Lightbox script will resolve path correctly: /Content/themes/lightbox/loading.gif. But if url is like /Home/Index/2 then the resolved path will be like Home/Content/themes/lightbox/loading.gif.
There are few solutions to this situation, you can read about them here. The easiest one is to declare two javascript globals to both gifs in your _Layout.cs:

<script type="text/javascript">
    @*Global paths Lighbox Images*@
    var fileLoadingPath = '@Url.Content("~/Content/themes/lightbox/loading.gif")';
    var fileBottomNavClosePath = '@Url.Content("~/Content/themes/lightbox/closelabel.gif")';
</script>

Then your config section in lightbox.js and lightbox-web.js should start like this:

LightboxOptions = Object.extend({
    fileLoadingImage: fileLoadingPath,
    fileBottomNavCloseImage: fileBottomNavClosePath,

Lightbox with MVC. File not found.

Comments (0)

Add comment