同时使用两个jquery插件，其中一个插件的部分效果失效！深夜跪求大神。。

Question

jquery插件fancyboxmasonryjavascripthtml

Answer 1

  $.noConflict();和jQuery.noConflict(); 其实是重复调用了插件，应该是插件是有配置项，启用了相同的配置项后，配置参数是以后者为主，故此。要解决的话：1、更改插件名，分别存为不同的文件。2、采用模块化写代码：jsrequire，可以让代码模块化执行，相互不受影响。

Answer 2

就是页面没报错误才纠结。不过后来我又把使用masonry插件的代码放到另外一个用fancybox插件没出现问题的页面就好了不过还是纠结为什么在这个页面会没效果。。

Answer 3

如果说是以后者为主的话，那我配置的fancybox参数就完全是废了的吧？可是我注释掉scrolling:'visible'后发现这段代码其实是有执行的。
虽然如此，还是按照你说的办法改了下代码，代码如下： <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script>
    <script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
    <script type="text/javascript" src="js/jquery.masonry.min.js"></script>
    <script type="text/javascript">
        var jq = jQuery.noConflict();
        jq(function(){
            var $container = jq('#masonry');
            $container.imagesLoaded( function(){
                $container.masonry({
                    itemSelector : '.post',
                    columnWidth:355,
                    gutterWidth : 10,
                    closeBtn:true,
                    isFitWidth:true,
                    isAnimated: true,
                    overlayShow:true
                });
            });            jq("a.single_image").fancybox({
                padding:0,
                closeBtn:true,
                autoScale:false,
                scrolling:'visible',
                autoDimensions:true,
                hideOnOverlayClick:true            });
        });
    </script>还是不行啊看不到关闭按钮。。

Answer 4

如果说是以后者为主的话，那我配置的fancybox参数就完全是废了的吧？可是我注释掉scrolling:'visible'后发现这段代码其实是有执行的。
虽然如此，还是按照你说的办法改了下代码，代码如下： <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script>
    <script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
    <script type="text/javascript" src="js/jquery.masonry.min.js"></script>
    <script type="text/javascript">
        var jq = jQuery.noConflict();
        jq(function(){
            var $container = jq('#masonry');
            $container.imagesLoaded( function(){
                $container.masonry({
                    itemSelector : '.post',
                    columnWidth:355,
                    gutterWidth : 10,
                    closeBtn:true,
                    isFitWidth:true,
                    isAnimated: true,
                    overlayShow:true
                });
            });            jq("a.single_image").fancybox({
                padding:0,
                closeBtn:true,
                autoScale:false,
                scrolling:'visible',
                autoDimensions:true,
                hideOnOverlayClick:true            });
        });
    </script>还是不行啊看不到关闭按钮。。你的图片弄进去没有，，看不到关闭按钮，那你鼠标移动上去有没有变箭头？有的话就是缺少图片了。

Answer 5

如果说是以后者为主的话，那我配置的fancybox参数就完全是废了的吧？可是我注释掉scrolling:'visible'后发现这段代码其实是有执行的。
虽然如此，还是按照你说的办法改了下代码，代码如下： <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script>
    <script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
    <script type="text/javascript" src="js/jquery.masonry.min.js"></script>
    <script type="text/javascript">
        var jq = jQuery.noConflict();
        jq(function(){
            var $container = jq('#masonry');
            $container.imagesLoaded( function(){
                $container.masonry({
                    itemSelector : '.post',
                    columnWidth:355,
                    gutterWidth : 10,
                    closeBtn:true,
                    isFitWidth:true,
                    isAnimated: true,
                    overlayShow:true
                });
            });            jq("a.single_image").fancybox({
                padding:0,
                closeBtn:true,
                autoScale:false,
                scrolling:'visible',
                autoDimensions:true,
                hideOnOverlayClick:true            });
        });
    </script>还是不行啊看不到关闭按钮。。你的图片弄进去没有，，看不到关闭按钮，那你鼠标移动上去有没有变箭头？有的话就是缺少图片了。我试过了。。鼠标在右上方附近移动都找不到可以使鼠标箭头变成手的按钮T T  不过后来我又把使用masonry插件的代码放到另外一个用fancybox插件没出现问题的页面就好了不过还是纠结为什么在这个页面会没效果。。

Answer 6

 <script type="text/javascript">
        $.noConflict();
        jQuery(function($){
            $("a.single_image").fancybox({
                padding:0,
                closeBtn:true,
                autoScale:false,
                scrolling:'visible',
                autoDimensions:true,
                hideOnOverlayClick:true
 
            });
        });
    </script>
    <script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
    <script type="text/javascript" src="js/jquery.masonry.min.js"></script>
    <script type="text/javascript">
        var jq = jQuery.noConflict();
        jq(function(){
            var $container = jq('#masonry');
            $container.imagesLoaded( function(){
                $container.masonry({
                    itemSelector : '.post',
                    columnWidth:355,
                    gutterWidth : 10,
                    isFitWidth:true,
                    isAnimated: true,
                    overlayShow:true
                });
            });
        });
    </script>总觉得你样写，好像有问题
