鼠标滚轮功能在fancybox中不起作用

Question

我已经在html文档的头部链接了jquery.mousewheel文件：

<script type="text/javascript" src= src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

要使函数正常工作，我还需要做什么吗？

其他详细信息：

我在验证元素a上的属性rel的关键字gallery01值时也遇到了这个错误:关键字gallery01未注册。- HTML5。有没有可能是因为。

<!--jquery ui tabs containing fancybox-->
            <div id="portfolio-list">
              <div id="tabs" class="tabs-bottom">
                    <ul>
                        <li><a href="#graphic-design">Graphic Design</a></li>
                        <li><a href="#web-design">Web Design</a></li>
                        <li><a href="#3d">3d</a></li>
                        <li><a href="#flash">Flash</a></li>
                    </ul>

                    <div id="graphic-design">




                        <!--gallery 01 -->
<a class="fancybox" href="img/colorful-abstract.jpg" rel="gallery01"><img src="img/navigation/about.png" alt=""/></a>
<a class="fancybox" href="img/grunge-texture.jpg" rel="gallery01"><img src="img/navigation/contact.png" alt=""/></a>




                   </div>

                    <div id="web-design">
                        <a class="fancybox" href="img/grunge-texture.jpg" rel="gallery01"><img src="img/navigation/contact.png" alt=""/></a>

                    </div>

                    <div id="3d">

                    </div>

                    <div id="flash">

                    </div>

              </div>


            </div>

jquery code: // fancybox

$(document).ready(function() {
    $("a.fancybox").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   true,
        'cyclic'        :   true,
        'showNavArrows' :   true,
        'showCloseButton': false,
        'titleFormat'   : formatTitle,
        'titlePosition' :   'over',
        'onComplete'    :   function() {
        $("#fancybox-wrap").hover(function() {
            $("#fancybox-title").show();
        }, function() {
            $("#fancybox-title").hide();
        });
    }
    })
});

Answer 1

如果您的问题是当鼠标悬停在fancybox窗口上时无法向下或向上滚动，您可以通过完全删除jquery.mousewar-3.0.4脚本来解决这个问题。

对于你的rel属性的失效，似乎HTML5标准对这个问题真的很严格，你可以在那里真正使用的单词是有限制的。我建议你阅读这篇文章：

http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes

Answer 2

这段代码对我来说工作得很好。与in event trigger('click')配合使用mousewheel()

<div id="view_more_filter" style="height:1000px;">scroll testing...</div>
    <div id="show_more_fltr">   
        <a<span>More Filter</span></a>   
      </div>

    <script>
        var mod_width = '500';
        var mod_height = '520';
             $('#show_more_fltr a').click(function(e){
                $('#show_more_fltr').fancybox({
                     autoDimensions: false,
                     width        : mod_width,
                     height      : mod_height,
                     scrolling : 'auto',
                     href : "#view_more_filter",
                }).trigger('click');
                $('#fancybox-outer').mousewheel(function(event, delta) {
                    event.stopPropagation();
                    $('#fancybox-wrap').trigger('mousewheel.fb', delta);
                                 });
            });
    </script>