gpt4 book ai didi

javascript - FancyBox 加载 HTML 页面

转载 作者:太空宇宙 更新时间:2023-11-04 13:13:24 25 4
gpt4 key购买 nike

我正在尝试加载一个包含花式框内的货币转换工具的页面检查无效页面的链接

The link at the bottom of the page should load the fancy box or the Button "Convertir" on the right floating div

我想实现这个目标。但即使我尝试了相同的代码,它也无法正常工作。目前还有另一个代码...在页面上运行,如下所示。

JsFiddle

这是我调用 fancybox 的 html 页面

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

最佳答案

您在第 31 行和第 39 行加载了两个不同的 jQuery 库:

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

需要丢掉其中一个(我建议丢掉 1.5,因为它更老了!)。如果您删除第一个库(较旧的 1.5),请确保也将第二个库包含 (1.10) 移动到第一个库所在的位置,以便它在其他 jquery 相关框架之前被包含。

您还在页面末尾的第 547 行调用了另一个 jQuery 库:

  <script type="text/javascript" src="js/jquery.js"></script>

如果那是一个 jQuery 库,也将其删除(根据该文件名不清楚)。

关于javascript - FancyBox 加载 HTML 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24543103/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com