jQuery插件冲突

jQuery plug-in conflict

本文关键字：冲突 插件 jQuery      更新时间：2023-09-26

所以，今天我有一个问题:我怎么能打破砌体JQUERY和FANCYBOX (LIGHTBOX)?

我真的需要这个。我花了几个小时试图自己解决这个问题，但我真的做不到。:/

这是我调用fancybox和砌体的脚本:

<script type="text/javascript">
        $(function(){
            var $container = $("#galeria");
            $container.imagesLoaded(function(){
                $container.masonry({
                itemSelector : 'li',
                columnWidth : 200
                });
            });
        });
       $(document).ready(function() {
            $("#pre-enviar-imagem").fancybox({
                'padding'       : 0,
                'centerOnScroll' : true
            });
            $("a#pictures").fancybox({
                    'transitionIn' : 'none',
                    'transitionOut' : 'none',
                    'changeSpeed' : 0,
                    'changeFade' :    0,
                    'padding'       : 0,
                    'titlePosition' : 'over',
                    'onComplete'    :   function() {
                            $("#galeria-wrap").hover(function() {
                                    $("#galeria-title").show();
                            }, function() {
                                    $("#galeria-title").hide();
                            });
                    }
            });
          });
   </script>

简而言之，我的问题是重叠，但正如你所看到的，我已经使用imagesLoaded插件，等等。我已经尝试设置所有图像的宽度/高度，但它仍然不起作用。

谢谢。

我需要按下鼠标滚动来工作。想法吗?

我重写了你的代码:

<script type="text/javascript">
    $.noConflict();
    $(function(){
        var $container = $("#galeria");
        $container.imagesLoaded(function(){
            $container.masonry({
            itemSelector : 'li',
            columnWidth : 200
            });
        });
    });
   jQuery(document).ready(function($) {
        $("#pre-enviar-imagem").fancybox({
            'padding'       : 0,
            'centerOnScroll' : true
        });
        $("a#pictures").fancybox({
                'transitionIn' : 'none',
                'transitionOut' : 'none',
                'changeSpeed' : 0,
                'changeFade' :    0,
                'padding'       : 0,
                'titlePosition' : 'over',
                'onComplete'    :   function() {
                        $("#galeria-wrap").hover(function() {
                                $("#galeria-title").show();
                        }, function() {
                                $("#galeria-title").hide();
                        });
                }
        });
      });
</script>

希望这对你有用

相关文章：