Question

0

Fancybox popup once time for session

rated 0 times [ 1] [ 1] / answers: 1 / hits: 21450 / 10 Years ago, fri, may 2, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cruzs

Add To Favorites

Follow

Total Points: 710

Total Questions: 113

Total Answers: 100

Location: Nepal

Member since Sat, Jul 18, 2020

4 Years ago

cruzs questions

1 How do I use JavaScript fetch in Laravel 8?

Thu, Nov 26, 20, 00:00, 4 Years ago

1 Print PDF from BLOB

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Best practice for Next.js data fetching inside a component

Wed, Aug 19, 20, 00:00, 4 Years ago

1 Not getting form data in req.body Express/node.js

Sun, Aug 2, 20, 00:00, 4 Years ago

1 React Router history.goBack doesn't work when using < Redirect />

Sun, Jul 12, 20, 00:00, 4 Years ago

View All

answered 10 Years ago maureen · Accepted Answer

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