dimanche 21 août 2016

Delay fancybox open while not delaying data load

I have a text file with delimited lines of quotes. I'm loading lines into a <p> with class="quotes" inside a hidden div using a jquery click function on an <a> tag. This works fine.

When clicked, this anchor also launches Fancybox 2 lightbox and loads in the content of #quote-div (div inside of the hidden div) as inline. This also works.

The problem is that it's happening too fast. I need to keep the loading of the text fast and slightly delay Fancybox.

When Fancybox opens sometimes there is a stutter as it readjusts the window height for the text that was loaded. I tried loading the text on hover instead of click, but in Chrome it triggers another hover if the mouse moves over the <a> tag.

I found setTimeout in a few posts on here, but I'm not sure how to set it up in the code so it works properly in this situation.

I'm also using Fancybox in other parts of the site where I don't want a delay to happen.

HTML:

<div style="display: none">
    <div id="quote-div">
        <p class="quotes">... content loads here...</p>
    </div>
</div>

<a id="q-click" class="clickBlock fancybox" href="#quote-div">&nbsp;</a>

jquery function:

$('#q-click').click(function () {
    $.get('/assets/quotes.txt', function(data) {
        var quotes = data.split("\@");
        var idx = Math.floor(quotes.length * Math.random());
        $('.quotes').html(quotes[idx]);
    });
});

Fancybox code:

$(".fancybox").fancybox({
    helpers: {
        title : {
            type : 'inside'
        },
        overlay: {
            locked: false
        }
    }
});




Aucun commentaire:

Enregistrer un commentaire