2012-01-13 48 views
10

Tôi có 2 trang, index.html và social.html. Tôi làm sạch chỉ mục của mình và chỉ để lại mã jquery cần cho fancybox Điều tôi đang cố gắng làm là có hình ảnh bên trong social.html và khi nhấp vào nó, nó sẽ mở hộp ưa thích và hiển thị nó nhưng trong index.html không nằm trong iframe . Các lỗi mà đi lên là:gọi Fancybox trong phụ huynh từ iframe

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

đây là index.html của tôi:

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

trong trang IFrame:

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

PS: cả hai trang trên cùng một miền ... EDIT: video.js -> đây là từ fancybox Tôi đã không thực hiện điều này.

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; 
    }); 



}); 
+0

Nó sẽ làm việc tốt. – ShankarSangoli

+0

thats những gì tôi nghĩ như vậy nhưng nó không nó giữ cho tôi rằng lỗi: S – Andres

+0

Có gì bên trong 'js/video.js'. Nếu js này có bất kỳ lỗi nào hơn hàm 'showImage' sẽ không được phân tích cú pháp bởi công cụ JS của trình duyệt. Và chỉ trong trường hợp đó nó sẽ ném lỗi này. – ShankarSangoli

Trả lời

19

Trước tiên, bạn nên sử dụng Fancybox v2.x để liên tục làm điều đó (vá Fancybox v1.3.x không xứng đáng với nỗ lực)

Thứ hai, bạn cần phải có trong cả hai trang, trang mẹ và trang iframed, nạp jquery và Fancybox css và js file để vượt Fancybox đúng cách,

như vậy trong cả trang bạn nên có ít nhất một cái gì đó như:

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

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

sau đó trong trang iframed (con) của bạn kịch bản của bạn về cơ bản là giống nhau (nhưng với các tùy chọn ưa thích hộp thư cho v2.x ...check the documentation here)

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

nhưng thay vì điều này

 $.fancybox({ 

làm điều này:

 parent.$.fancybox({ 

sau đó Fancybox sẽ hiển thị trong trang mẹ ra khỏi ranh giới của trang iframed

CẬP NHẬT: Demo page here

+1

Tôi mệt mỏi, tải xuống phiên bản mới nhất của mọi thứ. Trên trang đơn (iframe) nếu tôi chỉ cần đặt $ ('. Fancybox'). Fancybox(); nó hoạt động nhưng sau đó tôi đặt cha mẹ. $. ('. fancybox'). fancybox(); và nó nói mã thông báo bất ngờ, và nếu tôi đặt cha mẹ. $ ('. fancybox'). fancybox(); nó cho cùng một lỗi DOM: S – Andres

+0

Vâng, nếu bạn mệt mỏi thì không có gì chúng tôi có thể làm (vì vậy tôi tự hỏi tại sao bạn yêu cầu trợ giúp) ... nhưng nếu bạn không nhận ra "phiên bản mới nhất" của mọi thứ có nghĩa là để cải thiện phần mềm bạn đang sử dụng và sửa các lỗi hiện có. Chúng tôi không đưa cho bạn các đơn đặt hàng, chúng tôi đang cung cấp cho bạn các ý tưởng để giải quyết vấn đề của bạn ... (y si no quieres, pues no y mucha suerte entonces) – JFK

+0

Tôi xin lỗi đó là một lỗi đánh máy tôi có nghĩa là "Tôi đã thử điều này" Tôi sẽ không bao giờ đặt xuống hoặc không đánh giá cao sự trợ giúp được đưa ra. Tôi đã cố gắng làm nhiều thứ cùng một lúc và tôi biết bạn đã dành thời gian quý báu của bạn để giúp tôi và không muốn để bạn treo mà không có câu trả lời cho dù nó có hiệu quả hay không. Và tất nhiên có bất cứ điều gì mới nhất là tốt hơn b/c hầu hết các lỗi được gỡ bỏ không có một prob với một trong hai. Tất cả điều này chỉ là một lỗi đánh máy :) – Andres

1

Vì img nằm trên iframe là một trang web khác. Vì vậy, Jquery là trên index.html nhưng img doesnt, đó là lý do tại sao JQuery không thể có được hình ảnh.

Có thể sử dụng một cái gì đó như thế này ... Nhưng tôi không nghĩ rằng nó sẽ làm việc

On index.html kịch bản phần

$(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(); 
}); 

Và thêm id để việc kê khai iframe < iframe src = \ "social.html \" id = "iframeID" v.v ... phần còn lại của thuộc tính>

Nhưng, lời khuyên của tôi là sử dụng div thay vì iframe. Bạn cũng nên xóa onclick khỏi hình ảnh cho Javascript không gây khó hiểu.

Kiểm tra hướng dẫn: http://fancybox.net/howto Nếu bạn muốn có hướng dẫn tương tự bằng tiếng Tây Ban Nha, bạn cũng có thể kiểm tra trang web của mình.

1

Ive gặp phải vấn đề này trước và có thể tìm ra giải pháp. Đây là những gì iv thực hiện. trong trang khung nội tuyến của tôi, tôi gọi là cửa sổ chính có href ví dụ: onClick="callMe('www.google.com')" hoặc nếu bức ảnh "/images/pics.png" và gọi script này trong trang mẹ tôi

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

trong html mẹ tôi, chúng tôi phải vào một liên kết mồi (cái này là từ ví dụ trên Fancybox tải)

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

Bạn có thể tải về một ví dụ làm việc ở đây .. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC

+0

Điều đáng nói đến là giải pháp của bạn dành cho fancybox v1.3.4 và nó rất hữu ích cho những người không muốn nâng cấp. Với giải pháp được đề xuất của tôi bằng cách sử dụng v2.x, lợi thế là bạn don ' t cần phải sửa đổi các tập tin fancybox ban đầu và rằng kịch bản của bạn sẽ vẫn làm việc với các nâng cấp trong tương lai của fancybox – JFK

+0

@JFK ... cảm ơn JFK tôi đã không nhận ra rằng bạn đã bao gồm nó trong bản nâng cấp của bạn. fancybox. – andsien

+0

Tôi không phát triển Fancybox ... Janis là người đàn ông http://stackoverflow.com/users/486595/janis – JFK

Các vấn đề liên quan