Помощник
|
как грамотно выровнять картинку по центру экрана, с высостой на весь экран? |
mav1
|
Сообщение
#1
|
||
|
|
||
|
|||
PRStudio |
24.4.2014, 4:36;
Ответить: PRStudio
Сообщение
#2
|
|
|
Давно писал как-то простенький модуль лайтбокса на jQuery. Суть его проста ,оговорюсь, что тестировал его не полностью, однако работать должен так:
Изображение подстраивается под область просмотра, если меньше и влазит - как есть, если больше - то вычисляется по сторонам, чтобы влезло (для изображений, вытянутых горизонтально или наоборот - вертикально), и все это дело по абсолютному центру. Как использовать: HTML: <a class="ligthbox" href="ссылка на изображение">Что угодно</a> JS: [JS]$('.ligthbox').each(function(){ $(this).lightbox({ 'lightboxClass' : 'ui-lightbox', 'loadingClass' : 'ui-lightbox-loading' }); });[/JS] где lightboxClass - класс контейнера (fader'a), loadingClass - класс того же контейнера при загрузке. Если не нужен лайтбокс, то переделать тоже труда не составит. Исходник: [JS](function($){ $.fn.lightbox = function(params){ /** * params.lightboxClass * params.loadingClass */ var source = $(this).attr('href'); $(this).attr('href','javascript:void(0);'); $(this).click(function(){ var box = $('<div></div>'); var loading = $('<div></div>'); box.attr('class',params.lightboxClass); box.prependTo($('body')); box.hide(); box.fadeIn(200); loading.attr('class',params.loadingClass); loading.prependTo($('body')); var img = $('<img>'); img.attr('src',source); img.load(function(){ loading.stop(true).fadeOut(200,function(){ $(this).remove(); }); var screenW = $(window).width(); var screenH = $(window).height(); var screenAspect = screenW/screenH; img.appendTo(box); var imgW = img.width(); var imgH = img.height(); var imgAspect = imgW/imgH; if (screenAspect >= imgAspect && imgH > screenH){ imgH = screenH; img.height(imgH); imgW = img.width(); } else if (screenAspect < imgAspect && imgW > screenW) { imgW = screenW; img.width(imgW); imgH = img.height() } img.css({'z-index':'99','position':'absolute','top':'50%','left':'50%','marginTop':-(imgH/2)+'px','marginLeft':-(imgW/2)+'px'}); }); box.click(function(){ $(this).fadeOut(200,function(){ $(this).remove(); }); }); }); } })(jQuery);[/JS]
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Арбитражники, как ведете учет расходов и доходов? | 12 | Boymaster | 1930 | Вчера, 21:03 автор: MisterBit |
|
Как вывести деньги в Украине с заблокированного Юмани ? | 29 | freeax | 4817 | 17.4.2024, 1:19 автор: sergio11 |
|
Как вы отдыхаете от работы за компом | 148 | adw-kupon.ru | 19715 | 8.4.2024, 10:37 автор: Skyworker |
|
Как вы бросили работу и перешли на заработок с сайтов? | 18 | uahomka | 3109 | 5.4.2024, 5:53 автор: Skyworker |
|
Как бездомные хранят деньги? | 81 | metvekot | 13661 | 31.3.2024, 12:44 автор: Boymaster |
Текстовая версия | Сейчас: 20.4.2024, 9:39 |