I"m currently using a fancybox to deliver content in a popup 2 seconds after a page loads. I'd like implement something that would remove the annoyance of this popping up every single time a page on the site is loaded.
Ideally, if a visitor clicked the "close" button on the fancybox, the pop-up wouldn't appear for them until the next day. If the visitor clicked the link that's in the popup, then the popup wouldn't appear until a specified later date.
Here's the code I'm currently using for the popup:
// fancybox arguments $(".fancybox") .attr('rel', 'gallery') .fancybox({ padding : 0, 'autoDimensions': false, 'autoSize': false, 'width': '650', 'height': 'auto' }); // Launch fancyBox on first element setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000) I assume this can be done using js cookie, but i'm not sure how the syntax would work based off what I'm trying to do with two different expirations .
EDIT:
Here's the HTML that is used for the pop-up:
<div style="display:none"> <a class="fancybox" href="#donation-info" alt=""/></a> <div id="donation-info"> <?php if (get_field('donation_box_text', 'option')){ echo '<h2>To all our readers:</h2>'; echo '<p>' . get_field('donation_box_text', 'option') . '</p>'; echo '<div style="text-align:center"><a href="' . get_field('donation_link', 'option') . '" id="donate" class="donate-link" />Donate</a></div>'; }; ?> </div> </div> I also tried updating the above function to include cookies, from the best of my guesstimation, to no avail:
$(document).ready(function() { if ($.cookie('noShowDonation')) $('.fancybox').hide(); else { $("#donate").click(function() { // fancybox arguments $(".fancybox") .attr('rel', 'gallery') .fancybox({ padding : 0, 'autoDimensions': false, 'autoSize': false, 'width': '650', 'height': 'auto' }); // Launch fancyBox on first element setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000) $.cookie('noShowDonation', true); }); } }); 1 Answers
Answers 1
This is untested, but put together from the Fancybox documentation. http://fancyapps.com/fancybox/#docs
$(function () { // Define cookie name var cookieName = 'hide_donate'; // Configure fancy box var $fancybox = $(".fancybox").fancybox({ // Options... beforeLoad: function() { // Returning false will stop fancybox from opening return !! $.cookie(cookieName); }, afterClose: function() { // Set cookie to hide fancybox for 1 day $.cookie(cookieName, true, { expires: 1 }); } } // Handle donate click event $('a#donate').on('click', function (event) { event.preventDefault(); // Hide fancybox and set cookie to hide fancy box for 7 days $fancybox.hide(); $.cookie(cookieName, true, { expires: 7 }); }); }); 
0 comments:
Post a Comment