Official:
http://fancyapps.com/fancybox/
Simple Example:
|
1 2 3 |
<!-- 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> |
|
1 2 3 4 5 |
<script> $(function(){ $(".fancybox").fancybox(); }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<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:
|
1 2 3 4 5 6 |
<!-- 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$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/