Javascript FancyBox加载HTML页面

Javascript FancyBox加载HTML页面,javascript,jquery,html,css,fancybox,Javascript,Jquery,Html,Css,Fancybox,我正在尝试加载一个页面,其中包含一个货币转换工具在fancy box中 查看“不工作”页面的链接 我希望做到这一点。但即使很难也不行我试过同样的代码。目前,页面上运行着另一个代码,如下所示 这是我的htlm页面,调用fancybox <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

我正在尝试加载一个页面,其中包含一个货币转换工具在fancy box中 查看“不工作”页面的链接

我希望做到这一点。但即使很难也不行我试过同样的代码。目前,页面上运行着另一个代码,如下所示

这是我的htlm页面,调用fancybox

        <!DOCTYPE  html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Pourvoirie, Inukshuk, chasse, bécasse,raid, gélinotte, perdrix, chevreuil, ours, ours 
    noir, cerf de virginie, lièvre, bernache, canard, Baskatong, Canada, Québec, Laurentides, 
    Outaouais, motoneige, hiver, pêche, dorée, truite, brochet, ouananiche, esturgeon, achigan, 
    moucheté, hors-piste, poudreuse, tout inclus, chalet, vacances, photo, video, raquette, ski de 
    fond, pêche blanche, chien de traineau,raid</title>
            <meta name="keywords" content="Pourvoirie, Inukshuk, chasse, bécasse,raid, gélinotte, perdrix, 
    chevreuil, ours, ours noir, cerf de virginie, lièvre, bernache, canard, Baskatong, Canada, 
    Québec, Laurentides, Outaouais, motoneige, hiver, pêche, dorée, truite, brochet, ouananiche, 
    esturgeon, achigan, moucheté, hors-piste, poudreuse, tout inclus, chalet, vacances, raquette, 
    ski de fond, pêche blanche, chien de traineau,raid">
            <meta name="description" content="Pourvoirie Inukshuk, organisation de forfaits personnalisés de 
    chasse à la bécasse, cerf de virginie, ours noir. Circuits de motoneige guidés en pistes 
    balisées et hors-piste,raid">
            <!-- CSS -->
            <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
            <link rel="stylesheet" href="css/social-icons.css" type="text/css" media="screen" />
            <!--[if IE 8]>
                <link rel="stylesheet" type="text/css" media="screen" href="css/ie8-hacks.css" />
            <![endif]-->
            <!-- ENDS CSS -->   

            <!-- GOOGLE FONTS 
            <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>-->
            <!-- Converter -->  
            <link href="http://www.pourvoirieinukshuk.com/css/13_black_green/css/www_rate_calc_frame.css" rel="stylesheet" title="stylesheet" type="text/css" />
            <!-- JS -->
            <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
            <script type="text/javascript" src="js/easing.js"></script>
            <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
            <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
            <script type="text/javascript" src="js/custom.js"></script>

                <!-- Add jQuery library -->
        <script type="text/javascript" src="fancyBox/lib/jquery-1.10.1.min.js"></script>

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

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

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

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

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




            <!-- Nivo slider -->
            <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
            <script src="js/nivo-slider/jquery.nivo.slider.js" type="text/javascript"></script>
            <!-- ENDS Nivo slider -->

            <!-- tabs -->
            <link rel="stylesheet" href="css/tabs.css" type="text/css" media="screen" />
            <script type="text/javascript" src="js/tabs.js"></script>
            <!-- ENDS tabs -->


            <!-- superfish -->
            <link rel="stylesheet" media="screen" href="css/superfish.css" /> 
            <link rel="stylesheet" media="screen" href="css/superfish-left.css" /> 
            <script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script>
            <script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script>
            <script type="text/javascript" src="js/superfish-1.4.8/js/supersubs.js"></script>
            <!-- ENDS superfish -->

            <!-- poshytip -->
            <link rel="stylesheet" href="js/poshytip-1.0/src/tip-twitter/tip-twitter.css" type="text/css" />
            <link rel="stylesheet" href="js/poshytip-1.0/src/tip-yellowsimple/tip-yellowsimple.css" type=
    "text/css" />
            <script type="text/javascript" src="js/poshytip-1.0/src/jquery.poshytip.min.js"></script>
            <!-- ENDS poshytip -->

            <!-- Tweet -->
            <link rel="stylesheet" href="css/jquery.tweet.css" media="all"  type="text/css"/> 
            <script src="js/tweet/jquery.tweet.js" type="text/javascript"></script> 
            <!-- ENDS Tweet -->



        <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-45999659-1', 'pourvoirieinukshuk.com');
      ga('send', 'pageview');

    </script>
            <script type="text/javascript">
            $(document).ready(function() {
                /*
                 *  Simple image gallery. Uses default settings
                 */

                $('.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('1_b.jpg');
                });

                $("#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>

    </head>

        <body id="body_chevreuil">

                <!-- HEADER -->
                <div id="header">

                    <!-- wrapper-header -->
                    <div class="wrapper">
                        <a href="index.html"><img id="logo" src="images/moy/pourvoirieinukshukchasse.png" alt
    ="Meilleure pourvoirie en Amérique du nord" /></a>

                        <!-- search -->
                        <div class="top-search">
                                    <iframe marginheight="0" marginwidth="0" name="wxButtonFrame" id=
    "wxButtonFrame" height="110" src="
    http://btn.meteomedia.ca/weatherbuttons/template5.php?placeCode=CAQC0354&c
    ategory0=Cities&placeCode1=CAQC0185&category1=Cities&containerWidth=150&bt
    nNo=&backgroundColor=blue&multipleCity=1&citySearch=0&celsiusF=C" align=
    "top" frameborder="0" width="150" scrolling="no" allowTransparency="true"
    ></iframe>
                        </div>
                        <!-- ENDS search -->
                    </div>
                    <!-- ENDS wrapper-header -->                    
                </div>
                <!-- ENDS HEADER -->

                <!-- Menu -->
                <div id="menu">



                    <!-- ENDS menu-holder -->
                    <div id="menu-holder">
                        <!-- wrapper-menu -->
                        <div class="wrapper">
                            <!-- Navigation -->
                            <ul id="nav" class="sf-menu">
                                <li><a href="index.html">Accueil<span class="subheader">Bienvenue
    </span></a></li>
                                <li class="current-menu-item"><a href="features.html">Forfaits<span class=
    "subheader">Mémorables</span></a>
                                    <ul>
                                        <li><a href="forfaitsmotoneige.html"><span>Forfaits Motoneige
    </span></a></li>
                                        <li><a href="chasses.html"><span>Forfaits Chasse</span></a></li>
                                        <li><a href="peche.html"><span>Forfaits Pêche</span></a></li>
                                        <li><a href="forfaitsactivites.html"><span>Forfaits Aviation et Quad
    </span></a></li>
                                        <li><a href="hebergement.html"><span>Forfaits Hébergement
    </span></a></li>
                                    </ul>
                                </li>

                                <li><a href="gallerie.html">Galerie<span class="subheader">Images & Vidéos
    </span></a></li>
                                <li><a href="contact.html">Contact<span class="subheader">Contactez nous
    </span></a></li><li></li><li></li><li></li><li style="padding-top:20px; 
    color:#DBDBDB;"><h1>819-430-2831</h1></li><li></li><li></li><li></li><li><a 
    href="http://www.pourvoirieinukshuk.com/en/index.html">English <span class=
    "subheader">&nbsp&nbsp&nbsp&nbsp<img src="img/social-icons/english.png" width
    ="24" height="18"/></a></li>
                            </ul>
                            <!-- Navigation -->

                        </div>
                        <!-- wrapper-menu -->
                    </div>
                    <!-- ENDS menu-holder -->
                </div>
                <!-- ENDS Menu -->




                <!-- MAIN -->
                <div id="main">



                        <!-- content -->
                        <div id="content">


                                <!-- the tabs -->
                                <ul class="tabs">
                                    <li><a href="#"><span>Nos Chasses au chevreuil</span></a></li>

                                </ul>
                                        <br>            

                                <table class="prices">
                                <tr width="966">

                                            <td id="noBorder"><center>
                                            <div id="pricing-table" >
                                                    <div class="plan" id="most-popular">
                                                        <h3>Plan Américain<span>$2500</span></h3><li><b>
    Toutes taxes comprises</b></li>

                                                        <a class="signup" href="forfaitchevreuilus.html">Voir
    </a>         
                                                        <ul>
                                                            <li><b>7 Nuits</b> Hébergement</li>
                                                            <li><b>6 Jours</b> Chasse</li>
                                                            <li><b>Inclus</b> 3 repas/jour</li>
                                                            <li><b>Inclus</b> Transport Aéroport</li>

                                                        </ul> 
                                                    </div>
                                                    </div>
                                                    </td>

                                                  <td id="noBorder"><center>
                                            <div id="pricing-table" >
                                                  <div class="plan">
                                                        <h3>Location territoire<br>Carabine<span>$2000
    </span></h3><li><b>Toutes taxes comprises</b></li>

                                                        <a class="signup" href=
    "forfaitchevreuillocationcarabine.html">Voir</a>

                                                        <ul>
                                                            <li><b>Période de chasse à la Carabine</b></li>
                                                            <li><b>313 acres privés</b></li>
                                                            <li><b>Possibilité d'installer votre roulotte
    </b></li>
                                                            <li><b>Rivière-Rouge, Qc.</b></li>

                                                        </ul> 
                                                    </div>
                                                            </div>
                                                    </td>

    <td id="noBorder"><center>
                                            <div id="pricing-table" >

                                              <div class="plan">
                                                        <h3>Location territoire<br>Arc<span>$1500
    </span></h3><li><b>Toutes taxes comprises</b></li>

                                                        <a class="signup" href=
    "forfaitchevreuillocationarc.html">Voir</a>

                                                        <ul>
                                                            <li><b>Période de chasse à la Carabine</b></li>
                                                            <li><b>313 acres privés</b></li>
                                                            <li><b>Possibilité d'installer votre roulotte
    </b></li>
                                                            <li><b>Rivière-Rouge, Qc.</b></li>

                                                        </ul> 
                                                    </div>


                                                </div>

                                    </td>



                                </tr>
                                </table>    

                                <!-- ENDS FORFAITS -->              

                        </div>
                        <!-- ENDS content -->


                </div>
                <!-- ENDS MAIN -->

                <!-- Twitter -->
                <div id="twitter">
                    <div class="wrapper">
                        <a href="#" id="prev-tweet"></a>
                        <a href="#" id="next-tweet"></a>
                        <img id="bird" src="img/bird.png" alt="Tweets" />
                        <div id="tweets">
                            <ul class="tweet_list">


                            </ul>
                        </div>
                    </div>
                </div>
                <!-- ENDS Twitter -->


                <!-- FOOTER -->
                <div id="footer">
                    <!-- wrapper-footer -->
                    <div class="wrapper">
                        <!-- footer-cols -->
                        <ul id="footer-cols">
                            <li class="col" align="justify">
                                <h6>Pages</h6>
                                <ul>
                                    <li class="page_item"><a href="index.html">Accueil</a></li>
                                    <li class="page_item"><a href="features.html">Forfaits</a></li>
                                    <li class="page_item"><a href="gallerie.html">Galerie</a></li>
                                    <li class="page_item"><a href="contact.html">Contact</a></li>
                                </ul>
                            </li>

                            <li class="col" align="justify">
                                <h6>Categories</h6>
                                <ul>
                                    <li><a href="forfaitsmotoneige.html">Motoneige</a></li>
                                    <li><a href="chasses.html">Chasse</a></li>
                                    <li><a href="peche.html">Pêche</a></li>
                                    <li><a href="forfaitsactivites.html">Aviation et Quad</a></li>
                                    <li><a href="hebergement.html">Hébergement</a></li>
                                </ul>
                            </li>
                            <li class="col" align ="justify">
                                <h6>À Propos de nous</h6>
                                Fort de nos nombreuses années d’expérience dans le tourisme de chasse, de 
    pêche et de motoneige, l’équipe de la Pourvoirie Inukshuk s’engage à vous 
    apporter satisfaction! Tous nos forfaits sont adaptables à vos besoins et il 
    nous fera plaisir d’organiser votre séjour selon vos standards et d’ajuster 
    le tarif en conséquence des services que vous désirez. Par exemple, vous 
    aurez le loisir de louer votre propre véhicule pour assurer vos déplacements 
    ou de préparer vos propres repas dans vos chalets. Vous serez reçus dans un 
    contexte convivial et très agréable, voilà notre garantie!
                            </li>

                        </ul>
                        <!-- ENDS footer-cols -->
                    </div>
                    <!-- ENDS wrapper-footer -->
                </div>
                <!-- ENDS FOOTER -->


                <!-- Bottom -->
                <div id="bottom">
                    <!-- wrapper-bottom -->
                    <div class="wrapper">
                        <div id="bottom-text">Pourvoirie Inukshuk&copy tous droits réservés. </a>Tous nos 
    tarifs inclus les taxes!  </div>
                        <!-- Social -->
                        <ul class="social "><li><a href=
    "http://www.linkedin.com/profile/view?id=295703849&trk=nav_responsive_tab_profile/" 
    class="poshytip  linkedin" title="LinkedIn"></a></li>
                            <li><a href="https://www.facebook.com/groups/1428569784023359/" class="poshytip  
    facebook" title="Devenez un fan"></a></li>
                            <li><a href="http://www.twitter.com" class="poshytip twitter" title="Suivez nos 
    tweet"></a></li>
                            <li><a href="https://www.youtube.com/channel/UCyuVjE4R4lDJKNGiQTWgPxg" class=
    "poshytip youtube" title="Suivez nos vidéos sur YouTube"></a></li><li><a href=
    "http://www.pourvoiries.com/" class="poshytip fpq" title="Membre de la 
    Fédération des Pourvoirie du Québec"></a></li>
                        </ul>
                        <!-- ENDS Social -->
                        <div id="to-top" class="poshytip" title="Vers le haut"></div>
                    </div>
                    <!-- ENDS wrapper-bottom -->
                </div>
                <!-- ENDS Bottom -->

             <p>&nbsp;</p>
        <!-- javascript at the bottom for fast page loading -->
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
      <script type="text/javascript" src="js/jquery.sooperfish.js"></script>
      <script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
        <div id="rp_list" class="rp_list">
                <ul>
                    <li>
                        <div>
                            <img src="images/icons/currency.png" alt=""/>
                            <span class="rp_title">
                        Convertisseur de devises

                            </span>
                            <span class="rp_links">
                                <a class="fancybox" href="#inline1" title="Lorem ipsum dolor sit amet">Convertir</a>

                            </span>
                        </div>
                    </li>

                </ul>

            </div>
            <br><br>
                <a class="fancybox" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a>

    <div id="inline1" style="width:400px;display: none;">
            <h3>Etiam quis mi eu elit</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
            </p>
        </div>
            <script>
                $(function() {
                    /**
                    * the list of posts
                    */
                    var $list       = $('#rp_list ul');
                    /**
                    * number of related posts
                    */
                    var elems_cnt       = $list.children().length;

                    /**
                    * show the first set of posts.
                    * 200 is the initial left margin for the list elements
                    */
                    load(200);

                    function load(initial){
                        $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
                        var loaded  = 0;
                        //show 5 random posts from all the ones in the list. 
                        //Make sure not to repeat
                        while(loaded < 1){
                            var r       = Math.floor(Math.random()*elems_cnt);
                            var $elem   = $list.find('li:nth-child('+ (r+1) +')');
                            if($elem.is(':visible'))
                                continue;
                            else
                                $elem.show();
                            ++loaded;
                        }
                        //animate them
                        var d = 200;
                        $list.find('li:visible div').each(function(){
                            $(this).stop().animate({
                                'marginLeft':'-50px'
                            },d += 100);
                        });
                    }

                    /**
                    * hovering over the list elements makes them slide out
                    */  
                    $list.find('li:visible').live('mouseenter',function () {
                        $(this).find('div').stop().animate({
                            'marginLeft':'-220px'
                        },200);
                    }).live('mouseleave',function () {
                        $(this).find('div').stop().animate({
                            'marginLeft':'-50px'
                        },200);
                    });

                    /**
                    * when clicking the shuffle button,
                    * show 5 random posts
                    */
                    $('#rp_shuffle').unbind('click')
                                    .bind('click',shuffle)
                                    .stop()
                                    .animate({'margin-left':'-18px'},700);

                    function shuffle(){
                        $list.find('li:visible div').stop().animate({
                            'marginLeft':'60px'
                        },200,function(){
                            load(-60);
                        });
                    }
                });
            </script>

        </body>
    </html>

波尔沃里、因克斯舒克、查塞、贝卡斯、雷德、盖利诺特、佩德里克斯、切弗雷伊、我们的、我们的
黑皮、维吉尼亚州塞尔夫、利耶夫、伯纳奇、鸭、巴斯卡通、加拿大、魁北克、劳伦斯、,
奥塔乌阿瓦伊斯、摩托内日、海弗、佩切、多雷、特鲁伊特、布罗谢、瓦纳利基、埃斯特尔根、阿基根、,
moucheté、hors piste、poudreuse、tout inclus、小屋、度假、照片、视频、拉奎特、滑雪场
fond,pèche blanche,钱德特莱诺,袭击
(函数(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]| |函数(){
(i[r].q=i[r].q | |[]).push(参数)},i[r].l=1*新日期();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(窗口,文档,“脚本”,“www.google-analytics.com/analytics.js”,“ga”);
ga(“创建”、“UA-45999659-1”、“pourvoirieinukshuk.com”);
ga(‘发送’、‘页面浏览’);
$(文档).ready(函数(){
/*
*简单图像库。使用默认设置
*/
$('.fancybox').fancybox();
/*
*不同效果
*/
//更改标题类型、覆盖关闭速度
$(“.fancybox-effects-a”).fancybox({
助手:{
标题:{
类型:“外部”
},
覆盖:{
加速输出:0
}
}
});
//禁用打开和关闭动画,更改标题类型
$(“.fancybox-effects-b”).fancybox({
openEffect:'无',
closeEffect:'无',
助手:{
标题:{
键入:“结束”
}
}
});
//设置自定义样式,单击后关闭,更改标题类型和覆盖颜色
$(“.fancybox-effects-c”).fancybox({
wrapCSS:“fancybox定制”,
closeClick:true,
openEffect:'无',
助手:{
标题:{
类型:“内部”
},
覆盖:{
css:{
‘背景’:‘rgba(238,0.85)’
}
}
}
});
//删除填充,设置打开和关闭动画,单击后关闭并禁用覆盖
$(“.fancybox-effects-d”).fancybox({
填充:0,
openEffect:'弹性',
开放速度:150,
闭合效应:“弹性”,
接近速度:150,
closeClick:true,
助手:{
覆盖:空
}
});
/*
*按钮助手。禁用动画,隐藏关闭按钮,更改标题类型和内容
*/
$('.fancybox按钮').fancybox({
openEffect:'无',
closeEffect:'无',
效果:“无”,
下一个效果:“无”,
closeBtn:false,
助手:{
标题:{
类型:“内部”
},
按钮:{}
},
后加载:函数(){
this.title='Image'+(this.index+1)+'of'+this.group.length+(this.title?'-'+this.title:'');
}
});
/*
*缩略图帮助程序。禁用动画、隐藏关闭按钮、箭头,并在单击时滑动到下一个库项目
*/
$('.fancybox拇指')。fancybox({
效果:“无”,
下一个效果:“无”,
closeBtn:false,
箭头:错,
下一步:没错,
助手:{
拇指:{
宽度:50,
身高:50
}
}
});
/*
*媒体助手。分组项目、禁用动画、隐藏箭头、启用媒体和按钮助手。
*/
$(“.fancybox媒体”)
.attr('rel','media gallery')
.fancybox({
openEffect:'无',
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="fancyBox/lib/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.js"></script>