javascript - Custom styles for multiple instances of Fancybox

Question

I am using Fancybox 2.0.6 to display both images and video. When rolling over the image/video (when there are multiple images in a gallery), Fancybox displays the previous and next icons and links. The clickable area takes up 40% of the left and right side of the image/video, as it should according to jquery.fancybox.css. This is great for images, however for video, it blocks the play button so that the user goes to the next/prev video rather than being able to play or pause the video. I would like to change the width of the clickable area, but only for videos - I would like it to stay the same for images. I have researched Fancybox to find that I can use wrapCSS to create custom styles for multiple instances of Fancybox, but I cannot get it to work.

Here are my js calls

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

And here is how I have images and video displayed within my 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">

Do I need to add something or change anything within the .js file? What am I missing?

Answer 1

First you need to understand that when you use the wrapCSS option, a new class selector will be added to the fancybox wrap (.fancybox-wrap) so adding the option wrapCSS:'fancybox-nav-video' means that when you open fancybox you will get

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

Second, you need to declare your specific fancybox buttons CSS properties for such new selector (an inline CSS declaration after you loaded the fancybox css file):

.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 */
}

Notice that these new css properties will be applied only to the fancybox wrap with class fancybox-nav-video (where we used the wrapCSS option). These css will place the buttons as well as the clickable area outside the fancybox, clearing out the vimeos's play button. Because that, we made the navigation arrows permanently visible, otherwise the visitor won't know where to hover.

Third, you just need to wrap all your fancybox custom scripts within a single .ready() method like:

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