FancyBox

При клике на картинку она увеличивается

by AJIEKCEU

HTML

<script type="text/javascript" src="http://pharm.by/stroyka/str2/fancybox/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://pharm.by/stroyka/str2/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="http://pharm.by/stroyka/str2/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://pharm.by/stroyka/str2/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<script type="text/javascript">
        $(document).ready(function() {
            /*
            *   Examples - images
            */
            $("a[rel=example_group]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });
        });
    </script>

<p class="fansybox_p">
  <a class="fansybox_a" rel="example_group" href="images/1_b.png"><img src="http://placehold.it/150x150/" /></a>
  <a class="fansybox_a" rel="example_group" href="images/2_b.png"><img src="http://placehold.it/150x150/" /></a>
  <a class="fansybox_a" rel="example_group" href="images/3_b.png"><img src="http://placehold.it/150x150/" /></a>
  <a class="fansybox_a" rel="example_group" href="images/4_b.png"><img src="http://placehold.it/150x150/" /></a>
  <a class="fansybox_a" rel="example_group" href="images/5_b.png"><img src="http://placehold.it/150x150/" /></a>
  <a class="fansybox_a" rel="example_group" href="images/6_b.png"><img src="http://placehold.it/150x150/" /></a>
</p>

CSS

.fansybox_p {margin: 0;padding: 7px 0;}
.fansybox_a {outline: none;}
.fansybox_a img {border: 1px solid #BBB;padding: 2px;margin: 10px 3px 10px 0;vertical-align: top; z-index: 10000;}
.fansybox_a img.last {margin-right: 0;}