We Keep Coding

How to load fancybox when the visitor comes from a referer?

Update: Now it popups from a specific referer =)
Here is my fancybox code:
if (document.referrer) { //if for the referrer
referrerone = /referrersite.com/;
if (referrerone.test(document.referrer)) {
$(document).ready(function(){
$(".fancybox").fancybox({
});
$(".various").fancybox({
hideOnContentClick: true,
showCloseButton: false,
transitionOut : 'none',
transitionIn : 'none',
}).trigger('click');
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
}
}
I want to add some static rules like the Popup plug-in for wordpress allows:
-Fancybox will auto close after some seconds.
-Not from an internal link: Shows the PopUp if the user did not arrive on this page via another page on your site.

You can use
document.referrer
to get the last page which your page has been loaded from

Jquery plugin make it bind onclick

I have a jquery plugin which i have purchased from code canyon for social sharing.
I have it configured for single item sharing, however I wish to make it connected to multiple instances on a page.
<script>
$('a.shareplus').shareplus({
icons: "facebook,twitter,google",
height : '150px',
width : '150px',
shareurl : '#application.settings.websiteurl#/article/' + $(this).attr('data-href'),
displayTitle : true,
title : 'Share this item from',
sticker : false,
pin : false,
gplus : false,
tweets : false,
fbLikebox : false
});
</script>
This works perfectly for a single item that is shared on a webpage. Ive searched the documentation for this plugin, however I cant find any reference for it to be attached to multiple items on a single page.
What Im wondering is.. Im thinking about using the .bind() method to connect to it on click and using the data-href custom attribute to define the page for it to be connected to.
But this doesnt seem to work.
<script>
$('a.shareplus').bind('click',shareplus({
icons: "facebook,twitter,google",
height : '150px',
width : '150px',
shareurl : '#application.settings.websiteurl#/article/' + $(this).attr('data-href'),
displayTitle : true,
title : 'Share this item from',
sticker : false,
pin : false,
gplus : false,
tweets : false,
fbLikebox : false
});
})</script>
Im not too sure on how to connect the bind api to links that contain functions that have parameters so any help greatly appreciated

Try to write your code in document.ready() and use on() instead of bind() also use data() for data attributes like,
$(function(){
$('a.shareplus').on('click',function(){
$(this).shareplus({
icons: "facebook,twitter,google",
height : '150px',
width : '150px',
shareurl : '#application.settings.websiteurl#/article/'+$(this).data('href'),
displayTitle : true,
title : 'Share this item from',
sticker : false,
pin : false,
gplus : false,
tweets : false,
fbLikebox : false
});
});
});

Fancybox overflow is hidden

I am using fancybox 2 and am appending html content to the modal. I turned of scrolling, and now the content that overflows the modal is hidden. Is this a problem with the max-height of the modal? How do I fix this?
My Code:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});

You have multiple possible reasons this is breaking.
We need more info for a definitive answer, but here are some likely/possible reasons.
Try a few of these parameters:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'height' : 1000, <--- Try these one at a time
'autoHeight' : true, <--- Try these one at a time
'autoResize' : true, <--- Try these one at a time
'fitToView' : true, <--- Try these one at a time
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});
You can read the full plugin options documented here:
http://fancyapps.com/fancybox/#docs

Calling fancybox gallery which has iframe and images

what I'm trying to do is to call fancybox gallery which has and iframe and couple images, by clicking a non related div. Everything works fine with image group, but when i try to add an iframe it shows "The requested content cannot be loaded.
Please try again later."
Below is html and javascript:
<div id="gallery_1">Gallery</div>
<script>
$('#gallery_1').click(function (){
$('#gallery_1').addClass('cur_gal');
$.fancybox([
'iframe.html',
'2.jpg',
'1.jpg'
],
{ 'padding' : 0,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'type' : 'image',
'changeFade' : 1,
'loop' :false,
afterClose: function() {
$('#gallery_1').removeClass('cur_gal');
}
});
});
</script>
I tried to remove 'type' : 'image' , but then the iframe doesn't show.
I've also tried to change type to iframe, but then the images are messed up. The sizes are incorrect, and the scroll bar appears.
So maybe someone has any ideas how to display iframe and images correctly?

You need to specify the type of content individually but you are doing it globally so try modifying your script this way
$(document).ready(function () {
$('#gallery_1').click(function () {
$('#gallery_1').addClass('cur_gal');
$.fancybox([{
href: "iframe.html",
type: "iframe"
}, {
href: "image2.jpg",
type: "image"
}, {
href: "image1.jpg",
type: "image"
}], {
padding: 0,
// 'transitionIn': 'fade', // for v1.3.4 not compatible
// 'transitionOut': 'fade', // for v1.3.4 not compatible
// 'type' : 'image', // sets type of content globally
changeFade: 1,
loop: false,
afterClose: function () {
$('#gallery_1').removeClass('cur_gal');
}
});
});
}); // ready
See JSFIDDLE
EDIT : you can also change this lines
$('#gallery_1').click(function () {
$('#gallery_1').addClass('cur_gal');
into this
$('#gallery_1').click(function () {
$(this).addClass('cur_gal');

Check if jQuery "Fancybox" is already registered?

I'm regestering a jQuery fancybox like so:
$(document).ready(function() {
$("#help").fancybox({
'width': '90%',
'height': '90%',
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'none',
'titleShow': false,
'type': 'iframe'
});
});
However, on page transfer/postback it is getting registered multiple times, which slows it down to the point of breaking. Is there a way to check if the event is already registered, and if not, register it?
Pseudo code:
//check if fancybox has not been registered
if($("help").fancybox == null))
{
//register fancy box
}

When fancybox runs, it adds a fancybox entry into jQuery's data object.
You can test for its presence:
if( ! $("#help").data().fancybox )
{
//register fancy box
}

Fancybox uses $(element).data() to store its element related configuration. You just have to check if a fancybox exists.
$("#fancy").data("fancybox");
See this fiddle for more fnu.

This Function looks for your #help Element and loads the fancybox.js only if it's present. After successfully loading the Fancybox.js it'll call the success function and init your fancybox.
This will only affect pages which have the element #help. So you save HTTP Requests and bandwidth.
See: http://api.jquery.com/jQuery.ajax/
You should also look for the error function which allows you to handle errors.
$(document).ready(function() {
// Look for #help
if ( $('#help').html() !== null ) {
// Load, init and config the fancybox
$.ajax({
url: '/js/path/to/fancybox.js',
type: 'GET',
dataType: 'script',
success: function() {
// Init Fancybox
$("#help").fancybox({
'width': '90%',
'height': '90%',
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'none',
'titleShow': false,
'type': 'iframe'
});
}
});
}
});

Bit late, but for Fancybox 2 I use:
parent.jQuery.fancybox.isOpen
I think that you can also use:
parent.jQuery.fancybox.isOpened
Both statements will return true if fancybox is open on the site.