I want to use magnific popup on dynamically generated content. I have link generated via javascript and a want to use "iframe" magnific popup with this link.
HTML:
<div id="content">
link
</div>
JS:
$(function(){
$('.mp').magnificPopup({
type: 'iframe',
closeOnContentClick: false,
closeBtnInside: true,
removalDelay: 300,
mainClass: 'mfp-with-zoom mfp-img-mobile my-mfp-slide-bottom'
});
var a = $("a").clone();
a.text('generated');
a.appendTo('#content');
});
live example : jsfiddle
With classic static link everything works well but on generated link it doesn't work. Is there some "refresh" function which will register generated link to magnific popup scope?
I tried to construct new magnific instance after generating the link and it works, but is there some cleaner solution?
Thanks for any response.
Thanks to #MVCDS i figured it out, theres option for this.
$('body').magnificPopup({
delegate: 'a.mp',
type: 'iframe',
closeOnContentClick: false,
closeBtnInside: true,
removalDelay: 300,
mainClass: 'mfp-with-zoom mfp-img-mobile my-mfp-slide-bottom'
});
Related
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
I'm having difficulty with Magnific-popup and its AJAX. I want to simply switch the content of a popup if the link is also a popup. This should work by default, but somehow it doesn't.
JavaScript:
$('.magnific').magnificPopup({
type: 'ajax',
ajax: {
settings: null,
cursor: 'mfp-ajax-cur',
tError: 'The content could not be loaded.'
},
closeOnContentClick: false,
closeOnBgClick: true,
showCloseBtn: false,
mainClass: 'mfp-fade',
callbacks: {
parseAjax: function(mfpResponse) {
mfpResponse.data = $(mfpResponse.data).find('.overlay');
console.log('Ajax content loaded:', mfpResponse);
},
ajaxContentAdded: function() {
console.log(this.content);
}
}
});
This works with a link on the standard site. But if there is a link within the popup, it just executes that link, ignoring the Magnific Popup.
My best guess is, that it cant initiate itself because it cant find the selector (like if you use .click instead of .on('click'...)), but I don't seem to figure it out on my own.
Any help would be VERY! apprechiated!
EDIT: Ok I have identified the problem. It seems that the code in functions.js is not available at all within the limits of a popup. Is there a way to make the .js file available in the popup? The only way I made it work is by including the .js file in every file that has a magnific link... but that seems really dirty. Should I load it with the ajax callback or is there another way?
Best regards,
G
I have a script that popup a window for every link with class attached
jQuery(document).ready(function() {
jQuery('.product-quick-view a').magnificPopup({
type: 'ajax',
midClick: true,
mainClass: 'mfp-fade'
});
});
And it works fine but only for elements that is shown on first page. When i scroll down page and infinite scroll add next products to page , the script wont work (to that products).
I think you need to add this:
$(document).ajaxSuccess(function(){
jQuery('.product-quick-view a').magnificPopup({
type: 'ajax',
midClick: true,
mainClass: 'mfp-fade'
});
});
The above will be executed whenever a ajax is successfully completed.
Newbie here, so please forgive me if this is a simple question:
I've got a single-page website using pafigy to hash the urls. When the page is first loaded, it pulls in the "home.html" file into the content div.
The "home.html" content contains scripts (jquery cycle) that need to run when it is loaded into the "content" div of the index page. If I link to the cycle plugin and jquery libraries in the "home.html" page, it loads into the "content" div VERY slowly. So, I load the libraries on the main page and reference them in the "home.html" page.
It works fine when the site is initially loaded; however, if I click another menu item and then try to return to "#home" (either with the back button or with a link to "#home"), it loads the content from "home.html", but doesn't load the cycle plugin.
So, I know I need to refresh/reload the javascript in the "content" div, but I'm not sure how to go about doing that. Any help or words of wisdom would be greatly appreciated.
Here's the pagify script on the index.html page:
<script type='text/javascript'>
$(document).ready(function() {
$('#content').pagify({
pages: ['home', 'food', 'wine'],
animation: 'fadeIn',
'default': 'home',
cache: true
});
});
</script>
And here is the Jquery Cycle script on the home.html page:
<script type='text/javascript'>
$(document).ready(function() {
$('#myslides').cycle({
fx: 'fade',
speedIn: 1000,
speedOut: 200,
delay: 1200,
cleartypeNoBg: true
});
$('#myslides2').cycle({
fx: 'scrollLeft',
speedIn: 700,
speedOut: 500,
delay: 1000,
cleartypeNoBg: true
});
});
</script>
Again, forgive me if my code is wonky or if I'm doing this completely wrong. I'm trying to learn as best I can and research, but I'm really stuck here.
Also, let me know if you need more code.
Thanks!
I think you have to fire Cycle after you load that page. Perhaps you can achieve that with the onChange option present on pagify.js. It should look something like this:
<script type='text/javascript'>
$(document).ready(function() {
$('#content').pagify({
pages: ['home', 'food', 'wine'],
animation: 'fadeIn',
'default': 'home',
cache: true,
'onChange': function(home) { //wrap 'onChange' in quotes
$('#myslides').cycle({
//Your Cycle Plugin Goes Here
});
}
});
});
</script>
Hope this idea helps.
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