Простые лайтбоксы
Задача простая
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 |
|
имхо простейший и без библиотек http://www.jstoolbox.com/2010/01/17/lightgallery-1-3/
|
Часовой пояс GMT +3, время: 18:56. |