demo - making fancybox "draggable"

based on a question posted on fancybox forum

for this demo we use:


click here to see a single image in a draggable fancybox

click here to see the movie in a draggable fancybox - AJAX

click here to see a google map in a draggable fancybox

click here to see a youtube video in a draggable fancybox

works fine in Firefox 3.x, Opera 9.1, Safari 4 for Windows beta, Chrome 1.x and IE6 and IE7 (no tested in IE8 yet)

how does it work?

fancybox has not a draggable feature but we'll use another jQuery plugin to get the desired effect;  follow this steps:

  1. download the Easy Drag jQuery Plugin (jquery.easydrag.beta2.js) from fromvega.com
  2. create your fancyboxes the way you use and set 'hideOnContentClick' to false
  3. paste the following code anywhere in your html
<script src="jquery.easydrag.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	// add drag and drop functionality to fancybox
	$("#fancy_outer").easydrag();
});
</script>

with the name of your easy drag file


that's it

feel free to see the source page