Como usar Lightbox sob MVC

Question

Eu sou um grande fã da biblioteca Lightbox2, e tê-lo usado no passado simplesmente não em um projeto MVC. No passado eu me lembro que Lightbox2 era exigente com os caminhos-lo de scripts, CSS e imagens residiam. Lembro-me especificamente tem que colocar tudo em subdiretórios do caminho da página, então ele não iria funcionar.

Em um aplicativo não-MVC que a abordagem estava bem, mas agora eu me vejo trabalhando em um aplicativo MVC e URL de uma página pode não ter nada a ver com a estrutura de diretórios. Então, ligando para Lightbox2 acordo com as instruções de:

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

obviamente não funciona.

Eu tentei colocar o caminho absoluto para o JavaScript que me deu os efeitos, apenas sem as imagens. Estou suspeitando que o JavaScript "sabe" onde suas imagens são, e não pode encontrá-los.

Alguém já teve sucesso com Lightbox2 em um ambiente MVC? Talvez apenas o sucesso Implantando Lightbox2 a um não-subdiretório?

Obrigado!

Answer 1

Eu acredito Lightbox assume que tem uma estrutura como segue:

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

Você pode apenas lightbox.js abertos e encontrar:

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

E, achado 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; }

E fazer o que quiser com ele.

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

framework

Qual MVC estamos falando aqui? Enquanto eu não estou familiarizado com essa biblioteca lightbox particular, eu recomendo que você descobrir a maneira correta de fazer referência aos arquivos javascript via um caminho absoluto na raiz do seu site:

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

Se você pode descobrir como chegar a esse trabalho, eu aposto que ele vai resolver o seu problema com as imagens.

Além disso, ter cópias dos mesmos arquivos javascript espalhados por todo o seu site é uma má idéia. Além do problema desorganização óbvio, navegadores terá que baixar os mesmos arquivos de uma e outra vez, em vez de lê-los a partir do cache, porque eles estão em diferentes URLs.