Пользовательские стили для нескольких экземпляров Fancybox
Я использую Fancybox 2.0.6 для отображения изображений и видео. При наведении на изображение / видео (когда в галерее несколько изображений), Fancybox отображает предыдущие и следующие значки и ссылки. Кликабельная область занимает 40% левой и правой стороны изображения / видео, как и должно быть в соответствии с jquery.fancybox.css. Это отлично подходит для изображений, однако для видео блокирует кнопку воспроизведения, так что пользователь может перейти к следующему / предыдущему видео, а не воспроизводить или приостанавливать видео. Я хотел бы изменить ширину интерактивной области, но только для видео - я бы хотел, чтобы она оставалась неизменной для изображений. Я исследовал Fancybox, чтобы выяснить, что я могу использовать wrapCSS для создания пользовательских стилей для нескольких экземпляров Fancybox, но не могу заставить его работать.
Вот мои звонки
<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>
И вот как у меня есть изображения и видео, отображаемые в моем 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">
Нужно ли что-то добавить или изменить в файле .js? Что мне не хватает?