Как использовать лайтбокс под MVC
Я большой поклонник библиотеки 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 «знает», где находятся его изображения, и не может их найти.
Кто-нибудь добился успеха с Lightbox2 в среде MVC? Возможно, вы просто успешно развернули Lightbox2 в подкаталоге?
Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
О каком фреймворке MVC мы здесь говорим? Хотя я не знаком с этой конкретной библиотекой лайтбоксов, я настоятельно рекомендую вам найти правильный способ ссылки на файлы javascript через абсолютный путь в корне вашего сайта:
<script type = "text/javascript" src = "/js/prototype.js">
Если вы поймете, как заставить это работать, держу пари, это решит вашу проблему с изображениями.
Кроме того, размещение копий одних и тех же файлов javascript, разбросанных по всему сайту, - плохая идея. Помимо очевидной проблемы с беспорядком, браузерам придется загружать одни и те же файлы снова и снова, вместо того, чтобы читать их из кеша, потому что они находятся по разным URL-адресам.
Я в курсе. Я предлагал вам решить проблему, почему вы не можете ссылаться на них полностью, и это решило бы проблему загрузки изображений и повысило масштабируемость вашего сайта.
Я считаю, что 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; }
И делай с этим, что хочешь.
Спасибо, что решили это. Я изменил их на гифки, чтобы сделать их абсолютными, и это исправило их.
<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>
Не могли бы вы объяснить редактировать, почему этот код отвечает на вопрос? Только кодовые ответы - обескураженный, потому что они не учит решения.
Я уже сказал, что ссылался на них абсолютно, просто у библиотеки есть жестко закодированная зависимость.