加载HTML页面
FancyBox Loading a HTML page
我正在尝试加载一个包含货币转换工具的页面查看不正常页面的链接
页面底部的链接应该加载右边浮动div上的花哨框或按钮"Convertir"
我想做到这一点。但它不工作，即使我尝试了相同的代码。当前页面上运行着另一个代码，如下所示。
JsFiddle
这是我的html页面调用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">    <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© 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> </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相关框架之前。
你还得到了一个看起来像另一个jQuery库的东西，在你的页面末尾的第547行:
<script type="text/javascript" src="js/jquery.js"></script>
如果这是一个jQuery库，也删除它(不清楚基于该文件名)
相关文章：
- 使用javascript将动态表从一个html页面打印到另一个html页
- 在chrome.tabs.onCreated之后加载HTML页面
- 使用chrome扩展编辑页面html
- 阻止WordPress自动格式化页面HTML
- 如何将数据从一个页面传递到另一个页面html
- 如何使用ceratin Javascript逻辑更新JSP页面html元素
- 我可以通过Javascript从另一个网页获取特定的页面HTML代码吗?
- 淡入 在页面 html 之间淡出并使用数组脚本更改图像
- 我使用XMLHttpRequest作为菜单，当我请求一个包含javascript的页面HTML时，没有任何反应，为什么
- 如何强制浏览器缓存页面.html
- 如何在jQuery中加载页面html和内容(如图像）
- 复制的文件不起作用 - ID在不同页面HTML JavaScript PHP中不起作用
- 如何在没有实际页面刷新的情况下更新页面html和url
- 使用javascript转到另一个页面html
- 如何在页面html区域APEX(Oracle Application Express）上使用共享组件静态文件或CSS文件
- 替换页面html中多次出现的单词
- 如何避免在菜单下拉菜单中重新加载页面?HTML与JQUERY
- 无法重定向其他页面(HTML、Javascript）中的输出
- 提交操作，但显示不同的页面HTML
- 将文本框的值传递给另一个页面html
