Welcome to Designer Blog here i have posted how to make use of the jquery plugin in useful way

Source:

http://fancyapps.com/fancybox/

FancyBox

FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html

content and multi-media on your webpages. It is built on the top of the popular JavaScript

framework jQuery and is both easy to implement and a snap to customize.

Instructions

Download the plugin, unzip it, copy files and include fancyBox script and stylesheet in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Make sure you also load the jQuery library. Example:

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

</script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js">

</script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" 

 type="text/css" media="screen" /> 

<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5">

</script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" 

 type="text/css" media="screen" /> 

 <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5">

</script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6">

</script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" 

 type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7">

</script>

Note:

ID's are single use and are only applied to one element. Galleries are created from elements who have the same "data-fancybox-group" or "rel" attribute value.

Script uses the `href` or `data-fancybox-href` attribute of the matched elements to obtain the location of the content and to figure out content type you want to display. You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc) or `data-fancybox-type` attribute. Use `title` or `data-fancybox-title` attribute to specify item caption.
 StyleSheet:

<style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }

   
        .row
{
    clear:both;
}
.pull-left
{
    float:left; margin-right:20px;
}
.pull-right
{
    float:right;
    margin-right:20px;
}
p
{
    margin:0px;
    padding:0px;
}
.hide
{
    display:none;
}

    </style>

Javascript:

 <script type="text/javascript">
        $(document).ready(function() {
            $('.fancybox-thumbs').fancybox({
                prevEffect : 'true',
                nextEffect : 'true',

                closeBtn  : true,
                arrows    : true,
                nextClick : true,

                helpers : {
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });

          


        });
    </script>



Html Code:


<div class="row">
   
       
         <div class="pull-left">
        
        
        <a class="fancybox-thumbs"   data-fancybox-group="thumb" href="images/4_b.jpg"><img src="images/4_s.jpg" alt="" /></a>
       
       

        <a class="fancybox-thumbs hide" data-fancybox-group="thumb"  href="images/3_b.jpg"><img src="images/3_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs hide" data-fancybox-group="thumb"  href="images/2_b.jpg"><img src="images/2_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs hide" data-fancybox-group="thumb"  href="images/1_b.jpg"><img src="images/1_s.jpg" alt="" /></a>
        
        
         </div>
       
        <div class="text-indent pull-left"> <p>ssadasdasdasd </p> </div>
       
    </div>


<div class="row">
   
       
         <div class="pull-left">
        
        
        <a class="fancybox-thumbs" data-fancybox-group="thumb1" href="images/3_b.jpg"><img src="images/3_s.jpg" alt="" /></a>
       
       

        <a class="fancybox-thumbs" data-fancybox-group="thumb1" style="display:none;" href="images/3_b.jpg"><img src="images/3_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs" data-fancybox-group="thumb1" style="display:none;" href="images/2_b.jpg"><img src="images/2_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs" data-fancybox-group="thumb1"  style="display:none;" href="images/1_b.jpg"><img src="images/1_s.jpg" alt="" /></a>
        
        
         </div>
       
        <div class="text-indent pull-left"> <p>ssadasdasdasd </p> </div>
       
    </div>