Sayfa yüklemede jQuery Fancybox nasıl başlatılır?

Question 1

Sayfa yüklemede bir Fancybox (örneğin, Fancybox'ın bir modal veya light box versiyonu) başlatmak istiyorum . Bunu gizli bir bağlantı etiketine bağlayabilir ve bu bağlantı etiketinin tıklama olayını JavaScript aracılığıyla tetikleyebilirim, ancak sadece Fancybox'ı doğrudan başlatmayı ve fazladan bağlantı etiketinden kaçınmayı tercih ederim.

Question 2

Fancybox şu anda otomatik olarak başlatmanın bir yolunu doğrudan desteklemiyor. Çalışmayı başardığım iş, gizli bir bağlantı etiketi oluşturmak ve tıklama olayını tetikliyor. JQuery ve Fancybox JS dosyaları dahil edildikten sonra tıklama olayını tetikleme çağrınızın dahil edildiğinden emin olun. Kullandığım kod şu şekilde:

Bu örnek komut dosyası doğrudan HTML'ye gömülüdür, ancak bir JS dosyasına da dahil edilebilir.

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>

Question 3

Bunu, bu işlevi belge hazır olarak çağırarak çalıştırdım:

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});

Question 4

Basit:

Öğenizi önce şu şekilde gizleyin:

<div id="hidden" style="display:none;">
    Hi this is hidden
</div>

O zaman javascript'inizi arayın:

<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox("#hidden");
    });
</script>

Aşağıdaki resme bakın:

görüntü açıklamasını buraya girin

Başka bir örnek:

<div id="example2" style="display:none;">
        <img src="http://theinstitute.ieee.org/img/07tiProductsandServicesiStockphoto-1311258460873.jpg" />
    </div>

 <script type="text/javascript">
        $(document).ready(function() {
            $.fancybox("#example2");
        });
    </script>

görüntü açıklamasını buraya girin

Question 5

Window.load (document.ready () 'nin aksine) Fancybox 2.0'ın JSFiddler onload demolarında kullanılan numara gibi görünüyor :

$(window).load(function()
{
    $.fancybox("test");
});

Belli ki başka bir yerde document.ready () kullanıyor olabilirsiniz ve IE9, ikisinin yükleme sırasına altüst olur. Bu size iki seçenek bırakır: her şeyi window.load olarak değiştirin veya bir setTimer () kullanın.

Question 6

Veya fantezi kutunuz kurulduktan sonra bunu JS dosyasında kullanın:

$('#link_id').trigger('click');

Fancybox 1.2.1'in, bunu yapmam gerektiğinde testimdeki varsayılan seçenekleri kullanacağına inanıyorum.

Question 7

neden bu henüz cevaplardan biri değil ?:

$("#manual2").click(function() {
    $.fancybox([
        'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
        'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
        {
            'href'  : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
            'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
        }
    ], {
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 0
    });
});

şimdi sadece bağlantınızı tetikleyin !!

bunu Fancybox ana sayfasından aldım

Question 8

Bulduğum en iyi yol:

<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox(
             $("#WRAPPER_FOR_hidden_div_with_content_to_show").html(), //fancybox works perfect with hidden divs
             {
                  //fancybox options
             }
        );
    });
</script>

Question 9

Benim durumum için aşağıdakiler başarıyla çalışabilir. Sayfa yüklendiğinde, ışık kutusu hemen açılır.

JQuery: 1.4.2

Fancybox: 1.3.1

<body onload="$('#aLink').trigger('click');">
<a id="aLink" href="http://www.google.com" >Link</a></body>

