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

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.

Related

Fancybox - How to change the content of iframe?

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).

jQuery fancyBox for Soundcloud tracks

I'm using jQuery fancybox http://fancyapps.com/fancybox/ for soundcloud tracks in my web application where it is not working. Here is the jsfiddle http://jsfiddle.net/QNHN5/106/
The soundcloud url is http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/53816732&show_artwork=true
It shows this error
The requested content cannot be loaded.
Please try again later.
Could anyone tell me the mistake I've done?
Thanks!
Since you are opening an external site, fancybox should be opened in iframe mode.
You either add the class fancybox.iframe to your selector like
<a class="fancybox fancybox.iframe" ....
or add type: "iframe" to your fancybox script options
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
type: "iframe",
beforeShow: function () {
/* Disable right click */
$.fancybox.wrap.bind("contextmenu", function (e) {
return false;
});
}
});​
Taken from: Getting a "The requested content cannot be loaded" with fancy box (no errors in console though)
You just need two more things:
1). add the fancybox-media helper js file like (check your own path):
<script type="text/javascript" src="fancybox2.0.6/helpers/jquery.fancybox-media.js"></script>
2). add the helpers media option to your script:
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
padding: 0, //<-- notice I added a comma here ;)
helpers : {
media : {}
}
});

Fancy Box - how to refresh DIV on modal window onclosed

I've searched high and low through this forum and thus far I don't see an answer. And, I think I beginning to lose my mind.
Could be I'm just missing it as I am NOT a programmer.
I am a visual designer that can usually install pre written code without to much
difficulty. And, indeed I have installed FancyBox and have it working well
except for one small problem which I desperately need help with.
I am working with a dynamically generated page written in ColdFusion.
Three divs on the page contain FancyBox links that open editing screens.
Once editing is complete and the user closes the FancyBox modal the changes
need to be reflected on the parent page.
Right, so I was able to find a solution that refreshes the entire page
'onClosed': function() {
parent.location.reload(true); }
});
How, oh how can I get just a single div to refresh "onClosed" as
apposed to the entire page??????
There a a couple of ways to do that.
One way is to get the content of the div with a function. This function will preform an ajax-call to get the content, say the function is called getcontent(); your syntax will be something like onClosed': function() { getcontent(); }
A better way to do this is to get the edited content and push this in the div. say you set a variable text with the content after the save of the editor, after that you can push this variable into the div with onClosed': function() { $('#divid').html(yourvar); }
I must say both ways are not easy to implement. Maybe if you show the code you currently having we can help you some more.
Right on Tim, well Fancybox uses jquery and loads it's own "library".
Each link that invokes fancybox has an id which is referred to like thus
<script type="text/javascript">
$(document).ready(function() {
$("#link1").fancybox({
'titleShow' : false,
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'onClosed': function() {
parent.location.reload(true); }
});
});
</script>

jCarousel and Fancybox

On one of my content pages, I'm using the jCarousel and Fancybox JQuery plugins.
The problem is that only one of them works at a time, so I think there must be a conflict.
This is the code used:
<script src="js/jquery.jcarousel.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.showcase').jcarousel({
start: 1
});
});
</script>
<script>
$(document).ready(function() {
$('.fancybox-form').attr("href", "contact.php").fancybox({
"width" : 400,
"height" : "90%",
"autoScale" : false,
"transitionIn" : "elastic",
"transitionOut" : "elastic",
"type" : "iframe"
});
});
</script>
Is there a conflict between the "jQuery(document).ready(function()" of the jcarousel script and the "$(document).ready(function()" of the fancybox script?
Any help on how to overcome the conflict (if this is the problem) would be appreciated.
Thanks, Mark.
It appears your problem is in the fact that jCarousel moves images in and out of view - causing a problem with fancybox. So the answer is that you cannot easily use both together (without re-writing the fancybox plug-in).
I would look at using a different carousel that already has the expand pop-up feature built-in.
On a side note, I would place all of the code in either
jQuery(document).ready(function()
or
$(document).ready(function()
for cleanliness.

Jquery Fancybox not working after postback

I have a Fancybox (or more accurately) a number of fancy boxes on an asp.net page.
My Fancybox (jquery plugin) works fine until a postback occurs on the page then it refuses to work.
Any thoughts? Anyone experienced similar behaviour?
UPDATE : Some Code..
I have a databound repeater with a fancybox on each repeating item.
They are instanciated by (outside the repeater)
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
The anchor tag is repeated..
href="#watchvideo_<%#Eval("VideoId")%>"
As is a div with
id="watchvideo_<%#Eval("VideoId") %>
As is a script element that instanciates the flash movies
Yes the VideoIds are being output the the page.
UPDATE : It's not a problem with the flash..
It is not a problem with the flash as i've tried it without the flash, it wont even pop a window with a simple message in.
UPDATE : I wonder if it is the updatepanel.
Rebinding events in jQuery after Ajax update (updatepanel)
-- lee
The problem is in using $(document).ready() to bind the fancybox. This code is only executed once, when the page is originally loaded. If you want the fancybox functionality on every postback, synchronous or asynchronous, replace the $(document).ready() with pageLoad(sender, args). i.e.
function pageLoad(sender, args) {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
see this answer for more info
Could it be that the instantiating code is being inserted at a piece of code which is not run after a postback?
It was the Update panel as described
here.. Rebinding events in jQuery after Ajax update (updatepanel)
As suggested I simply replaced
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
with
function pageLoad(sender, args)
{
if(args.get_isPartialLoad())
{
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
}
and it worked!
-- Lee
This might help someone else, but FancyBox appends it's code to the <body> element... which is all fine and well, but resides OUTSIDE the asp.net <form> element. My postback problems went away when I modified FancyBox to append its dom objects to the <form> element:
$('body form:first').append( ... );
I had a similar problem with a paged grid-view. The first page of the grid was launching the fancybox while the remaing did not.
I thought it could be an issue related to the UpdatePanel which refreshes only a portion of the screen.
I solved the issue replacing this:
<script>
$(document).ready(function () {
$("a.small").fancybox();
});
</script>
with this:
<script>
function pageLoad(sender, args) {
$("a.small").fancybox();
};
</script>

Categories