Choppy fancybox fade-in inline content

Question

I have a Fancybox plugin installed and I have a JS part

<script type="text/javascript">
    function openFancybox(name) {
      $.fancybox({
        'autoScale': true,
        'transitionIn': 'fade',
        'transitionOut': 'fade',
        'type': 'inline',
        'href': name,
        'scrolling'   : 'no',
        afterClose: function(){
            $('div.qtip:visible').qtip('hide');
      }
     });
    }

    function showDialog(dialogId, title, message) {
       $(dialogId + ' p').html(message);
       $(dialogId + ' h3').html(title);
       openFancybox(dialogId);
    }

    $(document).ready(function() {
        showDialog('#info-dialog', 'Logout.', 'You are now logged out.');
    });
</script>

And in HTML I have

<div id="info-dialog" class="dialog-holder">
    <div class="dialog">
        <div class="dialog-content">
            <a href="#" class="close-button close">Close</a>
            <h3>Header.</h3>
            <p>Paragraph.</p>
            <a href="#" class="button large blue close">Close</a>
        </div>
    </div>
</div>

The problem is that when I load a page popup is working but it's so choppy :/ Fade-out when I close a popup is smooth but fade-in so bad :/ Why is that?

try to give 'transitionIn' : 'none', 'transitionOut' : 'none' — Javascript Coder, Jun 21 '12 at 11:45

score 0 · Answer 1 · edited May 23 '17 at 12:27

Fancybox currently does not directly support a way to automatically launch. The work around I was able to get working is creating a hidden anchor tag and triggering it's onclick event. Make sure your call to trigger the onclick event is included after the jquery and fancybox js files are included. The code I used is as follows:

This sample script is embedded directly in the html, but it could also be included in a js file.

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

source: How to launch jQuery Fancybox on page load?.

Try this and the fancybox will be smoother

Choppy fancybox fade-in inline content

1 Answers1