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.
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.
So I've setup a fancybox with boxslider.
I have some problems with the boxslider when opening the fancybox again after closing it the first time.
website (please note that the onclick is only applied to the first block (top row, most left))
The fancybox is called by the code below:
<div class="img-spacer" onclick="$.fancybox({href : '#portfolio-1', width: 1040, margin: 0, padding: 0, closeBtn: false}); $('.bxslider').bxSlider({auto: true,controls: false,pager: false});">
This code works just fine when opening the fancybox for the first time but when I close the fancybox and open it again the boxslider is not working anymore like it is supposed to. It will skip some photo's and won't slide smoothly.
Any suggestions on how to fix this?
Like I mentioned in my comment, you need to move the fancybox init out of the inline click handler, in into your JS file.
$(document).ready(function() {
// Attach fancybox to every .image-spacer div
$("img-spacer").fancybox({
href : '#portfolio-1',
width: 1040,
margin: 0,
padding: 0,
closeBtn: false,
onUpdate: function() {
alert('update!');
},
onCancel: function() {
alert('cancel!');
},
onPlayStart: function() {
alert('play start!');
},
onPlayEnd: function() {
alert('play end!');
},
beforeClose: function() {
alert('before close!');
},
afterClose: function() {
alert('after close!');
},
beforeShow: function() {
alert('before show!');
},
afterShow: function() {
alert('after show!');
},
beforeLoad: function() {
alert('before load!');
},
afterLoad: function() {
alert('after load!');
}
});
// On clicking a .img-spacer div, attach a bxSlider
$(".portfolio").click(function(){
$('.bxslider').bxSlider({
auto: true,
controls: false,
pager: false
});
});
});
And for the HTML
<div class="img-spacer"></div>
Give this a shot and let me know how it went. If you place it on the live site I can take a look at it there.
I have some sample code up at http://defyordie.com/testbed/
This is for my portfolio and I'm working on replacing my old plugin with fancybox. My issue is with the responsiveness of the work sample popups. Scroll down to my 'work' section and click on one of the top 3 boxes since those are finished.
I'm working on a big cinema display, so I've noticed that as i expand my window, the royalslider running the slideshow expands horizontally but doesnt expand vertically until i make the browser window almost entirely fill my screen. I had hoped that it would scale proportionally. I've either initalized the fancybox incorrectly, royalslider incorrectly, or I have some sort of CSS issue.
The code :
$(document).ready(function () {
$('.fancybox').fancybox({
beforeShow: function () {
$(window).on({
'resize.fancybox': function () {
$.fancybox.update();
}
});
},
afterClose: function () {
$(window).off('resize.fancybox');
},
padding: 0,
margin: [60, 15, 0, 15],
nextEffect: 'fade',
prevEffect: 'none',
helpers: {
overlay: {
locked: false
}
},
afterLoad: function () {
$.extend(this, {
type: 'html',
width: '95%',
height: '100%',
minWidth: '930px'
});
}
});
});
I have a simpledialog2 box, its fully functional but im trying to work out a way to call a function when its been loaded.
For example i have
$('<div>').simpledialog2({
mode : 'blank',
animate : false,
transition : 'none',
// dialogAllow : true,
// dialogForce : true,
headerText : 'Statement Metadata',
blankContent : "HTML HERE"
});
After HTML HERE has been loaded what event is fired? Or how can i call javascript once the simpledialog2 is fuly ready?
Similar to pageshow event handler...
Try the following:
$('<div>').simpledialog2({
mode : 'blank',
animate : false,
transition : 'none',
// dialogAllow : true,
// dialogForce : true,
headerText : 'Statement Metadata',
blankContent : "HTML HERE",
callbackOpen: function() {
var me = this;
alert('opened');
setTimeout(function() {me.close();},2000);
}
});
Fiddle:
http://jsfiddle.net/ykHTa/62/
I'm trying to create a popup page using Magnific via AJAX but getting an 'XMLHttpRequest cannot load' error when the link button is clicked.
Below is the partial code for the portfolio section where clicking on the button should load project_1.html:
<div class="masonry_items removeImgGrayFilter portfolio_items catFilterEffect_1 ajaxPopup_gallery" data-animated-time="15" data-animated-in="animated fadeIn" data-animated-innerContent="yes" data-anchor-to="parent.parent.parent">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Category 1 - jQuery -->
<!-- Thumbnail -->
<div class="item width_1by4 hover_enable cat1 selPopup">
<div class="item_thumbnail">
<div class="porImgOver">
<!-- Thumbnail Image -->
<img class="preload" src="images/0.png" data-src="images/portfolio/thumb1.jpg" alt="image_alt_text" />
</div>
<div class="imageText textOnHover">
<div class="text_field lightColorText">
<h5>Bloc Jams - jQuery</h5>
<h6>A fully functional digital music player similar to Spotify</h6>
<a class="detail_btn ajaxPopup_galItem" href="project_1.html">
<span class="icon"><i class="fa fa-search-plus"></i></span>
</a>
</div>
</div>
....
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/custom.min.js"></script>
custom.min.js
// magnificPopup plugin Initialization
try {
//Initialize Image
$('.magnificPopup').each(function() {
var mc = $(this);
var tit = mc.attr("data-title") !== undefined ? "data-title" : "title";
var typ = mc.attr("data-type") !== undefined ? mc.attr("data-type") : "image";
mc.magnificPopup({
image: {
titleSrc: tit
},
type: typ,
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
closeBtnInside: true,
midClick: false // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
//Initialize Gallery
$('.magnificPopup_gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled: true
},
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true, // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
// Initialize portfolio item gallery
$('.magnificPopup_item_gallery').each(function() {
var mc = $(this);
var p_items = [];
mc.find(".i_gallery").children().each(function() {
var mc2 = $(this);
var tit = mc2.attr("data-title") !== undefined ? mc2.attr("data-title") : mc2.attr("title");
p_items.push({
src: mc2.attr("data-href"),
title: tit,
type: mc2.attr("data-type")
});
});
mc.magnificPopup({
items: p_items, // the selector for gallery item
type: 'image', // this is default type
removalDelay: 500, //delay removal by X to allow out-animation
gallery: {
enabled: true
},
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
// Initialize inline content
$('.magnificPopup_inline').magnificPopup({
type: 'inline',
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
} catch (e) {}
try {
// Initialize popup detail text
$('.detail_text').each(function() {
var cont = $(this).find(".popup_text");
$(this).find(".link_btn").magnificPopup({
items: {
src: cont,
type: 'inline'
},
removalDelay: 500, //delay removal by X to allow out-animation
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
$('.ajaxPopup_link').magnificPopup({
type: 'ajax',
settings: null,
alignTop: false,
cursor: 'mfp-ajax-cur',
closeOnContentClick: false,
closeBtnInside: true
});
try {
//Initialize Gallery
$('.ajaxPopup_gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: '.selPopup a.ajaxPopup_galItem', // the selector for gallery item
type: 'ajax',
settings: null,
alignTop: true,
cursor: 'mfp-ajax-cur',
gallery: {
enabled: true
},
closeOnContentClick: false,
midClick: true, // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}