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