부모님의 iframe에서 Fancybox로 전화하십시오.

2 페이지, 내 index.html 및 social.html이 있습니다. 내 인덱스를 청소하고 jquery 코드가 필요합니다. fancybox해야합니다. 내가하려고하는 것은 social.html 내부에 이미지가있는 것입니다. 클릭하면 fancybox가 열리고 표시되지만 iframe 내부가 아닌 index.html에 표시됩니다. . 이 때 나타나는 오류는 다음과 같습니다부모님의 iframe에서 Fancybox로 전화하십시오.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" /> 
<script type="text/javascript" src="js/video.js"></script> 
<script type="text/javascript"> 
     function showImage(image) { 
      $.fancybox('<img src="img/' + image + '" alt="" border="0" />'); 
     }; 
</script> 

</head> 

<body> 
<iframe src="social.html" scrolling="no" border="0" width="579" height="505" allowtransparency="true"></iframe> 
</body> 
</html>

IFrame을 페이지 :

<img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>

PS : 이것은 내 index.html을

Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function 
(anonymous function)social.html:103 
    onclick

모두 페이지가 동일한 도메인에있는이 ... EDIT : video.js -> 이것은 fancybox에서 가져온 것입니다.

jQuery(document).ready(function() { 

    $(".video").click(function() { 
     $.fancybox({ 
      'padding'  : 0, 
      'autoScale'  : false, 
      'transitionIn' : 'none', 
      'transitionOut' : 'none', 
      'title'   : this.title, 
      'width'   : 640, 
      'height'  : 385, 
      'href'   : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
      'type'   : 'swf', 
      'swf'   : { 
      'wmode'    : 'transparent', 
      'allowfullscreen' : 'true' 
      } 
     }); 

     return false; 
    }); 



});

출처

2012-01-13 Andres

그것은 잘 작동합니다. – ShankarSangoli

내가 생각하기에 그렇게 생각 하긴하지만 오류가 계속 발생하지는 않습니다. S – Andres

'js/video.js '안에는 무엇이 있습니까? 이 js가'showImage'보다 에러를 가진다면 브라우저 JS 엔진에 의해 파싱되지 않습니다. 이 경우에만이 오류가 발생합니다. – ShankarSangoli

첫째, 당신이 원활이 할 (패치 fancybox의 v1.3.x를 노력이 가치가되지 않습니다)

둘째 fancybox의 버전 2.x를 사용한다, 당신은 두 페이지에서 상위 페이지가 필요

<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />

및

,369 :과를 iframe 페이지, 제대로 fancybox를 초월하기 위해 JQuery와 및 fancybox의 CSS와 JS 파일을로드, 두 페이지에 너무

당신은 같은 적어도 뭔가를해야한다

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>

iframe이있는 (자식) 페이지에서 스크립트는 기본적으로 동일하지만 (v2.x의 올바른 fancybox 옵션이 ...)check the documentation here)

