2014-01-18 50 views
0

我是一名平面设计的学生,我正在组建一个网站。我想要一个灯箱来展示我的作品。除了一个问题,我终于得到了一切工作。jQuery灯箱在打开页面时出现

每当我加载我的页面时,lightbox也会加载。我不想要这个。我希望灯箱仅在人们点击我作品的缩略图时才显示。

我跟着this来自Tutsplus的教程,因为我不熟悉jQuery。我在脚本中改变的唯一一件事是,当点击时灯箱会淡入淡出。 这是我使用

</script><script type="text/javascript"> 
//<![CDATA[ 
    jQuery(document).ready(function($) { 
    $('.lightbox_trigger').click(function(e) { 
     //prevent default action (hyperlink) 
     e.preventDefault(); 
     //Get clicked link href 
     var image_href = $(this).attr("href"); 
     /* 
     If the lightbox window HTML already exists in document, 
     change the img src to to match the href of whatever link was clicked 
     If the lightbox window HTML doesn't exists, create it and insert it. 
     (This will only happen the first time around) 
     */ 
     if ($('#lightbox').length > 0) { // #lightbox exists 
      //place href as img src value 
      var maxheightvalue = $("#lightbox").height() -60; 
    $("#lightbox img").css("max-height", maxheightvalue + "px"); 
      $('#lightbox').fadeIn(400); 
      $('#content').html('<img src="' + image_href + '" />'); 
      //show lightbox window - you could use .show('fast') for a transition 

     } 
     else { //#lightbox does not exist - create and insert (runs 1st time only) 
      //create HTML markup for lightbox window 
      var lightbox = 
      '<div id="lightbox" style="display:none">' + 
       '<p>Click to close<\/p>' + 
       '<div id="content">' + //insert clicked link's href into img src 
        '<img src="' + image_href +'" />' + 
       '<\/div>' + 
      '<\/div>'; 
      //insert lightbox HTML into page 
      $('body').append(lightbox); 
     } 
    }); 
    //Click anywhere on the page to get rid of lightbox window 
    $('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM 
     $('#lightbox').fadeOut(300); 
    }); 
    }); 
    //]]> 
    </script> 

的代码,我敢肯定这是一个真正的混乱,但到目前为止,它除了是一个小东西的工作。但如果有人可以清理它(如果可能的话),我会非常感激。

回答

0

您可以尝试使用该实施例中上述

$(document).ready(function(){ 
    $("#some").on("click", function(){ 
     $("#gallery").lightbox(); 
    }); 
}); 

是加载收藏夹为UR画廊或期望的ID。

http://api.jquery.com/on/

+0

在代码会我把那? – user3210292

+0

里面的你准备好的功能 – c0d3