我想問爲什麼我的燈箱不工作。在我.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警報實際上彈出,並且隱藏功能可以工作......我很難理解我的燈箱的修正路徑是什麼。 :\任何幫助非常感謝,謝謝!
目前尚不清楚你的實際問題是什麼?那圖形只是展示你所包含的JS的方式,對嗎?那麼你的代碼到底出了什麼問題?它如何失敗? – RadBrad
現在,燈箱似乎根本沒有工作。當我點擊標記中包含的縮略圖圖像時,燈箱似乎並未激活。 – jvspcorbust
您沒有正確選擇圖片標籤。刪除** <** and **> **。應該是'$(「img」)'「。另外,由於您將圖像封裝在_a_標籤中,因此請確保選擇了正確的圖像。緩存'$(「img」)'的結果並查看你得到的結果。希望有所幫助。 – Alen