<script type="text/javascript">
    $(document).ready(function() {

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

Question 10

Alex'in cevabı harika. ancak bunun varsayılan fantezi kutusu stilini çağırdığına dikkat etmek önemlidir. Kendi özel kurallarınız varsa, o belirli bağlantıya .trigger tıklamanız yeterlidir.

$(document).ready(function() {
$("#hidden_link").fancybox({ 
    'padding':          0,
    'cyclic':       true,
    'width':        625,
    'height':       350,
    'padding':      0, 
    'margin':      0, 
    'speedIn':      300,
    'speedOut':     300,
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'easingIn':     'swing',
    'easingOut':    'swing',
    'titleShow' : false
}); 
    $("#hidden_link").trigger('click');
});

Question 11

Aslında bir fancyBox bağlantısını "canlı" etkinliğini kullanarak yalnızca harici bir JS dosyasından tetiklemeyi başardım:

İlk olarak, canlı tıklama etkinliğini gelecekteki dinamik bağlantınıza ekleyin:

$('a.pub').live('click', function() {
  $(this).fancybox(... fancybox parameters ...);
})

Ardından, çapayı gövdeye ekleyin:

$('body').append('<a class="iframe pub" href="your-url.html"></a>');

Daha sonra bağlantıya "tıklayarak" fancyBox'ı tetikleyin:

$('a.pub').click();

FancyBox bağlantısı artık "neredeyse" hazır. Neden "neredeyse"? Görünüşe göre ikinci tıklamayı tetiklemeden önce biraz gecikme eklemeniz gerekiyor, aksi takdirde komut dosyası hazır değildir.

Çapamızdaki bazı animasyonları kullanarak hızlı ve kirli bir gecikme ama iyi çalışıyor:

$('a.pub').slideDown('fast', function() {
  $('a.pub').click();
});

İşte burada, fantezi kutunuz yüklenirken görünmeli!

HTH

Question 12

Belki bu yardımcı olabilir ... bu tam boyutlu jQuery takvim tıklama etkinliğinde kullanıldı ( http://arshaw.com/fullcalendar/ ) ... ama daha genel olarak jQuery tarafından başlatılan fancybox ile başa çıkmak için kullanılabilir.

  eventClick: function(calEvent, jsEvent, view) {
      jQuery("body").after('<a id="link_'+calEvent.url+'" style="display: hidden;" href="http://thisweekinblackness.com/wp-content/uploads/2009/01/steve-urkel.jpg">Steve</a>');
      jQuery('#link_'+calEvent.url).fancybox(); 
      jQuery('#link_'+calEvent.url).click();
      jQuery('#link_'+calEvent.url).remove();
    return false;
  }

Question 13

setTimeout()DOM hazır olduktan sonra kutunun görüntülenmesini geciktirmek için yerel JavaScript işlevini de kullanabilirsiniz .

<a id="reference-first" href="#reference-first-message">Test the Popup</a>

<div style="display: none;">
    <div id="reference-first-message" style="width:400px;height:100px;overflow:auto;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#reference-first").fancybox({
            'titlePosition'         : 'inside',
            'transitionIn'          : 'fade',
            'transitionOut'         : 'fade',
            'overlayColor'          : '#333',
            'overlayOpacity'        : 0.9
        }).trigger("click");

        //launch on load after 5 second delay
        window.setTimeout('$("#reference-first")', 5000);
    });
</script>

Question 14

Tıklayacak düğmeniz yoksa. Demek istediğim, ajax yanıtında açmak istiyorsanız, o zaman şöyle olacaktır:

$.fancybox({
      href: '#ID',
      padding   : 23,
      maxWidth  : 690,
      maxHeight : 345
});

Question 15

$(document).ready(function() {
    $.fancybox(
      '<p>Yes. It works <p>',
       {
        'autoDimensions'    : false,
        'width'             : 400,
        'height'            : 200,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
       }
    );
});

Bu yardımcı olacak..

Question 16

Bu şekilde bağlantı koyabilirsiniz (gizlenecektir. Önceden olabilir </body>)

<a id="clickbanner" href="image.jpg" rel="gallery"></a>

Ve bunun gibi rel özniteliği veya sınıfı çalışma

$(document).ready(function() {
    $("a[rel=gallery]").fancybox({
        openEffect  : 'elastic',
        closeEffect : 'elastic',
        maxWidth    : 800,
        maxHeight   : 600
    });
});

Sadece jquery tetikleme işlevi ile yapın

$( window ).load(function() {
  $("#clickbanner").trigger('click');
});

Question 17

HTML:

<a id="hidden_link" href="LinkToImage"></a>

JS:

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>

Question 18

belki jqmodal kullanabilirsiniz , hafif ve kullanımı kolaydır. kalıcı kutuyu arayarak gösterebilirsiniz

$('.box').jqmShow()