Fancybox script not working - javascript

I have used Fancybox on multiple occasions and never run into this problem. I have included both jQuery and Fancybox files in the header, linked up the first order button the the page to open up an iframe in a Fancybox. However I cant seem to get it to work at all. It doesn't open an iframe and instead goes straight to the page I was trying to open inside the Fancybox iframe.
Can somebody point out whatever blindingly obvious mistake I've made this horrible Monday morn?
Testing server can be found here:
http://www.designti.me/testing/flipstick/original.php

The error message is: Uncaught TypeError: Object #<an Object> has no method 'fancybox'
Which implies that fancybox hasn't loaded. Taking a close look at your source we see <script type="text/x-ecmascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> which you can see uses x-ecmascript rather than javascript. Change that and you should be fine.

You didn't put your code into the ready handler:
$(function() { // <-- you need this
$("a.iframe").fancybox({
//...
});
}); // <-- and this

Maybe to put it in document.ready?
$(document).ready(function() {
$("a.iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});

Use this:
jQuery(document).ready(function() {
jQuery("a.iframe").fancybox({
'type' : 'iframe', //<--missing comma here
'width':750,
'height':500 //<-- removed last comma here
});
});

Related

Open fancybox iframe when click on a div

Using fancybox2 and try to open YouTube video when click on div
<div class="vid" data-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1">This DIV should open fancybox</div>
$(".vid").fancybox({
type: "iframe",
onStart: function (el, index) {
var thisElement = $(el[index]);
$.extend(this, {
href: thisElement.data("href")
});
}
});
But its dosent work, please help.
jsfiddle
Well, I don't know why you are complicating this fancybox thing like this,
Why do you need your 'thisElement' var? You should give us some more details to be sure we really understand what you need... I give you here some tips to open fancybox.. :
when you use fancybox, just start it like this :
//event function(){
$('.vid').click(function(){
$.fancybox({
//settings
'type' : 'iframe',
'width' : 640,
'height' : 480,
//You don't need your thisElement var, see below :
'href' : $(this).data('href')
});
});
and put your settings into it,
here is a starting point for you, now just customize it to make it better for your needs :
http://jsfiddle.net/rtp7dntc/9/
Hope it helps!
To make things much simpler you could use the special data-fancybox attributes on your div like
<div class="vid" data-fancybox-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1" data-fancybox-type="iframe">This DIV should open fancybox</div>
Then use a script as simple as this
jQuery(document).ready(function ($) {
$('.vid').fancybox();
}); // ready
See JSFIDDLE
NOTE:
The disadvantage of triggering fancybox programmatically as in the accepted answer is that it will only trigger a single fancybox but won't work for a gallery, while you can bind a fancybox gallery of several divs using the data-fancybox-group attribute.

JQuery & Fancybox clicking image to open a new page/link (Update existing code)

Good morning,
Iv got a page that currently opens an event image when users land on our main page, this code was already in place and I am simply trying to add in a link to an event we are hosting. (Modify the code) I have been trying to use .wrap and "content" along with a few other things I found on here, however I am unable to modify the code correctly. (When I have made attempts the page will simply quit appearing, so I know there is an error) I am not to familiar with java/fancybox so any help with modifying this current code would be greatly appreciated!
Here is what I currently have:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.fancybox({
'autoScale' : false,
'width' : 783,
'height' : 700,
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'type' : 'iframe',
'titlePosition' : 'inside',
'overlayColor' : '#fff',
'href' : '/img/treeofdreams.jpg'
});
});
</script>
PS I tried to even just change the height on the iframe to add in the following below the image:
For more details visit our FaceBook page: Click Here
However it appears the iframe doesn't want to share more real estate below!
Thank you,
If you just want to add a link to the image that is shown in fancybox, then .wrap() method is the way to go, however you may need to know exactly what selector you need to target and wrap it within the onComplete (v1.3.4) callback
So try this code :
jQuery(document).ready(function ($) {
jQuery.fancybox({
autoScale: false,
width: 783, // or whatever needed
height: 700,
transitionIn: 'elastic',
transitionOut: 'none',
// type: 'iframe', // you don't need this for images
titlePosition: 'inside',
overlayColor: '#fff',
href: '/img/treeofdreams.jpg', // the URL of the image
title: "the title", // you may need this
onComplete: function () {
jQuery("#fancybox-img").wrap(jQuery("<a />", {
href: "http://facebook.com/", // the URL to open after clicking the image
target: "_blank", // opens in a new window/tab
title: "go to facebook" // optional, shows on mouse hover
}))
}
});
}); // ready
Notice #fancybox-img is the selector ID of the fancybox image.
See JSFIDDLE
Note: this is for fancybox v1.3.4

Fancybox 1.3.4 - no overlay after reloading

I'm developing a ajax popup system. One of functionalities is, when ajax gathers any new data, to show it using Fancybox. There are two scenarios:
user reads data brought by ajax, and closes fancybox.
user is AFK. When another data comes in, it should be appended to already displaying fancybox content
my html container for fancybox looks like this:
<div id="notifications_fancybox">
<div class="notifications_fancybox_title">
Powiadomienia
</div>
<div id="notifications_fancybox_content">
</div>
</div>
where notifications_fancybox has display: none; in css.
Fist I wanted to just $('#otifications_fancybox_content').append('some html'); append some data, but it seems that after fancybox have been initialized, somehow it won't let me append anything.
So I found another way to do that:
When new data comes in, first check if fancybox is already opened:
nl.isFancyboxOpened = function(){
if($('#fancybox-wrap').is(':visible')) return true;
return false;
};
if it is opened, close it:
if(nl.isFancyboxOpened()){
$.fancybox.close();
}
append some data
$('#otifications_fancybox_content').append('some html');
and open fancybox
nl.openFancybox = function(){
if(nl.isFancyboxOpened() == false){
$.fancybox(
$('#notifications_fancybox').html(),
{
'autoDimensions' : false,
'overlayShow' : true,
'hideOnOverlayClick' : false,
'showCloseButton' : true,
'width' : 450,
'height' : 400,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
}
else{
$.fancybox.resize();
}
};
Now, the main problem:
When fancybox is displayed for the first time, everything is fine - there's overlay, buttons and so on.
When more ajax data comes for being displayed and I try to go through above procedure (close-append-reopen), everything again seems fine except... there is no overlay! So user can click on everything on the page, and I don't want him to.
Okay, I've managed to solve the problem. Not exactly what I wanted, but I'll work fine enough.
My solution uses onComplete callback to force display property of overlay to be set to block. It's packed in setTimeout because calling it instantly won't work. Also reducing timeout below certain time will cause this solution to fail. I believe there's a better way to solve this, but I haven't found one... yet ;)
$.fancybox(
$('#notifications_fancybox').html(),
{
'autoDimensions' : false,
'overlayShow' : true,
'hideOnOverlayClick' : false,
'showCloseButton' : true,
'onComplete' : function(){setTimeout(function(){$('#fancybox-overlay').css('display', 'block');}, 250);},
'width' : 450,
'height' : 400,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);

jQuery FancyBox YouTube videos not working

I have a situation whereby I cannot modify the HTML code for the anchor tag, with the exception of the 'href' attribute. So adding a class to the anchor tag is not an option.
The HTML markup is as follows:
To distinguish between this and other links, I have added a selector based on the 'href' to the jQuery code.
The code is as follows:
(function ($) {
$('a[href*="youtube"]').fancybox({
'padding' : 0,
'type' : 'swf',
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' }
});
e.preventDefault();
})(jQuery);
This does not seem to be working at all. Can anyone tell me where I am going wrong? I am using Drupal, hence why I have added the part at the top to enable to '$'.
I cannot see any errors in the console, the page simply navigates straight to the YouTube page with no JavaScript intervention.
adding a class to the anchor tag is not an option
That is not necessarily true since you can always add the class via jQuery like
$('a[href*="youtube"]').addClass("fancybox")
Anyway, personally I don't like to use the swf mode for youtube videos any more but iframe mode; that makes them easier to handle and cross-platform compatible (including iOS)
What I would do is, using the .each() method :
convert every single href to embed format using javascript .replace()
bind each anchor to fancybox
set the new converted href using the fancybox href API option
This is the code that works for both fancybox v1.3.4 or v2.x :
(function ($) {
$(document).ready(function(){
$('a[href*=youtube]').each(function () {
// convert youtube swf href to embed for iframe
var thisHref = this.href
.replace(new RegExp("watch\\?v=", "i"), 'embed/')
.replace(new RegExp("&", "i"), '?');
// bind fancybox to each anchor
$(this).fancybox({
"padding" : 0,
"type" : "iframe",
// add trailing parameters to href (wmode)
"href" : thisHref + "&wmode=opaque"
}); // fancybox
}); // each
}); // ready
})(jQuery);
Notice that I added wmode=opaque, otherwise the close button will be behind the youtube video.
See JSFIDDLE with version 1.3.4 ... or JSFIDDLE with v2.1.4
You have missed the doc ready handler inside the closure and there is no need for the e.preventDefault():
(function ($) {
$(function(){
$('a[href*="youtube"]').fancybox({
'padding' : 0,
'type' : 'swf',
'href' : this.href.replace(/watch?v=/gi, 'v/'),
'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' }
});
});
})(jQuery);

Load new content in Fancybox on Fancybox onClosed event

I'm stuck with a problem with Fancybox windows. I use fancybox to display the content of a hidden div on my page (".popup" fancybox below). In that content, there is a link to a new fancybox content called #exemple. When I click on the link in the first fancybox, it loads the second fancybox content (iframe - this works fine). But I'd like to come back to the first fancybox when the user hits the close button of the second fancybox.
I tried with "onClosed" event but it doesn't work ...
Is there a way to do that?
Thank you in advance for your help!
Here is the code I use :
$("#exemple").fancybox({
'width' : '100%',
'height' : '100%',
'titleShow' : true,
'titlePosition' : 'over',
'titleFormat' : formatTitle,
'autoScale' : false,
'centerOnScroll' : true,
'type' : 'iframe',
'onClosed' : function() {
alert('test');
$(".popup").trigger('click');
}
});
$(".popup").fancybox({
'autoScale' : false,
'centerOnScroll' : true
});
// and here is the HTML code to trigger the hidden div:
<a style="font-weight: bold;" href=#data class=popup>our data</a>
//and the HTML code of the link inside the hidden div that gets displayed in the fancybox:
<a id=exemple title="xxx" href=xxx.php?id=xxx>link</a>
I was working with same thing and onClosed was not working. After lots of research I figured out that there is some kind of versioning problem and onClosed works in older versions of fancy box. The other approach, which worked for me, is as following using beforeClose instead of onClosed.
‘beforeClose’: function() { alert(‘test’) },
This might be helpful for some of the readers.
It would help if you had a jsFiddle to work from, but first try wrapping the onClosed function code in a setTimeout. A zero time should be sufficient:
'onClosed' : function() {
setTimeout(function(){
$(".popup").trigger('click');
}, 0);
}
'onClosed'=> 'js:function() { alert("test") }',
note : we need to put "js:"
i m calling fancybox automatically (using extension)
It is Working fine for me

Categories

Resources