Light Box Gallery Using Fancybox

Step1: Fancy Box Script

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
 
    /* This is basic - uses default settings */
 
    jQuery("a.fbb").fancybox();
 
    /* Using custom settings */
 
    jQuery("a#inline").fancybox({
    	'hideOnContentClick': true
    });
 
    /* Apply fancybox to multiple items */
 
    jQuery("a.group").fancybox({
    	'transitionIn'	:	'elastic',
    	'transitionOut'	:	'elastic',
    	'speedIn'		:	600, 
    	'speedOut'		:	200, 
    	'overlayShow'	:	false
    });
 
    });
</script>

 

Step2:Call the Fancybox  Javascript in Php:

<a class='fbb' href="#" title="example" rel="mygallery">
   <img src="./images/example.png" alt="example" width="150" height="150" />
</a>

 

Step3: Fancy Box Next/Previous Button:

In order for fancybox to create a gallery previous ,next Button , it needs to see a group of elements. so assigning the same rel attribute to each links

<a class='fbb' href="#" title="example" rel="mygallery">
    <img src="./images/example.png" alt="example" width="150" height="150"/> 
</a>

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *