Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Простые лайтбоксы (https://javascript.ru/forum/misc/25323-prostye-lajjtboksy.html)

Tryd0g0lik 01.02.2012 17:51

Простые лайтбоксы
 
Задача простая
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

DreamTheater 01.02.2012 23:43

Используйте нормальный Lightbox или Fancybox.

Serg_pnz 02.02.2012 12:15

имхо простейший и без библиотек http://www.jstoolbox.com/2010/01/17/lightgallery-1-3/


Часовой пояс GMT +3, время: 18:56.