iframe

से माता-पिता में Fancybox को कॉल करें मेरे पास 2 पेज, मेरा index.html और social.html है। मैंने अपनी अनुक्रमणिका साफ़ कर दी है और fancybox के लिए केवल jquery कोड की आवश्यकता है, जो मैं करने की कोशिश कर रहा हूं वह है सोशल.html के अंदर छवियां रखना और उस पर क्लिक करने पर, यह फैंसीबॉक्स खोल देगा और इसे दिखाएगा लेकिन index.html में iframe के अंदर नहीं । त्रुटि है कि ऊपर आता है:iframe

<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');"/>

पुनश्च:

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

यह मेरा index.html है दोनों पृष्ठों ही डोमेन में हैं ... संपादित करें: video.js -> यह फैंक्सबॉक्स से है मैंने इसे नहीं बनाया है।

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

जो मैंने सोचा था, लेकिन यह मुझे यह त्रुटि नहीं दे रहा है: एस – Andres

'js/video.js' के अंदर क्या है। यदि इस जेएस में 'शो इमेज' फ़ंक्शन की तुलना में कोई त्रुटि है तो ब्राउज़र जेएस इंजन द्वारा पार्स नहीं किया जाएगा। और केवल उस मामले में यह इस त्रुटि को फेंक देगा। – ShankarSangoli

सबसे पहले, आप fancybox v2.x का उपयोग कर किया जाना चाहिए मूल करने के लिए (पैचिंग fancybox v1.3.x नहीं है लायक प्रयास)

दूसरे, आप, दोनों पृष्ठों में है करने के लिए माता पिता पेज की जरूरत है

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

और

: और 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>

फिर आपके iframed (बच्चे) पृष्ठ में आपकी स्क्रिप्ट मूल रूप से वही है (लेकिन 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(); यह एक ही डीओएम त्रुटि देता है: एस – Andres

ठीक है, अगर आप थके हुए हैं तो कुछ भी नहीं है जो हम कर सकते हैं (इसलिए मुझे आश्चर्य है कि आपने मदद के लिए क्यों पूछा) ... लेकिन अगर आपको यह नहीं पता कि सबकुछ का "नवीनतम संस्करण" मतलब है आपके द्वारा उपयोग किए जा रहे सॉफ़्टवेयर को बेहतर बनाने और मौजूदा बग को ठीक करने के लिए। हम आपको आदेश नहीं दे रहे हैं, हम आपको अपनी समस्या को हल करने के लिए विचार दे रहे हैं ... (y si no quieres, pues no y mucha suerte entonces) – JFK

मुझे खेद है कि यह एक टाइपो था जिसका मतलब था "मैंने कोशिश की" मैं चाहता था दी गई सहायता को कभी भी कम न करें या सराहना न करें। मैं एक ही समय में कई चीजों को करने की कोशिश कर रहा था और मुझे पता है कि आपने अपना मूल्यवान समय मुझे मदद देकर बिताया था और यह जवाब के बिना लटकना नहीं चाहता था कि यह काम करता है या नहीं। और निश्चित रूप से कुछ भी नवीनतम है बेहतर बी/सी अधिकांश बग हटा दिए जाते हैं, इसके साथ कोई समस्या नहीं होती है। यह सब सिर्फ एक टाइपो :) – Andres

चूंकि आईएमजी एक आईफ्रेम पर है तो एक अलग वेबपृष्ठ है। तो 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 घोषणा करने के लिए आईडी जोड़ने < iframe src = \ "social.html \" id = "iframeID" आदि ... बाकी गुण>

लेकिन, मेरी सलाह है कि iframes के बजाय divs का उपयोग करें। आपको गैर-obstrusive जावास्क्रिप्ट के लिए छवि से ऑनक्लिक को भी हटा देना चाहिए।

ट्यूटोरियल की जांच करें: http://fancybox.net/howto यदि आप स्पेनिश में एक समान ट्यूटोरियल चाहते हैं तो आप मेरी साइट भी देख सकते हैं।

स्रोत

2012-01-13 16:41:31 H27studio

Ive इस समस्या का सामना करने से पहले और समाधान ढूंढने में सक्षम था। यहां दिया गया है iv क्या किया। मेरे आईफ्रेम पेज में मैंने मूल विंडो को href के साथ बुलाया उदा। onClick="callMe('www.google.com')" या यदि तस्वीरें "/images/pics.png" और हम सही एक प्रलोभन लिंक (यह एक लोड fancybox पर उदाहरण से है)

मेरे माता-पिता 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>

में इस स्क्रिप्ट फोन

<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 का उपयोग करके मेरे प्रस्तावित समाधान के साथ, लाभ यह है कि आप ' टी को मूल फैंक्सबॉक्स फ़ाइलों को संशोधित करने की आवश्यकता नहीं है और आपकी स्क्रिप्ट अभी भी फैंक्सबॉक्स के भविष्य के उन्नयन के साथ काम करेगी। – JFK

@JFK ... धन्यवाद जेएफके मुझे एहसास नहीं हुआ कि आप इसे अपने अपग्रेड में पहले ही शामिल कर चुके हैं। वैसे भी हमें आपको देने के लिए बहुत बहुत धन्यवाद फैंक्सबॉक्स – andsien

मैंने फैंक्सबॉक्स विकसित नहीं किया ... जेनिस वह व्यक्ति है http://stackoverflow.com/users/486595/janis – JFK

उत्तर

संबंधित मुद्दे