我的fancybox完全不

Question

HTML顯示：

<!--gallery--> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script> 
     !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>'); 
    </script> 
    <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
    <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" /> 
    <link rel="stylesheet" href="gallery.css" /> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("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> 

<a class="fancybox" rel="group" href="/images/climb.jpg"><img src="climb_s.jpg" alt="climbing" /></a> 
<a class="fancybox" rel="group" href="/images/minig.jpg"><img src="minig_s.jpg" alt="minigolf" /></a> 
<a class="fancybox" rel="group" href="/images/wake.jpg"><img src="wake_s.jpg" alt="surfing" /></a> 

CSS：

/*lightbox*/ 

.gallery a img { 
    outline: none; 
    border: 1px solid #BBB; 
    padding: 2px; 
    margin-left: 200px; 
    vertical-align: top; 
} 

沒有被顯示出來。

Answer 1

您在鏈接中設置了rel="group"，但您將fancybox綁定到具有rel="example_group"屬性的元素。

綁定的fancybox到適當的元素：

$(document).ready(function() { 
    $("a[rel=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>'; 
     } 
    }); 
});