Comment utiliser Lightbox sous MVC

Question

Je suis un grand fan de la bibliothèque Lightbox2, et je l'ai utilisé dans le passé, mais pas sur un projet MVC. Dans le passé, je me souviens que Lightbox2 était pointilleux sur les chemins que les scripts, CSS et les images résidaient po Je me souviens spécifiquement de mettre tout dans les sous-répertoires du chemin de la page, sinon cela ne fonctionnerait pas.

Dans une application non-MVC, cette approche était correcte, mais maintenant je me retrouve à travailler sur une application MVC et l'URL d'une page n'a peut-être rien à voir avec la structure du répertoire. Donc relier à Lightbox2 selon les instructions 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> 

ne fonctionne évidemment pas.

J'ai essayé de mettre le chemin absolu vers le JavaScript qui m'a donné les effets, juste sans les images. Je soupçonne que le JavaScript "sait" où sont ses images, et ne peut pas les trouver.

Quelqu'un at-il eu du succès avec Lightbox2 dans un environnement MVC? Peut-être juste le succès du déploiement de Lightbox2 dans un non-sous-répertoire?

Merci!

Answer 1

Je crois suppose que vous avez la visionneuse une structure comme suit:

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

Vous pouvez lightbox.js juste ouvrir et trouver:

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

Et lightbox.css trouver:

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

Et faites comme vous s'il vous plaît avec elle.

Answer 2

De quel framework MVC s'agit-il ici? Bien que je ne suis pas familier avec cette bibliothèque particulière de la visionneuse, je vous recommande fortement déterminer la façon de référencer les fichiers JavaScript via un chemin absolu à la racine de votre site:

 

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

Si vous pouvez Je vais parier que cela va résoudre votre problème avec les images.

De plus, avoir des copies des mêmes fichiers javascript jonchés partout sur votre site est une mauvaise idée. Outre le problème d'encombrement évident, les navigateurs devront télécharger les mêmes fichiers encore et encore au lieu de les lire à partir du cache, car ils sont à des URL différentes.

Answer 3

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