I take sometime to try Fancybox2.
Hope below usage can help new guys:)
Thanks.
<?php
//http://www.yiiframework.com/extension/fancybox2
//http://fancyapps.com/fancybox/
$this->widget('ext.fancybox.EFancyBox', array('target' => '.fancybox-thumb',
'helpersEnabled' => true,
'config' => array(
//'transitionIn' => 'elastic',
// 'transitionOut' => 'elastic',
// 'speedIn' => 600,
// 'speedOut' => 200,
// 'overlayShow' => true,
//'modal' => true,
'autoPlay' => true,
'playSpeed' => 4000, //default 3000
'openEffect' => 'elastic',
'closeEffect' => 'elastic',
'helpers' => array(
//'thumbs' => array('width' => 100, 'height' => 100),
'buttons' => array(),
'title' => array('type' => 'float'), //float,inside, outside, over
),
)
)
);
?>
<p>
<a class="fancybox-thumb" rel="fancybox-thumb" href="../images/example/1_b.jpg" title="Scott Example"><img alt="Fancy example1" src="../images/example/1_s.jpg"/></a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
<img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg" alt="" />
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_b.jpg" title="Sicilian Scratches erice (italianoadoravel on/off coming back)">
<img src="http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_m.jpg" alt="" />
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg" title="The Trail (Msjunior-Check out my galleries)">
<img src="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg" alt="" />
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_b.jpg" title="Trees (Joerg Marx)">
<img src="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_m.jpg" alt="" />
</a>
</p>