0
iframeを含む小さなスクリプトがあります。 そのフレームでは、iframeの外にポップアップするためにFancybox経由でイメージを設定しています。iFrameの外でFancyboxをポップアップする方法
私は、彼らが行ったように、IFRAMEの外画像をポップアップし、それがうまく機能している私のサーバ - にそれをアップロードする（右のiframe 2ページを参照してください）画像リンクにthat fancybox optionを実装してみてください。
はこちらを参照してください。ただしMy site
、私はスタンドアローンバージョンでその仕事をしようとするとき、私は応答がないと何も起こりません（手段は、私は、その機能が自分のコンピュータ上でのみ、私のhtmlファイルに仕事をしたいです） 。
私はjsとCSS転送の部分を見逃していましたが、私は確かにi'vが追加され、すべてのjsとcssを正しい場所に追加しました。私は本当になぜそれが動作していないかわからない。
しかし、再び、何もスタンドアロンスクリプトで起こりません：私は必要なもの
はそのようにポップアップするイメージです。ここで
メインページはコードです：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Jose Francisco Diaz/picssel.com" />
<title>call fancybox from an iframe in the parent page</title>
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="fancybox2.0.4/helpers/helper.js" id="zZwx_MainScript"></script>
<link rel="stylesheet" href="fancybox2.0.4/helpers/helper.css" type="text/css" media="all" />
<style type="text/css">
a {outline: 0 none;}
#wrap {
width: 978px;
height: 1000px;
margin: 20px auto;
}
#iframe01 {
width: 450px;
height: 300px;
float: left;
}
#iframe02 {
width: 450px;
height: 300px;
float: right;
}
.spacer {
clear: both;
height: 1px;
display: block;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>
<script type="text/javascript" src="fancybox2.0.4/helpers/jquery.fancybox-buttons.js"></script>
</head>
<body>
<div id="wrap">
<iframe id="iframe01" src="../pages/7.html"></iframe>
<iframe id="iframe02" src="iframedPage02_20apr12.html"></iframe>
<div class="spacer"></div>
</div><!--wrap-->
</body>
</html>
そしてここiframeのページコードです：ここ
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="fancybox2.0.4/helpers/helper.js" id="zZwx_MainScript"></script>
<link rel="stylesheet" href="fancybox2.0.4/helpers/helper.css" type="text/css" media="all" />
<style type="text/css">
#wrap { width: 100%;}
a {outline: 0 none;}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>
<script type="text/javascript" src="fancybox2.0.4/helpers/jquery.fancybox-buttons.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$('.imagen').click(function(e){
e.preventDefault();
parent.$.fancybox([
{href:'img/ebay-home.jpg', title: '01'},
],{
// href: this.href,
helpers: {
overlay: {
opacity: 0.3
} // overlay
//, buttons: {}
} // helpers
}); // fancybox
}); // click
$('.video').click(function(e){
e.preventDefault();
parent.$.fancybox({
href: this.href,
width: 560,
height: 315,
type: 'iframe',
helpers: {
overlay: {
opacity: 0.3
} // overlay
} // helpers
}); // fancybox
}); // click
$(".pdf").click(function(){
parent.$.fancybox({
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
},
helpers: {
overlay: {
opacity: 0.3
} // overlay
}
}); //fancybox
return false;
}); //click
}); // ready
/* ]]> */
</script>
</head>
<body>
<div id="wrap">
<p>Hello, I am the iframed page 02.</p>
<p>Open different type of content (imagen, video and/or pdf) in fancybox outside the iframe in the parent page.</p><br />
<a class="imagen" href="img/ebay-home.jpg">open image gallery</a><br />
<a class="video" href="http://www.youtube.com/embed/3l8MwU0IjMI?autoplay=1">open youtube video</a><br />
<a class="pdf" href="images/Fancybox.pdf">open pdf</a>
</div>
</body>
</html>
そして再びライブです：My site
もう一度、自分のサーバーからではなく、自分のコンピューターで動作させたい。 – StackBuck
iFrameを直接開くとiFrameは機能しません。最善の方法は、あなたのマシンにApacheや他のWebサーバーをインストールし、http：//localhost/project1/index.htmlのようにアクセスすることです。 – Pandiarajan
1つのスクリプトに対してローカルにApacheをインストールしますか？ – StackBuck