Question

我已将jquery.mousewheel文件链接到html文档的头部：

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

我还需要做些什么来使这个功能起作用吗？

其他详情：

我在使用w3c进行验证时也遇到此错误。[元素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代码： // 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.mousewheel-3.0.4脚本来解决此问题。

对于你的rel属性的失效，似乎HTML5标准对这个问题非常严格，你可以真正使用那些词。我建议你阅读这篇文章：

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

Answer 2

此代码对我来说很好。使用 mousewheel（），但如果发生 trigger（'click'）

<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>

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

2 个答案: