Styles personnalisés pour plusieurs instances de Fancybox

J'utilise Fancybox 2.0.6 pour afficher à la fois des images et de la vidéo. En déplaçant la souris sur l'image/vidéo (quand il y a plusieurs images dans une galerie), Fancybox affiche le précédent et suivant des icônes et des liens. La zone cliquable prend 40% de la gauche et à droite de l'image/vidéo, comme il se doit en fonction de jquery.fancybox.css. Ce qui est excellent pour les images, mais pour de la vidéo, il bloque le bouton de lecture de sorte que l'utilisateur passe à la next/prev de la vidéo plutôt que d'être en mesure de jouer ou mettre en pause la vidéo. Je voudrais changer la largeur de la zone cliquable, mais seulement pour les vidéos - j'aimerais qu'elle reste la même pour les images. J'ai fait des recherches Fancybox pour trouver ce que je peut utiliser wrapCSS pour créer des styles personnalisés pour plusieurs instances de Fancybox, mais je ne peux pas le faire fonctionner.

Voici mon js appels

<script type="text/javascript">
    $(document).ready(function() {
    $(".vimeo").fancybox({
    width: 781,
    height: 440,
    type: 'iframe',
    fitToView : false,
    wrapCSS    : 'fancybox-nav-video'
    });
    });
</script>
<script>
$(document).ready(function() 
{
$('.fancybox').fancybox(
    {
        padding : 0,
        openEffect  : 'elastic'
    }
    );
    $(".fancybox").fancybox(
    {
        wrapCSS    : 'fancybox-nav',
        closeClick : true,
        helpers : {
            overlay : {
                css : {
                    'background-color' : '#000'
                }
            },
            thumbs  : {
                width   : 50,
                height  : 50
            }
        }
    }
    );
}
);
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();      
</script>

Et voici comment j'ai des images et de la vidéo affichée dans mon code HTML:

<a class="fancybox" rel="gallery1" href="image1.jpg">
<a class="fancybox" rel="gallery1" href="image2.jpg">
<a class="vimeo" rel="gallery2" href="videoplayerlink1">
<a class="vimeo" rel="gallery2" href="videoplayerlink2">

Ai-je besoin d'ajouter quelque chose ou de changer quoi que ce soit au sein de la .fichier js? Ce qui me manque?

Ne pas le wrapCSS de classe dans les dom lorsque vous cliquez sur les liens?
salut Bergi, je ne suis pas sûr de comprendre ta question
Pourquoi pensez-vous que cela ne fonctionne pas? Avez-vous d'inspecter les DOM, où la classe n'est pas venue?

OriginalL'auteur jennetcetera | 2012-07-25

  1. 10

    Première vous devez comprendre que lorsque vous utilisez le wrapCSS option, une nouvelle class sélecteur sera ajouté à la fancybox wrap (.fancybox-wrap) afin d'ajouter l'option wrapCSS:'fancybox-nav-video' signifie que lorsque vous ouvrez fancybox, vous obtiendrez

    <div class="fancybox-wrap fancybox-nav-video ....etc." ....

    Deuxième, vous devez déclarer votre fancybox boutons de propriétés CSS pour ces nouvelles sélecteur (CSS déclaration après avoir chargé une fancybox fichier css):

    .fancybox-nav-video .fancybox-nav {
    width: 60px;       
}
.fancybox-nav-video .fancybox-nav span {
    visibility: visible; /* arrows will be permanently visible */
}
.fancybox-nav-video .fancybox-next {
    right: -60px; /* move right outside fancybox area */
}
.fancybox-nav-video .fancybox-prev {
    left: -60px; /* move left outside fancybox area */
}

    Avis que ces nouvelles propriétés css ne s'applique qu'à la fancybox les envelopper avec de la classe fancybox-nav-video (où nous avons utilisé la wrapCSS option). Ces css aura lieu les boutons ainsi que la zone cliquable à l'extérieur de la fancybox, l'effacement de l'vimeos du bouton play. Parce que, nous avons fait les flèches de navigation visibles en permanence, sinon le visiteur ne savez pas où le vol stationnaire.

    Troisième, vous avez juste besoin de l'emballage de tous vos fancybox scripts personnalisés au sein d'un seul .ready() méthode comme:

    <script type="text/javascript">
 $(document).ready(function() {

//fancybox for vimeo
  $(".vimeo").fancybox({
    width: 781,
    height: 440,
    type: 'iframe',
    fitToView : false,
    wrapCSS : 'fancybox-nav-video' //add a class selector to the fancybox wrap
  });

//fancybox for images
  $(".fancybox").fancybox({
   //options for images here
  });

 }); //ready
</script>

    OriginalL'auteur JFK