$(".video").click(function() { 
     $.fancybox({ 
      'padding'  : 0, 
      // more options (v2.x) etc

대신이

 $.fancybox({

의이 작업을 수행 :

 parent.$.fancybox({

는 fancybox는를 iframe 페이지

의 경계에서 상위 페이지에 표시됩니다 업데이트 : Demo page here

출처

2012-01-13 18:30:30 JFK

나는이 모든 것을 최신 버전으로 다운로드하여 피곤했다. 단일 페이지 (iframe)에 방금 $ ('. fancybox')를 넣으면 fancybox(); 그것은 작동하지만 부모를 둔다. $. ('. fancybox'). fancybox(); 예기치 않은 토큰을 말하고 부모를 넣으면 $ ('. fancybox'). fancybox(); 그것은 동일한 DOM 오류를 제공합니다 : S – Andres

당신이 피곤하다면 우리가 할 수있는 일이 없습니다 (그래서 당신이 왜 도움을 요청했는지 궁금합니다). 그러나 모든 것이 "최신 버전"이라는 것을 깨닫지 못한다면 사용중인 소프트웨어를 개선하고 기존 버그를 수정하십시오. 우리는 당신에게 명령을 내리지 않고 있습니다, 우리는 당신의 문제를 해결하기위한 아이디어를 제공하고 있습니다 ... (0120) 제 – JFK

나는 그것이 "나는 이것을 시도했다"는 오식 이었다는 것을 유감스럽게 생각합니다. 내려 놓거나 절대로 도움을 준 것에 감사하지 마십시오. 나는 동시에 여러 가지 일을하려고 노력하고 있었고, 당신이 귀중한 시간을 내게 주면서 도움을 주었으며 그것이 효과가 있든 없든 대답없이 교수형에 처하는 것을 원하지 않는다는 것을 알고 있습니다. 그리고 물론 가장 최신의 것을 가지고 있다면 b/c 대부분의 버그는 제거됩니다. 이 모든 것은 단지 오타입니다. – Andres

img는 iframe에 있으므로 다른 웹 페이지입니다. 따라서 Jquery는 index.html에 있지만 img는 그렇지 않습니다. JQuery가 이미지를 볼 수없는 이유입니다.

어쩌면 같은 것을 사용 ...하지만 난 그것을 index.html을 스크립트 부분

$(document).ready(function() { 
    //function to active fancybox on the thumbs class inside the iframe 
    //Not sure it works on iframes, probably it doesnt. 
    $("#iframeID.thumbs").fancybox(); 
});

에

일을 그리고 iframe이 선언에 ID를 추가 할 것 같아요 <은 iframe SRC = \ "social.html \"id = "iframeID"등 ... 나머지 속성>

하지만 제 조언은 iframe 대신 div를 사용하는 것입니다. 또한 방해가되지 않는 Javascript의 경우 이미지에서 onclick을 제거해야합니다.

자습서 확인 : http://fancybox.net/howto 스페인어로 비슷한 자습서를 원한다면 내 사이트도 확인할 수 있습니다.

출처

2012-01-13 16:41:31 H27studio

Ive가 전에이 문제가 발생하여 해결책을 찾을 수있었습니다. 여기에 네가 한 일이있다. 내 iframe 페이지에서 을 href가있는 부모 창이라고합니다. 예 : onClick="callMe('www.google.com')" 또는 사진이 "을 /images/pics.png"내 부모 HTML에서 내 상위 페이지

<script type="text/javascript"> 
function callMe(site){ 
     $(".sample").fancybox({ 
     'width' : '97%', 
     'height' : '97%', 
     'href' : ''+site+'' //force href to change its site from the call function in the iframe page 
     }); 
     readyFancy() call to trigger the decoy link page 
} 

function readyFancy(){ 
     $("a.sample").trigger("click"); 
} 
</script>

우리가 바로 미끼 링크 (이 부하 fancybox의 예에서입니다)

이 스크립트를 호출하는 경우

<body> 
<a href="#" class="sample"></a> 
</body>

현재 작업 예제를 다운로드 할 수 있습니다 .. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC

출처

2012-02-29 11:41:55 andsien

해결책은 fancybox v1.3.4에 대한 것이고 업그레이드를 원하지 않는 사람들에게 유용합니다 .v2.x를 사용하는 제안 된 솔루션을 사용하면 장점은 ' 원래 fancybox 파일을 수정해야하고 스크립트가 fancybox의 향후 업그레이드에서 계속 작동 할 것임을 알려드립니다. – JFK

@JFK ... 감사합니다. JFK는 업그레이드에 이미 포함되어 있다는 것을 몰랐습니다. fancybox. – andsien

나는 Fancybox를 개발하지 않았다 ... Janis는 남자이다. http://stackoverflow.com/users/486595/janis – JFK

부모님의 iframe에서 Fancybox로 전화하십시오.

답변

관련 문제