0

我遇到了阻止我网站上的视频播放按钮的导航按钮问题：http: //kathyyuen.net/worksample。我已经在 jsfiddle 上测试了设置，它可以在一个混合库中运行：http: //jsfiddle.net/kyuen3/STKUS/。

不确定是什么问题。jsfiddle 脚本和我的站点的唯一区别是水平滚动的实现。导航按钮似乎移动了，但点击区域是相同的。我试图将导航按钮从盒子中移开，但这也不起作用。有没有人有任何想法？我真的很想保持水平滚动格式。

<head>

<!-- OVERRIDE LEFT/RIGHT BUTTON AREA -->
<style type="text/css">
.fancybox-nav {
     width: 50px;  
}
.fancybox-nav span {
    /* arrows will be permanently visible */
    visibility: visible; 
}
.fancybox-prev {
    /* Change to -50px */
        left: -50px; 
}   
.fancybox-next {
    /* Change to -50px */
        right: -50px; 
}
</style>


<script>
//horizantal scrolling website
$(function(){
    $("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
    $(".post").wrap("<td></td>");
    $("body").mousewheel(function(event, delta) {
        this.scrollLeft -= (delta * 30);
        event.preventDefault();
    });   
});
</script>

<script type="text/javascript">
 $(".fancybox").fancybox({ 
      'onComplete' : function() {$("#fancybox-wrap").unbind('mousewheel.fb');},
      'transitionIn': 'none', 
      'transitionOut': 'none', 
      'titlePosition': 'inside', 
      'scrolling' : 'no',
 }); 
</script>
</head>
<body>
<div id="page-wrap">
    <div class="post">
        <p> 
            <h2>Taxicab SoundMachine 2010</h2>
            <p>         
            </p>
            <img id="TSM" src="images/worksample/taxcabsoundmachine-1.png" height="400px"/>
            <script type="text/javascript" charset="utf-8">

                $("#TSM").click(function() {

                  $.fancybox.open([
                      {
                          href : 'images/worksample/taxcabsoundmachine-1.png',                
                          title : 'mixed media'
                      },
                      {
                          href : 'images/worksample/taxcabsoundmachine-2.png',                
                          title : 'mixed media'
                      },
                      {
                          type: 'iframe',
                          href : 'http://player.vimeo.com/video/62499221?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1 width="400" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>',                           
                          title : 'Processing applet using themidibus library'
                      }
                  ], {
                      padding : 0
                  });

                  return false;

              });
            </script>

        </p> 
    </div>
    .....
 </div>

4

0 回答 0