平滑滚动与Fancybox冲突“追加自定义内容”

我使用CSS技巧的“平滑滚动”浏览我的一个页面（引导3）网站。而且我也使用花式框来显示我的投资组合项目。平滑滚动与Fancybox冲突“追加自定义内容”

现在，一切工作正常，直到我试图与数据的fancybox显示的数据从一个div追加（持有的资产组合项内容）

我觉得这个冲突，因为两者的jQuery的（Smoothscroll和Fancybox）使用锚标签。

这里是smoothscroll脚本：

<script type="text/javascript"> 
    $(function() { 
     $('a[href*=#]:not([href=#])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
       var target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
       if (target.length) { 
        $('html,body').animate({ 
         scrollTop: target.offset().top 
        }, 500); 
        return false; 
       } 
      } 
     }); 
    }); 
</script>

这里是脚本的fancybox这就是加载的fancybox，并与类触发它，也是会从一个单独的DIV内容的脚本。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".fancybox").fancybox(); 
    }); 
</script> 


<!--FANCYBOX DISPLAY CONTENT FROM DIV --> 
<script type="text/javascript"> 
    $(".fancybox").fancybox({ 
     openEffect : 'none', 
     closeEffect : 'none', 
     afterLoad : function() { 
      this.inner.prepend('<h1>1. My custom title</h1>'); 
      this.content = '<h1>2. My custom title</h1>' + this.content.html(); 
     } 
    }); 
</script>

当我注释掉smoothscroll脚本时，fancybox工作正常。所以它必须是smoothscroll。

有关如何解决这个问题的任何想法？

你可以在这里看到的网站与的fancybox工作，所以smoothscroll被禁用： http://www.baasdesign.nl/responsive/

来源

2013-11-21 Wessel_88

上面的代码与参考网站上的代码不对应。你有语法js错误（API选项恰好在'$（“。fancybox”）之后）fancybox（）;'） – JFK

类，例如“花式内容”，你隐藏花哨的内容，你用的fancybox链接加载之前，不让它“显示：无”，请在下面的例子：

/* element bifore load */ .fancy-content{ display: block; /*not none*/ height: 0px; overflow: hidden; visibility: hidden; } /* element after load in fancybox inner */ .fancybox-inner .fancy-content{ height: auto; overflow: hidden; visibility: visible;}

其中一个原因是，滚动，不知道如何处理滚动内容的宽度和高度，，因为元素不显示。 :-)我希望这有助于！

来源

2013-12-31 20:19:54

平滑滚动与Fancybox冲突“追加自定义内容”

回答

相关问题