2012-10-21 40 views
0

我想問爲什麼我的燈箱不工作。在我.html.erb文件,我有:簡單的jQuery燈箱不適用於Rails應用程序。請幫助?

<a href="http://cdn.geekwire.com/wp-content/uploads/2011/10/patel-neil1-300x200.jpg?7794fe" class="thumbnail lightbox"> 
<img src="http://cdn.geekwire.com/wp-content/uploads/2011/10/patel-neil1-300x200.jpg?7794fe" alt=""> 
</a> 

在我.css.scss文件我有:

#overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: black url(loader.gif) no-repeat scroll center center; 
} 

#lightbox { 
    position: fixed; 
} 

最後,我的jQuery:

$(document).ready(function(){ 

    $('#toggleButton').click(function() { 
     if ($('#experiment').is(':visible')) { 
      $('#experiment').hide(); 
     } else { 
      $('#experiment').show(); 
     } 
    }); 

    alert('working!'); 

    $('a.lightbox').click(function(e) { 
     // hide scrollbars! 
     $('body').css('overflow-y', 'hidden'); 

     $('<div id="overlay"></div>') 
      .css('top', $(document).scrollTop()) 
      .css('opacity', '0') 
      .animate({'opacity': '0.5'}, 'slow') 
      .appendTo('body'); 

     $('<div id="lightbox"></div>') 
      .hide() 
      .appendTo('body'); 

     $('<img>') 
      .attr('src', $(this).attr('href')) 
      .load(function() { 
       positionLightboxImage(); 
      }) 
      .click(function() { 
       removeLightbox(); 
      }) 
      .appendto('#lightbox'); 

     return false; 
    }); 

    function positionLightboxImage() { 
     var top = ($(window).height() - $('#lightbox').height())/2; 
     var left = ($(window).width() - $('#lightbox').width())/2; 
    $('#lightbox') 
     .css({ 
      'top': top + $(document).scrollTop(), 
      'left': left 
     }) 
     .fadeIn(); 
    } 

    function removeLightbox() { 
     $('#overlay, #lightbox') 
      .fadeOut('slow', function() { 
       $(this).remove(); 
       $('body').css('overflow-y', 'auto'); // show scrollbars! 
      }); 
    } 

}); 

我我正在使用Chrome網絡檢查器來調試Javascript中的錯誤,現在我不會拋出任何東西,所以我沒有看到這裏有什麼問題?特別是因爲我放入DOES的jQuery警報實際上彈出,並且隱藏功能可以工作......我很難理解我的燈箱的修正路徑是什麼。 :\任何幫助非常感謝,謝謝!

enter image description here

+0

目前尚不清楚你的實際問題是什麼?那圖形只是展示你所包含的JS的方式,對嗎?那麼你的代碼到底出了什麼問題?它如何失敗? – RadBrad

+0

現在,燈箱似乎根本沒有工作。當我點擊標記中包含的縮略圖圖像時,燈箱似乎並未激活。 – jvspcorbust

+0

您沒有正確選擇圖片標籤。刪除** <** and **> **。應該是'$(「img」)'「。另外,由於您將圖像封裝在_a_標籤中,因此請確保選擇了正確的圖像。緩存'$(「img」)'的結果並查看你得到的結果。希望有所幫助。 – Alen

回答

1

看起來你有點弱您的jQuery

例如,如果你這樣寫:

$('<div id="overlay"></div>') 

正確的方式做到這一點可能是

$('#overlay') 

嘗試重做如上,看看會發生什麼

+0

的資本t同意RadBrad,對我來說,在我的情況下,你可能會做的最後一個解決方案可以提醒你的燈箱如何流動,因爲你的代碼不是太長,所以會出現錯誤。 – Nich

+0

RadBrad沒有爲我工作。我認爲在動態創建新元素的語法是我做到的方式?那只有當你在創建之後選擇它時,你才使用選擇器方法......? – jvspcorbust

+0

甚至沒有想到這一點?我從來沒有添加過這樣的元素,所以我不知道你在做什麼。你確定語法有效嗎?我從來沒有看到過這種方式。 – RadBrad