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
  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">
	// add drag and drop functionality to fancybox

with the name of your easy drag file

that's it

feel free to see the source page