(JQuery) Lancer Fancybox uniquement en utilisant des classes?

Question

J'essaie d'obtenir une liste vidéo w/vignettes de travail avec Fancybox - le problème est qu'il semble chaque lien utilise des classes pour lancer le fancybox

Que faire si je veux que ce soit plus dynamique, une liste de la vidéo liens et chacun ouvre une nouvelle vidéo? Je ne devrais pas avoir à créer une nouvelle définition de fonction de clic pour chacun je fais?

<script type="text/javascript"> 

    $(document).ready(function() { 

$ (» de fancyvideo5" .) Cliquez sur (function() { .fancybox $ ({ 'padding':. 0, 'overlayOpacity': 0,7, 'autoDimensions': faux, ' content ':' myConent ', ' onComplete ': function() {$ ("# fancybox-interne"). css ({' débordement ':' caché '});}, ' onClosed ': function() { $ ("# fancybox-inner"). empty(); }); return false; }); // fancyvideo

et le corps aura quelque chose comme:

<ul> 

    <li> 
     <a title="test" href="javascript:;" class="fancyvideo5"><img src="thumbnail.jpg" /></a> 
    </li>                    

</ul> 

id aiment avoir quelque chose comme

<a title="test" href="javascript:openVideo(1);" class="fancyvideo5"><img src="thumbnail.jpg" /></a> 

je peux transmettre les informations vidéo et appeler la fonction au lieu de tout sur document prêt.

Merci

Answer 1

Je n'ai pas utilisé fancybox en temps, mais si je me souviens bien, vous pouvez utiliser une fonction fancybox.

$(document).ready(function() { 
    $(a.fancyvideo).fancybox(
     //settings 
)); 

Ensuite, pour vous relie

<a href="#video" class="fancyvideo" /> 
<a href="#video2" class="fancyvideo" /> 
<a href="#video3" class="fancyvideo" /> 
<a href="#video4" class="fancyvideo" /> 

et

<div id="video" style="display: none;"> 
//insert embed code here 
</div> 
<div id="video2" style="display: none;"> 
//insert embed code here 
</div> 

<div id="video3" style="display: none;"> 
//insert embed code here 
</div> 

<div id="video4" style="display: none;"> 
//insert embed code here 
</div>