你可以把两件插件自己封装一下，然后自己以对象的形式调用 
比如以下这也是我用到的extjs4的表格插件，我自己封闭了一下,代码：function ObjGrid() {    //实体类列值
    this.cmValue = "";
    //数据源列
    this.storeValue = "";
    this.toDivId = "";
    this.ajaxUrl = "";
    this.pagesize = 0;
    this.toolBarObj = null;
    this.IsChecked = false;    this.GridHeight = "";
    this.GridID = "";
    this.GridWidth = "auto";    this.setGridWidth = function (w) {
        this.GridWidth = w;
    }
    this.setGridID = function (i) {
        this.GridID = i;
    }
    this.setHeight = function (h) {
        this.GridHeight = h;
    }
    this.smck = "";
    this.setIsCheckBox = function (c) {
        this.IsChecked = c;
        if (this.IsChecked) {
            this.smck = new Ext.grid.CheckboxSelectionModel();
        }
        else {
            this.smck = new Ext.grid.CheckboxSelectionModel({ singleSelect: true });
        }
    }
    this.setToolbar = function (t) {
        this.toolBarObj = t;
    }
    this.setPageSize = function (s) {
        this.pagesize = s;
    }
    //异步路径
    this.setAjaxUrl = function (u) {
        this.ajaxUrl = u;
    }
    //渲染
    this.setDivId = function (d) {
        this.toDivId = d;
    }
    this.setCMValue = function (c) {
        this.cmValue = eval('[' + c + ']');
    }
    this.setStoreValue = function (s) {
        this.storeValue = eval('[' + s + ']');
    }
    this.IsPageDown = false;
    this.setIsPageDown = function (f) {
        this.IsPageDown = f;
    }
    this.ajaxdata = "";
    //异步获取数据
    this.grid = null;
    this.dstore = null;
    //创建grid
    this.createGrid = function () {
        //创建实体
        var cm = new Ext.grid.ColumnModel(
                    this.cmValue
            );        //数据源
        this.dstore = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({ url: this.ajaxUrl, method: 'GET' }),
            reader: new Ext.data.JsonReader
            ({
                totalProperty: 'pageCount',
                root: 'rowslist',
                fields: this.storeValue
            })
        });
        // var start = 0;        //分页控件
        var pageTool = new Ext.PagingToolbar({
            plugins: [new Ext.ui.plugins.SliderPageSize(), new Ext.ui.plugins.ComboPageSize({ addToItem: false, prefixText: '每页', postfixText: '条' })],
            store: this.dstore,
            pageSize: this.pagesize,
            beforePageText: "第",
            afterPageText: "/ {0}页",
            firstText: "首页",
            prevText: "上一页",
            nextText: "下一页",
            lastText: "尾页",
            refreshText: "刷新",
            displayInfo: true,
            displayMsg: "总共 {2} 条记录",
            emptyMsg: "没有记录"
        });
        //初始grid        if (this.IsPageDown) {
            this.grid = new Ext.grid.GridPanel({
                id: this.GridID,
                xtype: 'grid',
                store: this.dstore,
                height: this.GridHeight,
                layout: 'fit',
                width: this.GridWidth,
                border: false,
                cm: cm,
                viewConfig: {
                    columnsText: "显示/隐藏列",
                    sortAscText: "正序排列",
                    sortDescText: "倒序排列",
                    forceFit: false
                },
                tbar: this.toolBarObj,
                sm: this.smck,
                bbar: pageTool
            });
        }
        else {
            this.grid = new Ext.grid.GridPanel({
                id: this.GridID,
                xtype: 'grid',
                store: this.dstore,
                height: this.GridHeight,
                layout: 'fit',
                width: this.GridWidth,
                border: false,
                cm: cm,
                viewConfig: {
                    columnsText: "显示/隐藏列",
                    sortAscText: "正序排列",
                    sortDescText: "倒序排列",
                    forceFit: false
                },
                tbar: this.toolBarObj,
                sm: this.smck
            });
        }
        //注册双击事件
        this.grid.on("rowdblclick", function (thisGrid, rowIndex, e) {
            var row = thisGrid.getStore().getAt(rowIndex).data;
            GridDoubleClick(row);
        });        //注册单击事件
        this.grid.on("rowclick", function (thisGrid, rowIndex, e) {
            var row = thisGrid.getStore().getAt(rowIndex).data;
            var rows = thisGrid.getSelectionModel().getSelections();
            GridSingleClick(row, rows);
        });
        //  this.grid.render();
        //加载
        this.dstore.load({ params: { start: 0, limit: this.pagesize} });        return this.grid;
    }    this.GetSelectedRows = function () {
        var rows = Ext.getCmp(this.GridID).getSelectionModel().getSelections();
        return rows;
    }    this.GetAllRows = function () {
        var rows = Ext.getCmp(this.GridID).getStore().getRange(0, this.dstore.getCount());
        return rows;
    }
    //刷新
    this.ReLoadGrid = function () {
        this.dstore.load({ params: { start: 0, limit: this.pagesize} });
    }
    //grid自适应宽高  gObj 网格控件对象
    this.GridReSize = function (gObj) {
        var o = parent.GetPanelSize();
        var panelHeight = o.el.dom.clientHeight;
        var panelWidth = o.el.dom.clientWidth;
        gObj.grid.setHeight(panelHeight - 29);
        gObj.grid.setWidth(panelWidth - 2);
    }}
然后在页面调用 就是：
ObjGrid obj = new ObjGrid();
obj.属性，
obj.方法
这样就是以对象的形式，不会出现重复，覆盖的现象。你可以参考