Вызывать Fancybox в родительском каталоге iframe

У меня есть 2 страницы, мой index.html и social.html. Я очистил свой индекс и оставил только код jQuery для fancybox То, что я пытаюсь сделать, - это иметь изображения внутри social.html и при нажатии на него он откроет fancybox и покажет его, но в index.html не внутри iframe. Ошибка, которая возникает:

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

это мой index.html:

<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: обе страницы находятся в одном домене... 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;
    });



});

Ответы

Ответ 1

Во-первых, вы должны использовать fancybox v2.x для плавного выполнения этого (исправление fancybox v1.3.x не стоит усилий)

Во-вторых, вам нужно иметь как на обеих страницах, на родительской странице, так и на iframed-странице, загруженных jquery и fancybox css и js файлах, чтобы правильно переходить с fancybox,

поэтому на обеих страницах вы должны иметь хотя бы что-то вроде:

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

то на вашей iframed (дочерней) странице ваш script будет в основном одинаковым (но с правильными параметрами fancybox для v2.x... проверьте документация здесь)

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

но вместо этого

        $.fancybox({

сделайте следующее:

        parent.$.fancybox({

то fancybox будет отображаться на родительской странице вне границ страницы iframed

ОБНОВЛЕНИЕ: Демо-страница здесь

Ответ 2

Так как img находится на iframe, это другая веб-страница. Итак, JQuery находится на index.html, но img doesnt, вот почему JQuery не может попасть в образ.

Возможно, что-то вроде этого... Но я не думаю, что это сработает

В index.html script часть

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

И добавьте id в объявление iframe < iframe src=\ "social.html \" id = "iframeID" и т.д. остальные свойствa >

Но, мой совет - использовать divs вместо iframes. Вы также должны удалить onclick из изображения для неинтрузивного Javascript.

Проверьте учебник: http://fancybox.net/howto Если вы хотите аналогичный учебник на испанском языке, вы также можете проверить мой сайт.

Ответ 3

Я столкнулся с этой проблемой раньше и смог найти решение. Вот что сделал iv. на моей странице iframe я назвал родительское окно с href, например. onClick="callMe('www.google.com')" или если pics "/images/pics.png" и назовите это script на моей родительской странице

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

в моем родительском html мы правильно ссылаемся на ссылку (этот пример из примера при загрузке fancybox)

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

Здесь вы можете скачать рабочий пример. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC