jQuery与MegaMenu和FancyBox冲突

时间：2014-01-22 16:59:30

标签： jquery html

我有一个jquery插件菜单（jQuery Mega下拉菜单插件v 1.3.3）和一个jquery fancybox插件在同一页面上。两者都使用不同版本的jQuery：

MegaMenu - http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

FancyBox - jquery-1.10.1.min.js

这会导致fancybox根本不起作用，有没有办法像创建fancybox之前我可以调用的某种“清除”功能一样？

谢谢， 萨姆

HTML 

<html xmlns="http://www.w3.org/1999/xhtml">

                               

<link href="css/nav/dcmegamenu.css" rel="stylesheet" type="text/css" />

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/source/jquery.fancybox.css?v=2.1.5" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

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


        $('#mega-menu-1').dcMegaMenu({
            rowItems: '6',
            speed: 0,
            effect: 'slide',
            event: 'click',
            fullWidth: true,
            onLoad: function () {
                var w = $('.menu-container').width();
                var x = $('.mega-menu').width();
                var m = (w - x) / 2;
                $('.mega-menu-1').css({ marginLeft: m + 'px' });
                $('.mega-menu-1 li').css({ visibility: 'visible' });


            }
        });

        var sum = 0;
        $('#mega-menu-1 li').each(function () { sum += $(this).width(); });
        $('#mega-menu-1 li:first').css("margin-left", ($("#mega-menu-1").width() - sum) / 2);







        /*
         *  Simple image gallery. Uses default settings
         */
        $.noConflict();
        $('.fancybox').fancybox();

        /*
         *  Different effects
         */

        // Change title type, overlay closing speed
        $(".fancybox-effects-a").fancybox({
            helpers: {
                title: {
                    type: 'outside'
                },
                overlay: {
                    speedOut: 0
                }
            }
        });

        // Disable opening and closing animations, change title type
        $(".fancybox-effects-b").fancybox({
            openEffect: 'none',
            closeEffect: 'none',

            helpers: {
                title: {
                    type: 'over'
                }
            }
        });

        // Set custom style, close if clicked, change title type and overlay color
        $(".fancybox-effects-c").fancybox({
            wrapCSS: 'fancybox-custom',
            closeClick: true,

            openEffect: 'none',

            helpers: {
                title: {
                    type: 'inside'
                },
                overlay: {
                    css: {
                        'background': 'rgba(238,238,238,0.85)'
                    }
                }
            }
        });

        // Remove padding, set opening and closing animations, close if clicked and disable overlay
        $(".fancybox-effects-d").fancybox({
            padding: 0,

            openEffect: 'elastic',
            openSpeed: 150,

            closeEffect: 'elastic',
            closeSpeed: 150,

            closeClick: true,

            helpers: {
                overlay: null
            }
        });

        /*
         *  Button helper. Disable animations, hide close button, change title type and content
         */

        $('.fancybox-buttons').fancybox({
            openEffect: 'none',
            closeEffect: 'none',

            prevEffect: 'none',
            nextEffect: 'none',

            closeBtn: false,

            helpers: {
                title: {
                    type: 'inside'
                },
                buttons: {}
            },

            afterLoad: function () {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            }
        });


        /*
         *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
         */

        $('.fancybox-thumbs').fancybox({
            prevEffect: 'none',
            nextEffect: 'none',

            closeBtn: false,
            arrows: false,
            nextClick: true,

            helpers: {
                thumbs: {
                    width: 50,
                    height: 50
                }
            }
        });

        /*
         *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
        */
        $('.fancybox-media')
            .attr('rel', 'media-gallery')
            .fancybox({
                openEffect: 'none',
                closeEffect: 'none',
                prevEffect: 'none',
                nextEffect: 'none',

                arrows: false,
                helpers: {
                    media: {},
                    buttons: {}
                }
            });

        /*
         *  Open manually
         */


        $("#fancybox-manual-a").click(function () {
            $.fancybox.open('/img/content/thomas_q_bio.png');
        });

        $("#christopher_g").click(function () {
            $.fancybox.open('/img/content/christopher_g_bio.png');
        });

        $("#amy_f").click(function () {
            $.fancybox.open('/img/content/amy_f_bio.png');
        });

        $("#denise_p").click(function () {
            $.fancybox.open('/img/content/denise_p_bio.png');
        });

        $("#karen_m").click(function () {
            $.fancybox.open('/img/content/karen_m_bio.png');
        });

        $("#nick_v").click(function () {
            $.fancybox.open('/img/content/nick_v_bio.png');
        });

        $("#matt_k").click(function () {
            $.fancybox.open('/img/content/matt_k_bio.png');
        });

        $("#kitty_m").click(function () {
            $.fancybox.open('/img/content/kitty_m_bio.png');
        });

        $("#larry_w").click(function () {
            $.fancybox.open('/img/content/larry_w_bio.png');
        });

        $("#kathy_s").click(function () {
            $.fancybox.open('/img/content/kathy_s_bio.png');
        });

        $("#fancybox-manual-b").click(function () {
            $.fancybox.open({
                href: 'iframe.html',
                type: 'iframe',
                padding: 5
            });
        });

        $("#fancybox-manual-c").click(function () {
            $.fancybox.open([
                {
                    href: '1_b.jpg',
                    title: 'My title'
                }, {
                    href: '2_b.jpg',
                    title: '2nd title'
                }, {
                    href: '3_b.jpg'
                }
            ], {
                helpers: {
                    thumbs: {
                        width: 75,
                        height: 50
                    }
                }
            });
        });


    });

