jQuery插件沖突

Question

所以，今天我還有一個問題：我怎么能破壞砌體 JQUERY和FANCYBOX（燈箱） ？

我真的需要這個。 我已經失去了幾個小時試圖自己解決這個問題，但我真的做不到。 ：/

這是我的腳本，我將其稱為 fancybox 和 masonry：

<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 插件等等。 我已經嘗試設置所有圖像的寬度/高度，但它仍然不起作用。

謝謝你。

我需要按鼠標滾動才能工作。 想法？

Answer 1

我重寫了你的代碼：

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

希望這對你有用。