web-dev-qa-db-ja.com

関数からファンシーボックスを開く

私が持っている関数からファンシーボックスを開こうとしています-要するに私のHTMLコードは次のようになります。

<a href="#modalMine" onclick="myfunction(this); return false;">
  click
</a>

私の機能の一部は次のようになります。

function myfunction(me) {
    $(me).fancybox({
        'autoScale': true,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 500,
        'speedOut': 300,
        'autoDimensions': true,
        'centerOnScroll': true,
    });
}

上記は、IEで動作しますが、FireFoxまたはChromeでは動作しません。これを修正する方法はありますか？別の解決策が可能になることを願っています。

javascriptjqueryfancybox
31
keysersoze

JQueryを使用しているため、HTMLのイベントハンドラーのバインドを停止し、控えめなJavaScriptの記述を開始します。

$(document).ready(function ()
{
    function myfunction(me)
    {
        $(me).fancybox({
            'autoScale': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 500,
            'speedOut': 300,
            'autoDimensions': true,
            'centerOnScroll': true // remove the trailing comma!!
        }).click();
        // fire the click event after initializing fancybox on this element
        // this should open the fancybox
    }

    // use .one() so that the handler is executed at most once per element
    $('a[href=#modalMine]').one('click', function ()
    {
        myfunction(this);
        return false;
    });
});

ただし、クリック時にfancyboxを設定する理由は特にわかりません。代わりにこれを行うことができます：

$(document).ready(function ()
{
    function myfunction()
    {
        // note the use of "this" rather than a function argument
        $(this).fancybox({
            'autoScale': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 500,
            'speedOut': 300,
            'autoDimensions': true,
            'centerOnScroll': true
        });
    }

    $('a[href=#modalMine]').each(myfunction);
});

基本デモ（画像なし）→

27
Matt Ball

Javascript関数が呼び出されたときに単に空想ボックスを開きたい場合。おそらくクリックの結果ではなく、コードフロー内にある可能性があります。方法は次のとおりです。

function openFancybox() {
  $.fancybox({
     'autoScale': true,
     'transitionIn': 'elastic',
     'transitionOut': 'elastic',
     'speedIn': 500,
     'speedOut': 300,
     'autoDimensions': true,
     'centerOnScroll': true,
     'href' : '#contentdiv'
  });
}

これにより、「contentdiv」を使用してボックスが作成され、開かれます。

40
Daniel

必要なのは：

$.fancybox.open({ .... });

ここの下部にある「APIメソッド」セクションを参照してください。

http://fancyapps.com/fancybox/

18
Adrian Smith

独自のclickイベントハンドラーを追加する必要はありません。 fancyboxで要素を初期化するだけです：

$(function() {
    $('a[href="#modalMine"]').fancybox({
        'autoScale': true,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 500,
        'speedOut': 300,
        'autoDimensions': true,
        'centerOnScroll': true  // as MattBall already said, remove the comma
    });
});

できたFancyboxは、ボックスを開くclickハンドラーを既にバインドしています。 HowToセクションをご覧ください。

後でプログラムでボックスを開きたい場合は、その要素でclickイベントを発生させます：

$('a[href="#modalMine"]').click();
8
Felix Kling

引数オブジェクトを<a>から拡張し、デリゲート経由のクリックイベントでfancyboxのopen関数を使用します。

    var paramsFancy={
         'autoScale': true,
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'speedIn': 500,
         'speedOut': 300,
         'autoDimensions': true,
         'centerOnScroll': true,
         'href' : '#contentdiv'
      };

    $(document).delegate('a[href=#modalMine]','click',function(){
               /*Now you can call your function ,
   you can change fields of paramsFancy via this function */
                 myfunction(this);

                paramsFancy.href=$(this).attr('href');
                $.fancybox.open(paramsFancy);

    });
3
Abdennour TOUMI

クリックイベントをトリガーする必要はありません。fancyboxタイプをajaxにしてトリガーできます。

$.fancybox.open({
      href: "http://........",
      type: 'ajax'
});
3
Burcu Co

答えは少し複雑すぎるようです。質問を誤解しないでください。

「A」タグへのクリックから空想ボックスを単に開きたい場合。 htmlを設定するだけです

<a id="my_fancybox" href="#contentdiv">click me</a>

ボックスの内容はid "contentdiv"のdiv内にあり、javascriptで次のようにfancyboxを初期化できます。

$('#my_fancybox').fancybox({
    'autoScale': true,
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'speedIn': 500,
    'speedOut': 300,
    'autoDimensions': true,
    'centerOnScroll': true,
});

これにより、アンカータグがクリックされたときに「contentdiv」を含むファンシーボックスが表示されます。

2
Daniel
function myfunction(){
    $('.classname').fancybox().trigger('click'); 
}

わたしにはできる..

2
Prabhagaran

ここに著者の Tips＆Tricks ブログ投稿に従って動作するコードがあります。ドキュメントに準備してください：

  $("#mybutton").click(function(){
    $(".fancybox").trigger('click');  
  })

これにより、手動でクリックしたかのように、現在表示されている画像またはコンテンツの小さいバージョンがトリガーされます。 Fancyboxを再度初期化することは避けますが、代わりにドキュメント上で初期化したパラメーターを準備しておきます。ボックスをクリックするのとは別のボタンでボックスを開くときに何か別のことをする必要がある場合、パラメーターが必要になりますが、多くの場合、これは彼らが探していたものです。

2
Henrik Erlandsson
...
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
...
if($(".img_file[data-img]").length) {
                var imgs_slider_img = [];
                $(".img_file[data-img]").each(function(i) {
                    imgs_slider_img.Push({
                        href:$(this).attr('data-img')
                    });
                    $(this).attr('data-index-img', i);
                }).on("click", function(e) {
                    e.preventDefault();
                    $.fancybox.open(imgs_slider_img, {
                         index: $(this).attr('data-index-img'),
                         padding: 0,
                         margin: 0,
                         prevEffect: 'elastic',
                         nextEffect: 'elastic',
                         maxWidth: '90%',
                         maxHeight: '90%',
                         autoWidth: true,
                         autoHeight: true
                    });
                });
            }
...
1
Олег Стасюкевич

jQuery.fancybox.openが利用できない場合（fancybox 1.3.4で）、再帰の問題を回避するためにsemaforを使用する必要がある場合があります。

<a href="/index.html" onclick="return myfunction(this)">click me</a>

<script>

var clickSemafor = false;
myfunction(el)
{
 if (!clickSemafor) {
   clickSemafor = true; 
   return false; // do nothing here when in recursion
 }
 var e = jQuery(el); 
 e.fancybox({
    type: 'iframe',
    href: el.href
  }); 
 e.click();  // you could also use e.trigger('click');
 return false; // prevent default

}
</script>
0
stAn