</script>

<style type="text/css">
    .fancybox-custom .fancybox-skin {
        box-shadow: 0 0 50px #222;
    }

</style>

                             

            <table style="background-image:url('img/transparent.png');width:100%"  cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center">



                         <table id="header" border="0" class="tableHeader" cellpadding="0" cellspacing="0">
        <tr>
            <td class="headerTD" align="left" valign="top" style="padding:20px;width:25%;">

                <span style="padding:20px;"><font face="crimsonHeader" size="4pt">Contact</font></span>

                <span style="padding:20px;"><font face="crimsonHeader" size="4pt">ADV</font></span>

                <span style="padding:20px;"><font face="crimsonHeader" size="4pt">FAQs</font></span>
            </td>
            <td align="center" style="width:50%;" >
                <a href="Home"><img src="img/content/logo.png" border="0" alt="Home" /></a>
            </td>
            <td class="loginHeader" align="right" valign="top">
                <span style="padding:20px;vertical-align:top;"><font face="crimson" size="4pt">Login</font></span>
            </td>
        </tr>

    </table>

                       </td>

                </tr>

            </table>
        
  • ABOUT         
                  
    • TEAM     
                
      • 阅读我们的简介，了解我们是多么棒。
        •     
          
      •     
    • 史     
                
      • 时间轴展示了持续增长和数十年的经验。
        •     
      •     
    • 诺丁汉的方式     
                
      • 从甲板开始我们的流程页面，将以悬停和动态内容为特色。
        •     
      •     NAAM BLOG     
                
      • 从甲板开始我们的流程页面，将以悬停和动态内容为特色
        •     
                       任务     
                
      • 阅读我们的简介，了解我们是多么棒。
        •     
          CLIENTS     
                
      • 时间轴展示了持续增长和数十年的经验。
        •     
        
  • 解         
                  
    • 全球指数     
                
      • 我们的全球指数策略采用独特的资产配置方法。
        •     
          
      •     
    • 固定收入     
                
      • 我们为个人和机构提供定制的固定收益解决方案。
        •     
      •     
    • 经理人计划     
                
      • 我们的精选经理人计划利用积极管理的开放式基金。
        •     
      •     ETF策略     
                
      • 成功的财务顾问绝大多数转向以客户为中心的模式。
        •     
  • 的ETF         
                  
    • ETF优势     
                
      • 使用ETF优于传统共同基金和股票的优势。
        •     
          
      •     
    • ETF的增长     
                
      • 了解诺丁汉如何成为业内ETF的早期采用者，以及我们如何成为该领域的领导者。
        •     
    •        </td>
   </tr>

                                            

                <table cellpadding="0" cellspacing="0" style="padding:0px;" border="1">
                <tr>
                    <td>
                        <a id="fancybox-manual-a" href="javascript:;"><img src="/img/content/thomas_q.jpg" border="0" /></a>
                    </td>
                    <td>
                        <a id="christopher_g" href="javascript:;"><img src="/img/content/christopher_g.jpg" border="0" /></a>
                    </td>
                    <td>
                        <a id="amy_f" href="javascript:;"><img src="/img/content/amy_f.jpg" border="0" /></a>
                    </td>
                    <td>
                        <a id="denise_p" href="javascript:;"><img src="/img/content/denise_p.jpg" border="0" /></a>
                    </td>
                    <td>
                        <a id="karen_m" href="javascript:;"><img src="/img/content/karen_m.jpg" border="0" style="display:block;" /></a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a id="nick_v" href="javascript:;"><img src="/img/content/nick_v.jpg" border="0" style="display:block;" /></a>
                    </td>
                    <td>
                        <a id="matt_k" href="javascript:;"><img src="/img/content/matt_k.jpg" border="0" style="display:block;" /></a>
                    </td>
                     <td>
                        <a id="kitty_m" href="javascript:;"><img src="/img/content/kitty_m.jpg" border="0" style="display:block;" /></a>
                    </td>
                    <td>
                        <a id="larry_w" href="javascript:;"><img src="/img/content/larry_w.jpg" border="0" style="display:block;" /></a>
                    </td>
                     <td>
                        <a id="kathy_s" href="javascript:;"><img src="/img/content/kathy_s.jpg" border="0" style="display:block;" /></a>
                    </td>
                </tr>
            </table>

        </td>
    </tr>
</table>
    </td></tr>
</table>

        

    1 个答案:

    答案 0 :(得分：0)

    您可以使用jQuery调用noconflict，这样它们就不会发生冲突。 

    $.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
$('yourfancyboxselector').fancybox();
});

    更新：

    尝试创建另一个jQuery变量来调用fancybox函数

    var j = jQuery.noConflict();
// Do something with jQuery
j( "fancyboxselector" ).fancybox();
    相关问题
    最新问题