We Keep Coding

Using cookies to not show a popup based on particular actions

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);
});
}
});
EDIT #2 -- Updated code
Using the code suggested by #Rob below, I tried adding the configurations to the fancybox as well as the timeout, however, no luck. Here's the JS Fiddle: https://jsfiddle.net/30Lxfc6r/

I've updated my answer with a JSBin example based on the FancyBox docs.
https://jsbin.com/bajocosese/edit?html,console,output
http://fancyapps.com/fancybox/#docs
$(function () {
// Define cookie name
var cookieName = 'hide_donate';
// Configure fancyBox
$('.fancybox').fancybox({
autoDimensions: false,
autoSize: false,
height: 'auto',
padding: 0,
width: 650,
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.close();
$.cookie(cookieName, true, { expires: 7 });
});
// Launch fancyBox on first element
setTimeout(function () {
$(".fancybox").trigger('click');
}, 2000);
});
Remember, this example will only work once, unless you delete the cookie, or change the cookie name.

Fancybox - Embedded YouTube (using YouTube API) doesn't load on iOS

I am using Fancybox to display videos that are uploaded to YouTube. I want to carry out actions when the video has ended (in this case, moving from the video to the next element in the group - an image), so I am also using the YouTube API.
The page works perfectly fine on desktop browsers (and I think Android but I haven't tested that extensively yet), but on my iPhone it fails to load the video. The overlay is coming up, but it appears to try to autoplay the video and then becomes black.
I am currently using jQuery 1.8.3 (I tried it with 1.10 but it didn't work, so I gave downgrading a shot) and Fancybox 2.1.5.
Here's the relevant HTML:
<div class="content" id="main">
<div id="logo">
<a class="fancybox fancybox.iframe" id="logo-link" data-fancybox-group="group01"href="http://www.youtube.com/embed/Bc0qNwaSxlM"></a>
<a class="fancybox" id="v-link" data-fancybox-group="group01" data-fancybox-type="image" href="img/superhard_v.png" title="
</div>
</div>
JavaScript:
window.onYouTubePlayerAPIReady = function() {
// Initialise the fancyBox after the DOM is loaded
$(document).ready(function() {
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
helpers: {
media: {},
overlay : {
css : {
'background' : 'rgba(0, 0, 0, 0.95)'
}
}
},
youtube : {
vq: 'hd1080'
},
padding: 0,
margin: 30,
autoSize: false,
arrows: false,
'closeBtn' : false,
beforeShow : function() {
// Find the iframe ID
var id = $.fancybox.inner.find('iframe').attr('id');
// Create video player object and add event listeners
var player = new YT.Player(id, {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
if (this.index === 1) {
$('.fancybox-outer').css("padding-bottom","100px");
}
},
afterShow: function() {
if (this.index === 1) {
$("img.fancybox-image").click(function(event) {
event.preventDefault();
newLocation = "vanity/";
$('body').fadeOut(1000, newPage);
});
$('#return-link').click(function(event) {
event.preventDefault();
$.fancybox.close();
});
}
},
tpl: {
wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin" style="background-color:transparent;"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>'
},
iframe: {
preload: false
}
});
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
// Fires when the player's state changes.
function onPlayerStateChange(event) {
// Go to the image after the current one is finished playing
if (event.data === 0) {
setTimeout(function(){$.fancybox.next()},1250);
}
}
I put in autoSize and preload: false for iframe because of solutions I came across from other peoples questions, but they did not work. I was particularly hopeful the latter would work because of this question and the example JSFiddle, but it didn't work, which led me to believe that maybe it's an issue with the API? I also looked at the example on the Fancybox homepage which uses the API, and it also did not work on my iPhone, further confirming my suspicion.
If anyone has a workaround or any idea of how to fix this, it would be much appreciated. Thanks!

Why not re-check the various examples used in the fancybox website:
You can try this:
*Html*
<li>
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
</li>
Javascript:
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
Our check their official fiddle for youtube iframe: This is their fiddle
Html:
<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?enablejsapi=1&wmode=opaque">Video #1</a>
<br />
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/cYplvwBvGA4?enablejsapi=1&wmode=opaque">Video #2</a>
You can check out the remainin'

JS: Slide open multiple divs

So I found a script to slide open multiple divs but I can't seem to get it to work. I thought it was something wrong with my main page, but I created a separate page and still can't seem to get it to work.
No messages in debugger, and no errors; but the DIV doesn't appear.
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type='text/javascript'>
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
</script>
<a class="show_hide" href="#" rel="#slidingDiv">View</a></pre>
<div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>

It is working, for me. You forgot to call function showHide(), actually, and you can do it on this way:
$(document).ready(function() {
$('.show_hide').showHide();
});
http://jsbin.com/amuhom/1/edit
I have added one div and one button more. I guess this is expected behavior?

How do I make fancybox href dynamic?

I have the following fancybox code:
$('.fancybox').fancybox({
'autoScale' : false,
'href' : $('.fancybox').attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
the problem is I have twenty different A tag id's on the page and I want the fancybox href attribute to take the id of the clicked element, ie the one that triggered the event.
I have tried several things, none of them have worked!
'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),
This seems so simple but anytime I plug in 'this' or similar nothing works.

Without each() or click() simply add the beforeLoad callback to your script like this
$(".fancybox").fancybox({
autoScale: false,
// href : $('.fancybox').attr('id'), // don't need this
type: 'iframe',
padding: 0,
closeClick: false,
// other options
beforeLoad: function () {
var url = $(this.element).attr("id");
this.href = url
}
}); // fancybox
NOTE: this is for fancybox v2.0.6+
On the other hand, a more elegant solution is to use (HTML5) data-* attribute to set the href (it would look weird to set id="images/01.jpg" otherwise) so you could do :
<a href="#" id="id01" data-href="images/01.jpg" ...
and your callback
beforeLoad: function(){
var url= $(this.element).data("href");
this.href = url
}
and use the id attribute for what is meant for.
EDIT : The best is to use the special data-fancybox-href attribute in your anchor like :
<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery" href="javascript:;">jsfiddle</a>
and use a simple script without callback like
$(".fancybox").fancybox({
// API options
autoScale: false,
type: 'iframe',
padding: 0,
closeClick: false
});
See JSFIDDLE

You can iterate over your collection of .fancybox items and grab the id.
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : $(this).attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});

Try this:
$(".fancybox").click(function(){
var url = $(this).attr('id');
$.fancybox({
'autoScale' : false,
'href' : url ,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
})

Try this
$('.fancybox').each( function() {
var elem = jQuery(this);
elem.fancybox({
'autoScale' : false,
'href' : elem.attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
});
}
);

Have you tried this?
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : this.id,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});

Fancybox: Get id of clicked anchor/element

I am trying to get the id of the clicked/shown element in fancybox. I have tried both "this.id" and "this.attr("id")" - but none of them works.
$("a.lightbox_image").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'content': 'Id of element clicked'+this.attr("id")
});
Any suggestions?

You can do it like this:
$("a.lightbox_image").each(function() {
$(this).fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'content': 'Id of element clicked' + this.id
});
});
this refers probably to window where you're binding currently (or document if in the ready event, can't be sure without seeing more code). For this to be the <a> like you want, you should use a .each() loop and assign it there...inside the .each() closure, this refers to the anchor.

