We Keep Coding

How to integrate a <script></script> into the content method of fancybox2

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.

Fancybox is not working with simple link

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 ?

callback for fancybox

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

How can I use jquery to save my form data then load it in fancybox to preview the changes

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

JQuery Fancybox not working after DIV reload

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.