Как использовать Lightbox под MVC - PullRequest
Новая
       13

Как использовать Lightbox под MVC

2 голосов
/ 20 октября 2008

Я большой поклонник библиотеки 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 в не подкаталоге?

Спасибо!

Ответы [ 3 ]

2 голосов
/ 20 октября 2008

Я полагаю, 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; }

И делай как хочешь.

0 голосов
/ 18 февраля 2015 
<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>
0 голосов
/ 20 октября 2008

О какой фреймворке MVC мы здесь говорим? Хотя я не знаком с этой конкретной библиотекой лайтбокса, я настоятельно рекомендую вам найти правильный способ ссылки на файлы javascript по абсолютному пути в корне вашего сайта: 


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

Если вы сможете понять, как заставить это работать, я уверен, что это решит вашу проблему с изображениями.

Кроме того, копировать одни и те же файлы javascript по всему вашему сайту - плохая идея. Помимо очевидной проблемы с беспорядком, браузерам придется загружать одни и те же файлы снова и снова, а не считывать их из кэша, поскольку они находятся по разным URL-адресам.

...