вызвать Fancybox в родительском от iframe - PullRequest
Новая
       4

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

10 голосов
/ 13 января 2012

У меня есть 2 страницы, мой index.html и social.html. Я очистил свой индекс и оставил только код jquery, необходимый для fancybox . Я пытаюсь сделать так, чтобы изображения были внутри social.html, и при нажатии на них открывался fancybox и показывал его, но в индексе. .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: обе страницы находятся в одном домене ... РЕДАКТИРОВАТЬ: 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;
    });



});

Ответы [ 3 ]

20 голосов
/ 13 января 2012

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

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

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

<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 (дочерней) странице ваш скрипт в основном такой же (но с правильными параметрами fancybox для v2.x ... см. Документацию здесь ) 

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

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

        $.fancybox({

сделать это: 

        parent.$.fancybox({

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

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

1 голос
/ 29 февраля 2012

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

<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

1 голос
/ 13 января 2012

Поскольку 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

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

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

...