Develop Reference

JQuery & Fancybox clicking image to open a new page/link (Update existing code)

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

One Youtube Video will not load in Fancybox but others will.

I have one video out of several that will not load in a fancy box.
The url for the video that I am having troubles with is http://www.youtube.com/watch?v=msVNbasvAic
Javascript (I pulled from another SO entry)
$("a.fancyvideo").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
HTML
(this one works)
<a class="fancyvideo"href="http://www.youtube.com/watch?v=z8oCliTpqk4">Soft close drawer glide system installation</a>
(this one don't)
<a class="fancyvideo" href="http://www.youtube.com/watch?v=msVNbasvAic">Soft close door attachment installation</a>
I think there may be some issue with the video, because sometimes it won't even load when you click the YouTube link in the Fancybox window. It does load that way most the time though. I have not been able to get it to play in a Fancybox window no matter what, even using different scripts that I have found and even running on jsfiddle. Any thoughts?

Durandal activate function call several times

The following code cause two calls in the activate function of the taginfos viewmodel, WHY ?
$(oTag).fancybox({
'overlayShow' : true,
'width' : 800,
'height' : 500,
'autoScale' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
'scrolling' : 'no',
'href' : 'http://localhost:1135/#/taginfos/' + item.tagId
});

You must not use jquery plugins inside the activate function. The DOM is not ready and the jquery selector might not find anything to give to fancybox. Put all your jquery plugin calls inside veiwActivated function. This may not be a direct answer to your question
Here is an example: (Look at the question section)
Fancybox v2 not working with Durandal

Why can't I make a jQuery pop up when page loads :( [duplicate]

This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
Open up first Fancybox picture automatically
I'm having trouble finding a method to make a jQuery FancyBox pop up when the page loads.
$(document).ready(function() {
$("#popmessage").fancybox({
'titleShow' : false,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'overlayColor' : '#000',
'overlayOpacity' : 0.2
});
});

You can simulate a click on your DOM:
$("#popmessage").click();
In jquery style, you could even do:
$(document).ready(function() {
$("#popmessage").fancybox({
'titleShow' : false,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'overlayColor' : '#000',
'overlayOpacity' : 0.2
})
.click();
});

$(window).load(function(){
$("#popmessage").fancybox({
'titleShow' : false,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'overlayColor' : '#000',
'overlayOpacity' : 0.2
})
$("#popmessage").click();
})
}

Your input is so small that it's hard to give a proper answer. Maybe you could post your code on jsFiddle.net or something like that?
Try to break up the problem into smaller pieces. A js debugger could also be of help diagnosing the actual problem.
Is the fancybox javascript loaded?
Is the jQuery javascript loaded?
can you even do an alert(); on document ready?
...

fancybox prevent close click outside of window

I am trying to prevent fancybox window from closing when the user clicks outside of the
fancybox window. I am using fancybox Version: 1.3.1 on IE7, I have tried the following but I have yet to succeed. Any help is very much appreciated.
on fancybox 1.2.6 close
jquery fancybox - prevent close on click outside of fancybox
My Code:
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({
'width' : '68%',
'height' : '80%',
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
Thanks

Try adding this option :
'hideOnOverlayClick' : false
cf API doc : http://fancybox.net/api