كيفية اطلاق مسج Fancybox على تحميل الصفحة؟

https://stackoverflow.com/questions/807271

03-07-2019
|

سؤال

وأود أن إطلاق Fancybox (مثل نسخة Fancybox في من مشروط أو ضوء مربع) على تحميل الصفحة . أنا يمكن أن تكون ملزمة لعلامة مرساة الخفية وإطلاق الحدث النقر على هذه العلامة مرساة عبر جافا سكريبت، ولكن أود أن ليس فقط إطلاق Fancybox مباشرة وتجنب العلامة مرساة إضافية.

المحلول

وFancybox حاليا لا تدعم بشكل مباشر وسيلة لإطلاق تلقائيا. وكان العمل في جميع أنحاء كنت قادرا على الحصول على العمل وخلق علامة مرساة الخفية واثار انها فوق الحدث. تأكد من مكالمتك لتحريك يتم تضمين الحدث انقر فوق بعد يتم تضمين الملفات مسج وFancybox JS. رمز اعتدت على النحو التالي:

ويتم تضمين هذا البرنامج النصي عينة مباشرة في HTML، ولكن يمكن أيضا أن يدرج في ملف JS.

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

نصائح أخرى

وحصلت على هذا العمل من قبل استدعاء هذه الوظيفة في الوثيقة جاهزة:

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

وه بسيطة:

تأكد العنصر الخاص بك مخبأة أولا مثل هذا:

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

وثم استدعاء جافا سكريبت الخاصة:

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

وتحقق من الصورة أدناه:

ومثال آخر:

<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>

وWindow.load (على العكس من document.ready ()) يبدو للأن يكون خدعة المستخدمة في JSFiddler العروض ONLOAD من Fancybox 2.0 :

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

وعارية في الاعتبار قد تكون تستخدم document.ready () في أي مكان آخر، وIE9 ينزعج مع ترتيب التحميل من الاثنين. وهذا يترك لك خيارين: تغيير كل شيء لwindow.load أو استخدام setTimer ()

وأو استخدام هذا في ملف JS بعد تعيين fancybox الخاص بك:

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

وأعتقد أن Fancybox 1.2.1 استخدام الخيارات الافتراضية غير ذلك من بلدي التجارب عندما كنت في حاجة للقيام بذلك.

لماذا ليس هذا واحد من أجوبة حتى الآن:؟

$("#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
    });
});

والآن فقط تحريك صلتك !!

وحصلت على هذا من Fancybox الرئيسية

وأفضل طريقة وجدتها هي:

<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>

لحالتي، ويمكن أن يلي العمل بنجاح. عندما يتم تحميل الصفحة، والمبسط هو المنبثقة فورا.

ومسج: 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>

والجواب اليكس كبيرة. ولكن ومن importanting أن نلاحظ أن الذي يستدعي أسلوب fancybox الافتراضية. إذا كان لديك قواعد المخصصة الخاصة بك، يجب عليك الاتصال فقط .trigger انقر على أن مرساة معين

$(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');
});

وتمكنت فعلا لتحريك رابط fancyBox فقط من ملف JS الخارجي باستخدام "العيش" الحدث:

أولا، إضافة الحدث انقر فوق مباشرة على مرساة ديناميكية مستقبلك:

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

وبعد ذلك، إلحاق مرساة للجسم:

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

وبعد ذلك تحريك fancyBox من "النقر" مرساة:

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

والارتباط fancyBox هو الآن "تقريبا" جاهزة. لماذا "تقريبا"؟ لأنه يبدو أنك تحتاج إلى إضافة بعض التأخير قبل الزناد النقرة الثانية، وإلا فإن السيناريو هو غير جاهز.

وانها تأخير سريعة وقذرة باستخدام بعض الرسوم المتحركة على مرساة لدينا كنه يعمل بشكل جيد:

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

وهنا تذهب، fancyBox الخاصة بك ينبغي أن تظهر ONLOAD!

وHTH

وربما هذا سوف يساعد ... وهذا كان يستخدم في الحجم الكامل مسج انقر فوق التقويم الحدث ( HTTP: // arshaw كوم / fullcalendar / ) ... ولكن يمكن استخدامه بشكل عام للتعامل مع fancybox التي أطلقها مسج.

  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;
  }

ويمكنك أيضا استخدام وظيفة جافا سكريبت الأم setTimeout() لتأجيل عرض مربع بعد DOM مستعدة لذلك.

<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>

في حالة إذا لم يكن لديك زر فوق. أعني إذا كنت ترغب في فتحه على استجابة اياكس ثم سيكون مثل هذا:

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

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

وهذا سوف يساعد ..

وربما يمكنك استخدام jqmodal ، انها خفيفة الوزن وسهلة الاستخدام. يمكنك إظهار مربع الوسائط من خلال الدعوة

$('.box').jqmShow()

ويمكنك وضع رابط مثل هذا (سوف تكون مخفية. قد يكون قبل </body>)

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

وسمة يختلط أو فئة مثل هذا العمل

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

وفقط تفعل ذلك مع وظيفة مسج الزناد

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

وHTML:

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

وJS:

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow