Official:

http://fancyapps.com/fancybox/

Simple Example:

<!-- Add fancyBox -->
<link rel="stylesheet" href="<?=base_url()?>assets/plugins/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="<?=base_url()?>assets/plugins/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

 

<script>
$(function(){
	$(".fancybox").fancybox();
});
</script>

 

	<div class="album">
		<ul>
			<?php
			foreach($product->photos as $item):
				$thumb = base_url() . $item->url . 'thumbs/' . $item->photo_name;
				$img = base_url() . $item->url . $item->photo_name;
			?>
			<li><a class="fancybox" href="<?=$img?>" rel="group"><img src="<?=$thumb?>" /></a></li>
			<?php endforeach; ?>
		</ul>
	</div>

 

Using iFrame with text input:

<!-- Fancybox -->
<script src="<?= base_url() ?>assets/admin/plugins/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link href="<?= base_url() ?>assets/admin/plugins/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" rel="stylesheet" />
<script src="<?= base_url() ?>assets/admin/plugins/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<input type="text" name="photo" id="photo" class="file_manager" value="">

Javascript:

function init_file_manager(){
	//console.log($('input.file_manager').size());
	$('input.file_manager').each(function(index){
		var $this = $(this);

		$('input.file_manager').fancybox({	
			'width'		: '70%',
			'height'	: '90%',
			'type'		: 'iframe',
			'href' : base_url + 'assets/admin/plugins/filemanager/dialog.php?type=0&field_id=' + $this.attr('id'), 
		    'autoScale'    	: false, 
		    'fitToView'   : false,
			'autoSize'    : false
	    });
	});
}

 Prevent from jumping to the top:

$this.fancybox({	
	'width'		: '70%',
	'height'	: '90%',
	'type'		: 'iframe',
	'href' : url + '&field_id=' + $this.attr('id'), 
	'autoScale'    	: false, 
	'fitToView'   : false,
	'autoSize'    : false, 
	helpers: {
		overlay: {
		  locked: false
		}
	}
});

Reference: http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/