i have a problem with close method of fancybox v2.0.6
I have in my page this code.
Aggiungi immagine
<script type="text/javascript">
$(document).ready(function() {
$("#Imagemulti").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '88%',
height: '88%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
arrows: false,
type: 'iframe',
afterClose: function() {
$('#imgqueue').load('myurl2')
}
});
});
</script>
When i click on a tag the fancybox popup show mypage, where i have a form; when i submit the form on the popup, i show another form e after, submit it, i will close by this function:
<script type="text/javascript">
parent.$.fancybox.close();
</script>
Note: myurl and myurl2 not are variables but link to my site that i have hidden
And it's ok; but if i click again on a tag the popup show the form but on submit the popup don't close. Why? The code is equal. i Don't understend....
It's a fancybox bug?
Thanks for the answers and sorry for my poor english
use onclosed method for close popup
$("#Imagemulti").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '88%',
height: '88%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
arrows: false,
type: 'iframe',
'onClosed' : function () { self.parent.location.reload(); }
}
});
Related
I worked with below code it will pop up the content I want
function init_magnificPopup()
{
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
}
$(document).ready(function() {
init_magnificPopup();
});
HTML
<a class="btn btn-primary popup-with-zoom-anim" href="#dialog">dialog popup</a>
<div id="dialog" class="zoom-anim-dialog mfp-hide">
popup content
</div>
Now how can I work with below dynamically created tag with class .popup-with-zoom-anim?
var content_string += '<a class="popup-with-zoom-anim" href="#dialog">dynamic dialog popup</a>';
$( "body" ).html(content_string);
You can also use delegate option:
$('body').magnificPopup({
delegate: 'a.popup-with-zoom-anim',
type: 'inline',
...
});
I find the answer which using .on() method and chaining .magnificPopup('open'); to the end
$("body").on('click', '.popup-with-zoom-anim', function(){
$(this).magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
}).magnificPopup('open');
});
Whenever I click on an div container a Jquery dialogs opens. Everything works smooth expect for the safari browser. For some weird reason when I scroll down it bugs and I dont know what i'm doing wrong.
I hope someone can help me with this issue.
video of the issue: https://streamable.com/89k8b
Jquery dialog:
$(window).resize(function() {
$(".dialog").dialog("option", "position", {my: "center", at: "center", of: window});
});
$(document).ready(function(){
$( ".dialog" ).dialog({ dialogClass: 'fixed-dialog', autoOpen:false});
});
var opt = {
autoOpen: false,
closeText: '<?php echo $lang["23"]; ?>',
width: 950,
height: 600,
title: null,
draggable: false,
modal: true,
create: function (event) { $(event.target).parent().css({ 'position': 'fixed', 'z-index': '10', 'top': '50%', 'margin-top': '-350px', 'left': '50%;', 'margin-left': '-1000px' }); },
buttons:
[
{
text: "<?php echo $lang["44"]; ?>",
click: function()
{
$('.dialog').dialog('close');
}
}
]
}
jQuery(function () {
jQuery('.dialog').dialog(opt);
})
html:
<div onclick="$('#dialog-<?php echo $hotel['ms_id']; ?
>').dialog('open').dialog(opt)
Change
position: 'fixed'
to
position: 'absolute'
This should solve your problem
I have say 10 images and when anyone of them is clicked they open up a Fancybox frame (HTML). The problem is each images has a different sized Fancybox frame that needs to be opened.
How can I send the height and width from the image being clicked.
$("a.various").fancybox({
beforeClose: function () {
$("#gallery_spacer").remove();
},
openEffect: 'fade',
openSpeed: 1500,
closeEffect: 'fade',
closeSpeed: 400,
padding: '0',
width: 660,
height: 700,
maxWidth: 660,
maxHeight: 700,
fitToView: false,
autoSize: false,
closeClick: false,
autoScale: 'false',
autoDimensions: 'false',
transitionIn: 'true',
transitionOut: 'true',
type: 'iframe',
openEffect: 'fade',
helpers: {
overlay: {
css: {
'background': 'rgba(255, 255, 255, 0.0)'
}
}
}
});
$("a.various1").fancybox({
beforeClose: function () {
$("#gallery_spacer").remove();
},
openEffect: 'fade',
openSpeed: 1500,
closeEffect: 'fade',
closeSpeed: 400,
padding: '0',
scrolling: 'no',
width: 660,
height: 1870,
maxWidth: 660,
maxHeight: 1870,
fitToView: false,
autoSize: false,
closeClick: false,
autoScale: 'false',
autoDimensions: 'false',
transitionIn: 'true',
transitionOut: 'true',
type: 'iframe',
openEffect: 'fade',
helpers: {
overlay: {
css: {
'background': 'rgba(255, 255, 255, 0.0)'
}
}
}
});
The HTML
<li><a class="various1 fade " href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html"><img src="MAIN_IMAGES/MERCURIAL_SUPERFLY-2.jpg" border="0" /></a></li>
<li><a class="various2 fade " href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html"><img src="MAIN_IMAGES/AIRMX-22.jpg" border="0" /></a></li>
You basically need a single script to bind all your links to fancybox, then use data-* (HTML5) attributes to pass the width and height individually
You could use this html :
<li><a class="fancybox" data-width="660" data-height="700" href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html"><img src="MAIN_IMAGES/MERCURIAL_SUPERFLY-2.jpg" border="0" /></a></li>
<li><a class="fancybox" data-width="660" data-height="1870" href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html"><img src="MAIN_IMAGES/AIRMX-22.jpg" border="0" /></a></li>
... and fetch the size of each link using fancybox beforeShow callback like :
beforeShow: function () {
this.width = $(this.element).data("width");
this.height = $(this.element).data("height");
}
... where $(this.element) refers to each clicked element.
See JSFIDDLE
Please notice in the fiddle that I commented out some API options that are not valid in v2.x (they are for v1.3.4 and are not compatible)
you can get the width and height of the image like that:
var w = $("a.various1 img").width();
var h = $("a.various1 img").heigth();
Since you are loading content into an iframe, you cannot get the required dimensions for fancybox until after the html is rendered in the iframe.
What you can do is use onComplete to resize the fancybox after the html is rendered as described here.
So for your case you do something like this:
$("a.various").fancybox({
beforeClose: function () { $("#gallery_spacer").remove(); },
'onComplete' : function() {
$('#fancybox-frame').load(function() {
$('#fancybox-content').height($(this).contents().find('body').height()).width($(this).contents().find('body').width());
});
openEffect: 'fade',openSpeed: 1500,closeEffect: 'fade',closeSpeed: 400,'padding': '0','width': 660,'height': 700,
maxWidth: 660,maxHeight: 700,fitToView: false,autoSize: false,closeClick: false,'autoScale': 'false','autoDimensions': 'false',
'transitionIn': 'true','transitionOut': 'true','type': 'iframe','openEffect': 'fade',
helpers: {overlay: { css: {'background': 'rgba(255, 255, 255, 0.0)'}}}});
Could someone please tell me what is up with this code? I can't for the life of me see whats stopping it from working. If I set it to autoOpen: true it works, but getting it to open from the button does not seem to work! Many thanks in advance.
Jquery:
$(document).ready(function () {
$("#pextension").load('tour_extension_lb.aspx').dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
});
$('a.extension-link').click(function () { $('#pextension').dialog('open'); return false; });
});
html:
OPEN EXTENSION DIALOG
<div id="pextension" class="dialogBox" style="display:none;"></div>
try by changing your code
function opendialog(){
$("#pextension").dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
open: loaddialogcontent();
});
}
function loaddialogcontent(){
$("#pextension").load('you file to load');
}
$(document).ready(function () {
$('a.extension-link').click(opendialog);
opendialog();
});
Try:
$(document).ready(function () {
$("#pextension").dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
open: function() {
$(this).load('tour_extension_lb.aspx');
}
});
$('a.extension-link').click(function (e) {
e.preventDefault();
$('#pextension').dialog('open');
});
});
Is it possible to send a set of common options:
var commonVars = {
autoOpen: false,
draggable: false,
resizable: false,
show: 'fade',
hide: 'fade'
};
To dialog boxes:
$('#dialog_1').dialog({
//Common vars go here somehow
width: 275,
height: 170,
dialogClass: "class1 class2"
});
$('#dialog_2').dialog({
//Common vars go here somehow
width: 600,
height: 350,
dialogClass: "class3 class4"
});
$.extend()
Example:
var object1 = {
//Common vars go here somehow
width: 275,
height: 170,
dialogClass: "class1 class2"
};
var object2 = {
//Common vars go here somehow
width: 600,
height: 350,
dialogClass: "class3 class4"
}
var commonVars = {
autoOpen: false,
draggable: false,
resizable: false,
show: 'fade',
hide: 'fade'
};
$.extend(object1, commonVars);
$.extend(object2, commonVars);
$('#dialog_1').dialog(object1);
$('#dialog_2').dialog(object2);
Figured it out, kind of on accident. So for anyone wondering the same thing, you can put the commonVars variable before each dialog's options bracket:
var commonVars = {
autoOpen: false,
draggable: false,
resizable: false,
show: 'fade',
hide: 'fade'
};
$('#dialog_1').dialog(commonVars,{
width: 275,
height: 170,
dialogClass: "class1 class2"
});
Why don't you just do $('#dialog_1').dialog(commonVars)?