Fancybox popup once time for session

Question

I have a popup with fancybox that appear at load page.

I need to show the popup once a time, if the user change page and back on the page with popup doesn't reveal a second time.

I've read that could be use a cookie plug in (https://github.com/carhartl/jquery-cookie) but i dont understant how integrate in this code...

I have a simple site in html/css.

This is the code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">     </script>
<script type="text/javascript" src="jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.1.css" media="screen" />
<script src="jquery.cookie.js"></script>


<script type="text/javascript">
function openFancybox() {
setTimeout(function () {
    $('#yt').trigger('click');
}, 500);
};
$(document).ready(function () {
var visited = $.cookie('visited');
if (visited == 'yes') {
    return false; // second page load, cookie active
} else {
    openFancybox(); // first page load, launch fancybox
}
$.cookie('visited', 'yes', {
    expires: 7 // the number of days cookie  will be effective
});
$("#yt").click(function() {
            $.fancybox({
                    'padding'        : 0,
                    'autoScale'      : false,
                    'transitionIn'   : 'none',
                    'transitionOut'  : 'none',
                    'title'          : this.title,
                    'width'          : 680,
                    'height'         : 495,
                    'href'           : this.href.replace(new RegExp("watch\\?v=", "i"),  'v/'),
                    'type'           : 'swf',
                    'swf'            : {
                        'wmode'              : 'transparent',
                        'allowfullscreen'    : 'true'
                    }
                });
    return false;
});
});
</script>
</head>

<body onload='$("#yt").trigger("click");'>

  <a id="yt" href="https://www.youtube.com/watch?v=ROTYmNckBCw&amp;fs=1&amp;autoplay=1"><img  src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
</body>
</html>

score 6 · Accepted Answer · answered May 02 '14 at 18:21

6

For browser consistency, you may need to delay the fancybox load execution for the first time so try this code :

function openFancybox() {
    // launches fancybox after half second when called
    setTimeout(function () {
        $('#yt').trigger('click');
    }, 500);
};
$(document).ready(function () {
    var visited = $.cookie('visited'); // create the cookie
    if (visited == 'yes') {
        return false; // second page load, cookie is active so do nothing
    } else {
        openFancybox(); // first page load, launch fancybox
    };
    // assign cookie's value and expiration time
    $.cookie('visited', 'yes', {
        expires: 7 // the number of days the cookie will be effective
    });
    // your normal fancybox script
    $("#yt").click(function () {
        $.fancybox({
            // your fancybox API options
        });
        return false;
    });
});

See code at this JSFIDDLE

NOTES :

In order to see the cookie working, you may need to use jsfiddle's full screen mode http://jsfiddle.net/aVE9N/show/
I would advice you to update (at least) your fancybox version from v1.3.1 to v1.3.4
It's assumed you are loading properly the jQuery cookie plugin in your page

answered May 02 '14 at 18:21

JFK

40,963
31
133
306

Is enough the file jquery.cookie.js? i've added only this. Also i have integrate your script but i dont think that run, sure i have wrong something...i have edited in the first post. – user3519727 May 02 '14 at 18:41
@user3519727 : does the jsfiddle work for you?, if so then you really need to debug what you might be doing wrong. And yes the jquery.cookie.js would be enough (apart from jQuery and fancybox of course) – JFK May 02 '14 at 20:22
@user3519727 : BTW, don't leave spaces inside the `href` as in your code above `...watch? v=ROT...` – JFK May 02 '14 at 20:25
I've tried and is ok with the img. if i wont put a video? and for how many times is active the cookie? if i wont show another time the video? maybe after a 10minutes...is possible? thanx so much – user3519727 May 05 '14 at 14:41
if i try to put a video from youtube appear a message in the lightbox: The requested content cannot be loaded. Please try again later. – user3519727 May 05 '14 at 14:58
i've tried with this url https://www.youtube.com/watch?v=ROTYmNckBCw&fs=1&autoplay=1 – user3519727 May 05 '14 at 15:02
Resolved, i edited the first post with the correct code. Thanks so much JFK!! – user3519727 May 05 '14 at 15:15
You know how close the popup when the video is finished? – user3519727 May 06 '14 at 15:06
@user3519727 : for youtube autoclose, check http://stackoverflow.com/a/20863405/1055987 ... it was written for fancybox v2.x so you may need to tweak the code to use the right API and callback options for fancybox v1.3.x – JFK May 06 '14 at 17:01
You know if is possible integrate this vimeo's video in the same script? https://vimeo.com/67198403 – user3519727 May 14 '14 at 12:53
with the vimeo's link doesnt run :( – user3519727 May 14 '14 at 13:13
@user3519727 : first I would advice you to update to v1.3.4 (again) and check this page for vimeo samples http://fancybox.net/vimeo – JFK May 14 '14 at 18:48

score 0 · Answer 2 · answered May 02 '14 at 16:12

0

Using the jQuery cookie plugin you suggested:

$(document).ready(function() {
    if(typeof $.cookie('popupVideoPlayed') == 'undefined') {
        $.cookie('popupVideoPlayed', 'true'); // set a session cookie so it won't play again
        $('#yt').trigger('click');
    }
});

Remember to delete the inline body onload event handler.

answered May 02 '14 at 16:12

Zebrastorm

81
1
4

1

Sorry i'm not able with jquery. I've edited with your code and with the link to cookie.js but doesn't run, how i must delete the inline body onload??? – user3519727 May 02 '14 at 16:18
Make the body tag look just like , and put the code after the click event handler. – Zebrastorm May 02 '14 at 16:28
i have edited. But with this situation the popup never start. – user3519727 May 02 '14 at 17:56
Most likely the cookie has already been set. Open your browser developer tools (usually F12) and delete it, then try again. – Zebrastorm May 02 '14 at 19:38

score 0 · Answer 3 · answered Jan 20 '20 at 16:18

¡UPDATED!

If you're using the newest JavaScript Cookie plugin this is for you:

HTML

<a class="c-p" href="#cookies" style="display: none;">Inline</a>
<div id="cookies" style="display: none;">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos rem nulla quae dolorum omnis possimus, ducimus nisi pariatur harum debitis quo, excepturi nam ratione modi. Architecto, enim. Amet, saepe mollitia?</p>
</div>

JavaScript

function openFancybox() {
    setTimeout( function() {jQuery('.c-p').trigger('click'); },1500);
}
jQuery(document).ready(function() {
    if (Cookies.get('visited')) {
        return false;
    } else {
        Cookies.set('visited', 'no', { expires: 7 });
    } 
    if (Cookies.get('visited') == 'yes') {
        return false;
    } else {
        openFancybox();
        Cookies.set('visited', 'yes');
    }
    jQuery('.c-p').fancybox();
});

Note: I implemeted it in my custom WordPress theme and it worked perfectly.

Fancybox popup once time for session

3 Answers3

Linked