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
Related
I'm trying to load a javascript content inside the content method of fancybox.
<script>
$('#streaminput').on("click", function() {
$('#streaminput').fancybox({
width : '95%',
height : '95%',
autoSize : false,
closeClick : false,
fitToView : false,
openEffect : 'elastic',
closeEffect : 'none',
content: '<script src="http://scriptfromanotherwebsite" idvideo="myid"></script>'
});
});
</script>
I tried to send the idvideo in ajax and load the script in another page (with the iframe fancybox) without luck...
Thanks in advance
I am not used to Fancybox usage but hey you have jQuery to do the job for you.
So, How about using jQuery.getScript() method.
Description: Load a JavaScript file from the server using a GET HTTP
request, then execute it.
In your fancybox beforeShow or beforeLoad callbacks ,
beforeLoad: function(current, previous) {
$.getScript("https://github.com/aterrien/jQuery-Knob/blob/master/js/jquery.knob.js", function(){
alert("Script Loaded");
});
}
I think this would do the trick for you.
After going through a few google search, i came up with a solution.
In your fancybox beforeShow or beforeLoad callbacks add this line to add a script to the header section,
var add_script = document.createElement('script');
add_script.setAttribute('src','https://github.com/aterrien/jQuery-Knob/blob/master/js/jquery.knob.js');
add_script.setAttribute('idvideo','mynameispawal');
document.head.appendChild(add_script);
And i believe you can call AJAX inside beforeshow to access the value of idvideo.
And here is a demo fiddle.
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).
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'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.