Im useing facybox 2.1.5 to show an iframe, and i need the url
be same as the url inside fancybox, which need to be dynamic.
For example, if i open www.wikipedia.com in fancybox my url should be
www.wikipedia.com, and if in wikipedia i will click some other link my url has to change properly without refreshing the page (www.wikipedia.com/something).
Update, and when i will close the fancybox my url will back to normal.
**Assume, in wikipedia the url and the content is changing witheout refreshing (ajax).
Here some code of mine:
$('.fancybox').fancybox
({
type: "iframe",
padding: 0,
fitToView: false,
autoSize: false,
'scrolling' : 'no',
wrapCSS: 'fancybox-custom',
closeClick: true,
openEffect: 'none',
helpers:
{
title: {
type: 'inside'
},
overlay:
{
css:
{
'background': 'rgba(238,238,238,0.85)'
}
}
},
beforeShow: function ()
{
this.width = '60%';
this.height = ($('.fancybox-iframe').contents().find('body').height()) + 500;
}
});
document.getElementById("FrameID").src
This function can be used to get the url out of an i-frame. you can update your url with value returned by this function.
you can use change of url returned by the function as a trigger
var _url
_url = document.getElementById("FrameID").src;
function do(){
if(_url != document.getElementById("FrameID").src){
//update url here
}
setTimeOut("do()",1000);
}
Related
We're using fancybox 2 to launch a donation process in our app. Upon completion, the modal closes and opens up another "thank you" modal. We're seeing some odd behavior if you close that "thank you" modal and click on the "Donate" button again. The modal background overlay briefly appears and then disappears, and the modal doesn't show up. But, if you click it again, it works just fine.
I haven't been able to find any references to this happening to anyone else. We have a live demo where you can see the behavior here: https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.participant&participantID=8558#donate
(The donation modal should open automatically, but if not, click "Support Me") Make a donation using a test credit card number (e.g., 4111111111111111) -- obviously, this won't actually charge you anything.
The relevant javascript code starts at line 162 if you view source. (I'll also include it at the end of this post).
I thought maybe it was because I wasn't explicitly closing any fancybox modals prior to opening the new ones, but that didn't change anything. So, I'm open to suggestions on what may be causing this. It's very weird.
Thanks!
Relevant JS:
<script type="text/javascript">
jQuery(function($) {
openExpressDonate = function() {
$.fancybox({
closeBtn: false,
closeEffect: 'none',
helpers : {
overlay : {
closeClick: false,
css: {'background-color': 'rgba(0, 0, 0, 0.60'},
locked: true
}
},
href: 'https://demo.donordrive.com/index.cfm?fuseaction=expressDonate.modalparticipant&ParticipantID=8558',
margin: 0,
maxWidth: 400,
height: 'auto',
openEffect: 'none',
padding: 1,
scrolling: 'no',
type: 'iframe'
});
}
$('.js-express-donate').on('click', function(e) {
e.preventDefault();
if (window.ga) {
ga('send', {
hitType: 'event',
eventCategory: 'Express Donate - Participant',
eventAction: 'Donation Started',
eventLabel: 'Event 1183'
});
}
openExpressDonate();
});
if (location.hash && location.hash == '#donate') {
$('.js-express-donate').click();
}
resizeExpressDonateModal = function() {
$.fancybox.update();
}
showExpressDonateThankYou = function(target, data) {
$.fancybox({
afterShow: function () {
fancyParent = $('.fancybox-wrap').parents(); // normally html and body
fancyParent.on('click.modalThanks', function () {
$.fancybox.close();
fancyParent.off('click.modalThanks');
});
$('.fancybox-wrap').on('click', function (event) {
// prevents closing when clicking inside the fancybox wrap
event.stopPropagation();
});
},
helpers : {
overlay : {
closeClick: false,
css: {'background-color': 'rgba(0, 0, 0, 0.60'},
locked: true
}
},
href: 'https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.modal' + target + 'ExpressDonateThanks&donorID=' + data.values.donorID + '&CSRFToken=' + data.values.CSRFToken + '&n=' + data.values.isNewConstituent,
margin: 0,
maxWidth: 400,
minHeight: 300,
modal: 1,
openEffect: 'none',
padding: 1,
scrolling: 'no',
type: 'iframe'
});
}
});
</script>
We've solved this. A fresh set of eyes found that we had an explicit fancybox.close() call that was firing when clicking on the "thank you" modal's parent (a holdover from another feature where we have such a modal, but the user can't re-open it from that same page). We removed that and it appears to be fixed.
I am using fancybox to allow my users to show pictures in full size.
$(document).ready(function () {
$('body').on('click', 'img', function () {
var src = $(this).attr('src');
$.fancybox.open([
{
type: 'iframe',
href: src,
title: '1st title'
}
], {
padding: 0
});
})
});
However one of my images is rather wide:
Which gives the following when open in fancybox:
So can anyone tell me what i can do to make sure the image matches?
I have below jquery code that load an external page in bootstrap modal popup. I need to pass querystring parameter "type" but for some reason the modal popup doesn't reads it on load. How do i achieve it?
// load modal popup
function loadPopup(type)
{
BootstrapDialog.show({
title: 'Candidates',
size: BootstrapDialog.SIZE_WIDE,
closable: false,
message: function(dialog) {
var $message = $('<div></div>');
var pageToLoad = dialog.getData('pageToLoad');
$message.load(pageToLoad);
return $message;
},
buttons: [{
label: 'Close',
action: function(dialogItself){
dialogItself.close();
}
}],
data: {
'pageToLoad': 'Candidates.aspx?type=' + type
}
});
}
To be sure your "type" don't break the url, you could encode it:
data: {
'pageToLoad': 'Candidates.aspx?type=' + encodeURIComponent(type)
}
I am building an angularJS webapp and I want to open a youtube video by calling a method of my constructor. To achieve that; I want to reproduce the same behavior as
$(document).ready(function() {
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'fade',
closeEffect : 'fade',
padding: 0,
helpers : {
media : {},
buttons : {}
}
});
});
But using the manual way, $.fancybox.open([ ... ]). Can someone guide me on how to do it?
$.fancybox.open({
content: '<iframe width="xxx" height="xxx" src="//www.youtube.com/embed/xxxxxxxx" frameborder="0" allowfullscreen></iframe>'
});
You don't need to set the full iframe HTML tag as content in the fancybox API options but passing the video's URL and set the type to iframe. You could simply do :
jQuery(document).ready(function ($) {
$.fancybox.open({
href: "https://www.youtube.com/embed/jid2A7ldc_8",
type: "iframe",
// other API options
openEffect: 'fade',
closeEffect: 'fade',
padding: 0,
helpers: {
buttons: {}
}
});
}); // ready
See JSFIDDLE
I want to disable browser scrolling when fancybox opened. And next code works:
helpers: {
overlay: {
locked: true
}
},
But on mobile devices window jump to top during fancybox opening. This behavior depends at locked: true param. How can I lock overlay and prevent jumping?
Different decisions, such as:
$('html').css('overflow', 'hidden')
or
$(document.body).bind('touchmove', function(e) {
e.preventDefault();
e.stopPropagation();
e.returnValue = false;
});
Works, but not in all mobile browsers!
I also had to deal with this issue and it has driven me mad. I tried nearly all options, searched all questions and answers on stackoverflow but nothing seemed to work with my ajax-lightbox. I always jumped to the top. Then I did the following:
$(".lightboxe-fancyboxWindow").fancybox({
type : 'ajax',
href : "<?php echo $_SERVER['PHP_SELF']; ?>",
ajax: {
type: "POST",
data: {
'data1' : information1,
'data2' : information2
},
},
autoSize: false,
width: '60%',
beforeShow : function() {
$("body").css({"overflow" : "hidden", "padding-right" : "17px"});
},
afterClose: function () {
$("html, body").removeAttr("style");
},
titleShow : false,
helpers : {
overlay : {
locked : false
},
title : null
},
});
What I did was to add overflow hidden on body tag and 17px padding for the fake-scrollbar.