I'm using Fancybox on my site to open links to other pages (external pages).
Basically the user clicks on a image and this opens a fancybox containing the external page. The image links are contained within a page (the child) that is displayed within a DIV on another page (the parent). The parent has the ability to reload the data in the DIV by reloading the child page with different params that will cause the image and links to change.
This all works perfectly with the first load. But after that when the DIV is reloaded with the child page containing different data, the fancybox popup no longer works. If I then do a F5 refresh on the page, it works again. But only on the first load.
The code on the child page to setup fancybox for the image links:
$.noConflict();
$(document).ready(function() {
$(".userdetailslink").fancybox({
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});
I've also tried the following with the same results:
$.noConflict();
$(".userdetailslink").ready(function() {
$(".userdetailslink").fancybox({
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});
Any help would be appreciated.
Are you using the AJAX methods to load the div? You can use the callback function to apply the event handling to the loaded content.
$("div").load("url", function(){
$(".userdetailslink").fancybox({
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});
This way it runs after the load as well. Of course you do the initial load as you are.
Related
Please developers, I did everything over and over and can't seem to find out why fancybox plugin refuses to work. I think its the javascript below that suppose to fire the plugin.
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#contactus").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
Open your console (F12) and notice the errors?
Fancybox seems to use $.browser, which was removed in jQuery 1.9, and that's an error!
Also, $("a#contactus").fancybox(); is an error! There is no such element, you do however have a div with that ID ?
I need to set or update custom HTML code in iframe fancybox window.
So how can I do that ?!
'content' option does not work !
Tested on localhost.
$("test").fancybox({
'width' : 300,
'height' : 300,
'autoScale' : false,
'type' : 'iframe',
'content' : '<H5> It`s does not work</h5>'
});
If it`s impossible to change the content of cross-domain iframe(as in my case),so,please, tell me how to do it on the same domain.
For example,we are on the http://localhost/page1.html and iframe links to http://localhost/page2.html
When the fancybox-iframe is aleady open, you may access the iframe-element using $('.fancybox-iframe') .
And if the document inside the iframe is located on the same domain, you may change the contents using jQuery:
$('body',$('.fancybox-iframe').contents()).html('new content');
When the fancybox-iframe is not open yet, you may do the same inside the afterLoad-callback:
$("test").fancybox({
'width' : 300,
'height' : 300,
'autoScale' : false,
'type' : 'iframe',
'href':'page2.html',
afterLoad:function(){$('body',$('.fancybox-iframe').contents())
.html('new content');}
});
And Yes: it`s impossible to change the content of cross-domain iframe(you may only load a completely new document into the iframe in this case).
my jQuery Code
$("#div1").load("test1.html")
$("a#link").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width' : 400,
'height' : 200,
'overlayOpacity': 0.5,
'type' : 'iframe'
});
After .load my fancybox doesn't work.
It work in test1.html.
How am i suppose to write it?
I don't know anything about fancybox but when using the load function the data is loaded asynchronously so anything after the call to load could be done before it is loaded. you should add the code into the callback if you want it to effect the items you have loaded in.
$("#div1").load("test1.html", function () {
$("a#link").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width' : 400,
'height' : 200,
'overlayOpacity': 0.5,
'type' : 'iframe'
});
})
You might just need to add a ; semi-colon to the end of that line?
$("#div1").load("test1.html");
The syntax is wrong... are you getting any errors?
You also may want to consider binding this to a live() event.
Otherwise the content from test1.html isn't going to be included.
See this post here:
Fancybox, getting Fancybox to bind using LIVE() to items being loaded onto the page after load
Can someone look at my script below and tell me why my fancybox is behaving so weird? I have a form that when the fancy box closes it should clear the form data and collapse the div that the results were in. It works 7/10 times?? how could this happen? and the actual function takes place the second after the fancybox is reopened, not actually on close
I'm stumped
<script>
$(document).ready(function() {
$('#login,#login2,#contactBox,#contactBox2').fancybox({
'overlayColor' : '#000',
'titlePosition' : 'inside',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutExpo',
'easingOut' : 'easeInExpo',
'speedIn' : 600,
'speedOut' : 200,
'onClosed' : function() {
$('#sub_cont').hide(250, function() {
$('#IDsearchform input').val('');
});
}
});
});
</script>
I have tried the script you posted and it seems to work for me when I implemented the link (firing a fancybox), a simple input toclear the content and a div to hide. However I had to remove the easing options since they were rising errors in the jquery - could that be a problem?. if you post the full/minimal code which does not work for you I can have a look.
K
I have a form with several fields that has a jquery autosave function that saves the form every 3 minutes, and also a button that the user can click to save the form. What I want is a preview feature that loads in a fancybox. Currently, when I click my preview button, fancybox loads using an iframe and pulls the data from a php/mysql process. The preview in fancybox loads, but if the form has changes since the last save, and hasn't been saved since the most recent changes, the fancybox displays the data prior to the latest changes.
$(function() {
$('#preview-article').live('click', function() {
saveTheForm();
$('#preview-article').fancybox({
'width': '80%',
'height': '80%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe'
});
});
});
Any help is greatly appreciated!!!
I found an API option included with fancybox called OnStart which I was able to add my saveTheForm function. The OnStart option is called right before attempting to load the content. So far, it's working.
$(document).ready(function() {
$('#preview-article').fancybox({
'onStart': saveTheForm,
'width': '80%',
'height': '80%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe'
});
});
Check out this jQuery Plugin that Saves form data to cookie as you type.
Maybe you could retrieve the cookie data for your fancy fancybox.
Here