Задача простая
Html
<a href="/keramika/gorchok/kachpo/518/518-1035.jpg" class="lightbox">туки туки</a>
Видно что код простой
Цель простая, кликая по ссылке основная страница закрывается блоком с темным backround и с определенной прозрачностью, в центре этого блока всплывает еще один блок с увеличенным изображением внутри блока.
Ниже сам скрипт
////////////////////
<script type="text/javascript">
$(document) .ready(function(){
$('a.lightbox') .click(function(e){
//скрыть полосы прокруткиabove
$('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).wight() - $('#lightbox').width()) / 2;
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
.fadeIn();
}
function removeLightbox(){
$('#overlay. #lightbox')
.faderOut('slow', function(){
$(this).remove();
$('body').css('overflow-y', 'auto');
})
}
</script>
////////////////////////
не пойму где-то ошибка, единственное что работает так это срывается полоса прокрутки
Кто подскажет, в чем косяк? Сразу скажу, только взялся за JS/JQ