The previous and next button in fancybox are interfering with the play button of a vimeo video when it is set to display as gallery

问题

I have already tried tweaking the fancybox stylesheet but can't seem to move the hover area of the previous and next button so that it does not interfere with the play button of a vimeo video. I don't know if the problem can be solved by modifying the javascript file but I really don't have the knowledge to do so. Here is the css code of the fancybox stylesheet:

#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('blank.gif');
z-index: 1102;
display: none;
}

#fancybox-left {
left: 0px;
}

#fancybox-right {
right: 0px;
}

#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
left: -9999px;
width: 30px;
height: 30px;
margin-top: 0px;
cursor: pointer;
z-index: 1102;
display: block;
}

#fancybox-left-ico {
background-image: url('fancybox.png');
background-position: -40px -30px;
}

#fancybox-right-ico {
background-image: url('fancybox.png');
background-position: -40px -60px;
}

#fancybox-left:hover, #fancybox-right:hover {
visibility: visible; /* IE6 */
}

#fancybox-left:hover span {
left: 20px;

}

#fancybox-right:hover span {
left: auto;
right: 20px;
}

I would appreciate if someone could help me figure out how to modify the hover areas for the previous and next buttons when using fancybox.

回答1:

You could also make the containing divs shorter as I have just done, so the prev/next arrow hover areas finish just above the Vimeo controls

#fancybox-left, #fancybox-right {
height: 86%;
}

回答2:

I accomplished this with:

#fancybox-left, #fancybox-right {
    width: 0%;
}

I put this selector in my own stylesheet which I loaded after Fancybox's.

回答3:

You don't actually need to mess with original fancybox css file.

What you can do is to crop the navigation arrows to their size so the next/prev area don't cover a whole area on both sides of the box.

AFTER you linked the fancybox css file, add this inline css declaration:

<style type="text/css">
 #fancybox-left,
 #fancybox-right {
  width: 30px; height: 30px; top: 45%
 }

 #fancybox-left:hover span,
 #fancybox-left-ico{
  left: -10px;
 }

 #fancybox-right:hover span,
 #fancybox-right-ico {
  right: -10px;
  left: auto;
 }
</style>

This is for fancybox v1.3.x

来源：https://stackoverflow.com/questions/8492999/the-previous-and-next-button-in-fancybox-are-interfering-with-the-play-button-of

标签

fancybox

gallery

vimeo