fancybox за пределы iFrame

Тема в разделе "JavaScript", создана пользователем vave, 31 май 2014.

Модераторы: ZiX
  1. vave

    vave

    Регистр.:
    23 июн 2007
    Сообщения:
    377
    Симпатии:
    15
    Который раз сталкиваюсь с этой проблемой, и вот наконец, с помощью вас надеюсь её решу!
    Сделал я изображение с открытием через fancybox, и всё это во фрейме, но к сожалению изображения открываются только в пределах фрейма, но никак не на весь экран, затемнение фона кстати тоже только во фрейме проходит.
    Помогите решить данную проблему!
     
  2. Voshal

    Voshal Мизантроп

    Регистр.:
    30 мар 2009
    Сообщения:
    286
    Симпатии:
    108
    Вы залейте хоть посмотреть, что получается и скриншот, что вы хотите получить в итоге
     
    Vishez нравится это.
  3. ikent_ru

    ikent_ru Писатель

    Регистр.:
    9 июн 2014
    Сообщения:
    4
    Симпатии:
    4
    index.html
    HTML:
    <html>
    <head>
    <title>Main</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
    <script>
    function openFancy(href) {
      $.fancybox({
            'href': href
      });
    }
    </script>
    <link href="fancybox/source/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen">
    </head>
    <body>
    <iframe src="iframe.html" />
    </body>
    </html>
    iframe
    HTML:
    <html>
    <head>
    <title>iframe</title>
    </head>
    <body>
    <script>
    parent.openFancy('image.jpg');
    </script>
    </body>
    </html>
     
  4. vave

    vave

    Регистр.:
    23 июн 2007
    Сообщения:
    377
    Симпатии:
    15
    При открытии фрейма, сразу открывается изображение, но хотелось бы что бы это происходило при нажатии на изображение.
    HTML:
    <a class='fancybox' rel='gallery' href='enlarge/$image'><img src='thumbs/$image' width='300px'></a>
    -----

    Разобрался, просто прописал к openFancy - onClick:)
     
    Последнее редактирование: 1 июл 2014
  5. silviudon

    silviudon Писатель

    Регистр.:
    1 июл 2014
    Сообщения:
    6
    Симпатии:
    1
    всем привет, может подскажите. У меня проблема с этим скриптом вернее не с этим с его собратом FancyZoom. Иногда скрипт срабатывае от нажатия любой ссылки на сайте и даже при нажатии в любое место на сайте. Может кто сталкивался с этим????
     
  6. vave

    vave

    Регистр.:
    23 июн 2007
    Сообщения:
    377
    Симпатии:
    15
    если сюда прямую ссылку не прописать, parent.openFancy('image.jpg');
    то изображение не открывается
     
  7. omear

    omear Писатель

    Регистр.:
    8 авг 2014
    Сообщения:
    9
    Симпатии:
    1
    Код:
    <a href="javascript:parent.jQuery.fn.fancybox.close();" >
    Вы можете закрыть такие
     
  8. vave

    vave

    Регистр.:
    23 июн 2007
    Сообщения:
    377
    Симпатии:
    15
    И кстати если набираешь сайт с WWW то выдает ошибку
    Uncaught SecurityError: Blocked a frame with origin "http://xxxx.com" from accessing a frame with origin "http://www.xxxx.com". Protocols, domains, and ports must match.
    И вопрос с прямой ссылкой, еще открыт)

    parent.openFancy('image.jpg'); так не работает
    parent.openFancy('http://website.com/image.jpg'); так работает


    Дело в том, что у фрейма и сайта разные ссылки.
    Сайт http://website.com/
    фрейм http://website.com/foldr/img/
    и при открытии изображения, сайт запрашивает не http://website.com/foldr/img/image.jpg
    а http://website.com/image.jpg, соответственно ничего не открывается.
     
    Последнее редактирование: 4 окт 2014
  9. Aglok

    Aglok ∞³

    Регистр.:
    9 янв 2012
    Сообщения:
    162
    Симпатии:
    46
    1.Чтобы браузер не блокировал frame, пропиши в главном документе и во фрейме определение домена:
    Код:
    document.domain = 'http://website.ru';
    2. В фрейме:
    Код:
    function funcy(){
    parent.openFancy('image.jpg');
    }
    <a class='fancybox' rel='gallery' href='enlarge/$image' onclick="fancy()"><img src='thumbs/$image' width='300px'></a>
     
    Последнее редактирование: 4 окт 2014