2014-10-28 85 views
-1

當我點擊圖片時,我無法看到花哨的盒子。我是使用它的新手,並且不明白什麼是錯的。我也沒有用過很多JavaScript。調用jQuery函數有什麼問題嗎?fancybox的問題

 <script> 
      $(".fancybox") 
      .attr('rel', 'gallery') 
      .fancybox({ 
       type: 'iframe', 
       autoSize : false, 
       beforeLoad : function() {   
        if ($(this.element).attr('id') == 'item1') { 
         this.width = 500; 
         this.height = 200; 
        } else { 
         this.width = 200; 
         this.height = 500; 
        } 
       } 
      }); 
     </script> 
    </head> 
    <body> 
     <div class="pure-u-1 pure-u-md-1-2"> 
      <div class="l-box"> 
       <h3 class="information-head">Meet Our Partners</h3> 

       <hr class="header-after"> 
       <div class="members"> <p > The Hardworking Group Members!</p> 
       </div> 

       <h4 style="font-size: x-large; padding-left: 40px;"> Harvard University </h4> 
       <a id="item1" class="fancybox" href="http://fiddle.jshell.net/YtwCt/show/"><img src="css/harvard.png" onclick="fancybox()" style="width: 310px;height: 310px;"></a>     
      </div> 
     </div> 
    </body> 
</html> 
+0

使用DOM準備的JavaScript功能 – 2014-10-28 07:06:01

回答

1

使用ready方法中的jquery

實施例:

$(document).ready(function(){ 
    $(".fancybox") 
     .attr('rel', 'gallery') 
     .fancybox({ 
      type: 'iframe', 
      autoSize : false, 
      beforeLoad : function() {   
       if ($(this.element).attr('id') == 'item1') { 
        this.width = 500; 
        this.height = 200; 
       } else { 
        this.width = 200; 
        this.height = 500; 
       } 
      } 
     }); 
});