Working on a webshop, and using fancybox to a quickshop type thing. My problem is that when user click "Add to basket" in fancybox, fancybox should close and refresh parent page. Using this:
$(".quickshop").fancybox({
'autoDimensions' : true,
'width' : 798,
'height' : 480,
'autoScale' : true,
'scrolling' : 'true',
'type' : 'iframe',
'titleShow' : false,
'onClosed': function() {
parent.location.reload(true);
}
});
And it does the trick, but it also reloads page when user just clicks the normal close button.
So is there any way to check if "Add to basket" link has been clicked, and only then reload page?
This should work:
Add to basket
Where "webshob.aspx" is a link to the page you have a fancybox on.
Related
I am using fancybox and want to disable loading animation.
My code:
$(document).ready(function() {
$("#mypop").fancybox({
'onStart ': function(){ $.fancybox.hideActivity },
'onComplete' : function(){ $.fancybox.hideActivity },
'href' : 'file.php',
'transitionIn' : 'none',
'transitionOut' : 'none',
'titleShow' : false,
'overlayColor' : '#fff',
'overlayOpacity': 0.8,
});
});
And the loading animation still works what do I do worng ?
The docs say $.fancybox.hideLoading() for v2 if that is any good to you.
http://fancyapps.com/fancybox/#docs
Edit - #user1139767
You are missing the ()'s from the end of the $.fancybox.hideActivity() calls.
This post (http://stackoverflow.com/a/3673152/1791606) mentions the loading animation not appearing because of using an iframe as the type which accidentally achieves what you seem to be wanting to do.
I am using the following Modal popup script: http://fancyapps.com/fancybox/
I have a modal popup with a IFrame. In the iFrame there is a a registration form. When the user registers they are redirected to a members only page. Currently they are being redirected in the same modal window. I want it so that the modal window closes and a the page where they clicked the modal window redirects to the members only link.
Here is the javascript:
$(document).ready(function() {
$(".various").fancybox({
'width' : '85%',
'height' : '86%',
'paddingTop' : '40',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
Here is the HTML that calls the modal box:
<a class="various button" data-fancybox-type="iframe" href="/signup-test">
Since you only want to redirect members who've successfully registered, you need to insert code to redirect the user into the success function of your registration and/or validation code.
I can't address your specific example without the rest of your code, but two ways to do this are:
Option 1 - Create A Javascript Function
You can create a Javascript function which closes the iframe and redirects the user. The trick to doing this is putting the script in the parent document so that the script continues executing once the iframe closes.
This function goes in the parent document:
function closeiframe_redirect(url){
$.fancybox.close();
window.location = url;
}
Insert this code when you want to call the function:
parent.closeiframe_redirect('members_page.html');
Option 2 - In an AJAX Success Function
submitHandler: function (form){
$.ajax({
type: 'POST',
url: 'registration-exec.php',
data: $("#loginForm").serialize(),
success: function(data) {
if(data == "true") {
// This closes the Registration Form
$("#registrationForm").fadeOut("fast");
window.location = 'members_page.html'
}
});
}
here is the code i used
eventClick: function(event) {
$.fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'href': event.url,
});
return false;
},
............
when i click it for the first time it opens fine in a fancybox but when i click again it moves to a new page (event.url).Also there is tooltip being used and it goes null after the fancybox is opened for the first time
Use the following code to open Fancybox with url. It should work.
$('a.yourAnchor').fancybox({
'overlayColor': '#fff',
'autoDimensions': true,
'hideOnContentClick': false,
'scrolling': false
});
When using fancybox with an overlay, I seem to have issues with the jQuery working?
View it at mg.hejmej.com/index.html (2nd box from the left)
Since you are targeting your youtube videos via embed mode
http://www.youtube.com/embed/HGVTaIlzocM
then you need the proper fancybox script using 'type':'iframe':
$("a.fancybox-vidz").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'type' : 'iframe',
});
You may optimize your link to autoplay and to position itlself behind the fancybox close button like
<img alt="Photo" src="images/h3.jpg" class="fade" style="opacity: 1;">
I'm styling a ruby-on-rails app and I've got a link to an external page which opens in fancybox.
The external page is styled with blueprint's 24 column width (950px wide).
I've hidden the wide elements (display:none in css) from that page so that the elements I'm interested in are only 250px wide in fancybox.
But when it opens in fancybox it somehow still seems to read the .span-24 attribute rather than opening at the smaller size.
I can't create another external page and must use the blueprint styled one. Any advice on how to force fancybox to open, centered, as a 250px wide box?
Edit:
Here is the code I'm currently using:
$(document).ready(function() {
$("a#fancypants-1").fancybox({
'autodimensions' : true,
'width' : 250,
'scrolling' : 'no',
'opacity' : true,
'overlayShow' : true,
'overlayColor' : '#000',
'overlayOpacity' : 0.8,
'transitionIn' : 'elastic',
'hideOnContentClick': false ,
'transitionOut' : 'none'
});
});
try like this
$.fancybox({
'autoDimensions' : true,
'height': 'auto',
'width':250px;
'scrolling' : 'no',
'transitionIn' : 'none',
'transitionOut' : 'none',
});