jQuery обработчик событий для ActivFancybox Iframe с нажатием кнопки - PullRequest
Новая
       3

jQuery обработчик событий для ActivFancybox Iframe с нажатием кнопки

1 голос
/ 21 ноября 2011

Я пытаюсь использовать fancybox 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/fancybox-1.3.4/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="/js/fancybox-1.3.4/jquery.mousewheel-3.0.4.pack.js"></script>

 <script type="text/javascript">
$("#various3").fancybox({
                'width'             : '75%',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });
 </script>

Это ссылка Iframe: 

<li><a id="various3" href="http://jquery.com/">Iframe (75% width and height)</a></li>

Это моя кнопка: 

<input id="Button1" type="button" value="button" />

Ответы [ 5 ]

1 голос
/ 04 мая 2012

Уже достаточно поздно, чтобы ответить, но надеюсь, это поможет. Ниже приведен код, который работал для меня. 

 $("#YOUR-BUTTON-ID").live('click',function() {
   $.fancybox({
    'href'              : 'PAGE-URL',
    'width'             : '60%',
    'height'            : '60%',
    'autoScale'         : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'              : 'iframe'
   });   
});

Надеюсь, это то, что вы искали

1 голос
/ 23 ноября 2011

Если вы хотите открыть fancybox либо гиперссылкой, либо кнопкой ... или обоими

тогда вы можете иметь этот HTML 

<li><a id="various3" href="http://jquery.com/">Iframe (75% width and height)</a></li>
<input id="Button1" type="button" value="button" />

и этот скрипт 

<script type="text/javascript">
$(document).ready(function() {
$("#various3").fancybox({
 'width'             : '75%',
 'height'            : '75%',
 'autoScale'         : false,
 'transitionIn'      : 'none',
 'transitionOut'     : 'none',
 'type'              : 'iframe'
});     
$("#Button1").click(function(){
 $("#various3").trigger('click');
});
}); // ready
</script>
1 голос
/ 21 ноября 2011 
$("#Button1").click (function () {
$("#various3").fancybox({
                'width'             : '75%',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });

} );

редактировать

и изменить на: 

<li><a id="various3" href="http://jquery.com/"><input id="Button1" type="button" value="button" /></a></li>
0 голосов
/ 16 февраля 2013

попробуйте так в FancyBox 2 

    $("#button_id").click(function() {
      $.fancybox(open_url, {
        'autoScale': true,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'iframe'
      });
    });
0 голосов
/ 21 ноября 2011

попробуйте что-то вроде этого: 

$("#tip4").click(function() {
    $.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'     : 680,
        'height'        : 495,
        'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
             'wmode'        : 'transparent',
            'allowfullscreen'   : 'true'
        }
    });
    return false;
});

источник: http://fancybox.net/blog

...