jQuery plug-in conflict

Question

So, today I have one more question: HOW I COULD I HAVE BROKEN MASONRY JQUERY AND FANCYBOX (LIGHTBOX) ?

I really need this. I have lost few hours trying solve this by myself, but i really can't. :/

This is my script where I'm calling fancybox and 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>

To be brief, my problem is on overlapping, but as you can see, I'm already using imagesLoaded plug-in, and more. I already tried to set all of images width/height, but it still doesn't work.

Thank you.

I need to press the mouse scroll to work. Ideas?

Answer 1

I rewritten your code:

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

Hope this works on you.