How to properly attach lightbox (prettybox, fancybox) to img attribute?

Question

css

Hello.
Here is the site
Here is the code:

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js" type="text/javascript"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.css" type="text/javascript"></script>
<script type="text/javascript">
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        nextEffect  : 'none',
        prevEffect  : 'none',
        padding     : 0,
        margin      : [20, 60, 20, 60] // Increase left/right margin
    });</script>
<style>.fancybox-type-iframe .fancybox-nav { width: 60px; }
.fancybox-type-iframe .fancybox-nav span { visibility: visible; opacity: 0.5;}
.fancybox-type-iframe .fancybox-nav:hover span {    opacity: 1;}
.fancybox-type-iframe .fancybox-next { right: -60px;}
.fancybox-type-iframe .fancybox-prev {left: -60px;}
</style>
  <div class="sigProGalleriaPlaceholderContainer">
              <div class="sigProGalleriaPlaceholder" style="opacity: 1;">
                <?php if(isset($gallery_img[0])){
                  $seg = explode('/',$gallery_img[0]);
                  $index = count($seg)-1;
                  $img_name = $seg[$index];
                ?>
              <b>	<img title="proverka" rel="gallery" class="sigProGalleriaTargetImg fancybox" src="<?php echo $gallery_img[0];?>" /></b>
                  
                <p class="sigProGalleriaTargetTitle"></p>
                <?php }?>
              </div>
            </div>

But it doesn't work. Why, and what's the matter? Help to fasten the lightbox correctly.
In general, the matter is essentially easy, but I do not understand why it does not work.

It is imperative that it works exactly through img src="" , through a href="" is not suitable.

Answer 1

Obviously, you can't do without the "a href=" tag.