I had problems using Nick Craver's solution together with "onClosed" function and after some tests I found working solution:
$("a.lightbox_image").each(function() {
var tthis = this;
$(this).fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
onClosed : function() {
alert(this.id);
}
});
});
This, in my case, was used to reload row with data after closing fancybox window where that data was edited.

This seems to work for me :)
<div class="thumbnail">
<a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_4">
<img src="/dir/image4.png" alt="x" style="width:200px;height:160px;" />
</a>
<a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_5">
<img src="/dir/image5.png" alt="x" style="width:200px;height:160px;" />
</a>
<a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_6">
<img src="/dir/image6.png" alt="x" style="width:200px;height:160px;" />
</a>
</div>
The javascript:
$(document).ready(function() {
$(".fancybox").attr('rel', 'gallery').fancybox({
loop : false,
afterLoad: function(current, previous) {
console.log(this.element[0].id)
console.info( 'Current: ' + current.href );
console.info( 'Previous: ' + (previous ? previous.href : '-') );
if (previous) {
console.info( 'Navigating: ' + (current.index > previous.index ? 'right' : 'left') );
//When navigating, we want to add the next set of images! :)
new_images = getNextFancyImages(current.index > previous.index ? 'right' : 'left')
}
}
});
});
In firebug, you can see the logging :)

The answers which suggest using an each loop are correct, but if you're using any of the callbacks (beforeShow, beforeLoad, onUpdate etc) there's one important detail to understand.
In the context of your each loop, this refers to the element which will get clicked.
But as soon as you're inside the fancybox callback, this refers to the fancybox object.
The trick is to store the elements this into another variable, e.g that.
Then refer to that in your callback.
$('.fancybox').each(function() {
var that = this;
$(this).fancybox({
beforeLoad: function() {
var id = $(that).attr('id');
console.log("id of element clicked is: "+id)
}
});
});

The each(function() solution breaks the gallery (in other words, no more Next and Prev button).
A solution that seems to work and saves the gallery is to assign a function to the click event on the element before fancyBox is called and save the id to a unique div.
For instance:
$(document).ready(function() {
$(".fancybox").click(function() { $("#<unique_div>").data("clickedid", this.id); }).fancybox({
beforeShow: function () {
this.title += '<br />';
this.title += 'Clicked id: ' + $("#<unique_div>").data("clickedid");
},
prevEffect: 'none',
nextEffect: 'none',
loop: false,
fitToView: false,
helpers: { title: { type: 'inside' } }
});
});