Jquery полноэкранное изображение с границами - PullRequest
Новая
       43

Jquery полноэкранное изображение с границами

0 голосов
/ 27 сентября 2011

У меня есть некоторый код, который дает мне полноэкранное изображение, которое сохраняется в его первоначальных пропорциях (то есть, ландшафт полностью растянут по ширине и портрет по высоте). Мне нужно иметь возможность иметь различные границы вокруг страницы (т.е. сверху: 100, слева и справа: 120, снизу: 200), на котором изображение будет останавливаться и не вторгаться. Легко ли исправить с тем, что у меня есть?

Любая помощь приветствуется! 

 function FullScreenBackground(theItem,imageWidth,imageHeight){
    var winWidth=$(window).width();
    var winHeight=$(window).height();

    var picHeight = imageHeight / imageWidth;
    var picWidth = imageWidth / imageHeight;

    if ((winHeight / winWidth) > picHeight) {
        $(theItem).attr("width",winWidth);
        $(theItem).attr("height",picHeight*winWidth);
    } else {
        $(theItem).attr("height",winHeight);
        $(theItem).attr("width",picWidth*winHeight);
    };

    $(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
    $(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
}

Дорогой господин .... кто-нибудь, помогите мне, пожалуйста !!

Ответ от Сваткинса дал мне границы, но изображение не масштабируется в пропорциях ограничения.

Я использую этот замечательный плагин от Malihu: http://manos.malihu.gr/simple-jquery-fullscreen-image-gallery

но просто пытаюсь нанести различные рамки вокруг изображения, как я сказал выше.

Любая помощь будет отличной

Ответы [ 2 ]

1 голос
/ 28 сентября 2011

Проверьте скрипку здесь: http://jsfiddle.net/leifparker/CSS5e/2/

Это изображение изменится при нажатии.Границы полей устанавливаются в соответствии с атрибутом данных (полными марками), прикрепленным к img .Он следует за сокращением обычного поля (сверху, справа, снизу, слева) в пикселях.

В настоящее время это анимация, но вы можете установить задержку для анимации на 0 для мгновенного изменения размера.

HTML 

<img src="http://www.airhorns.co.uk/imgs/85/klaxon_chrome.jpg" data-fullmargins="10 20 10 20" class="background_sizer_image" >

Jquery 

function FullScreenBackground(theItem){
    var imageWidth = theItem.width();
    var imageHeight = theItem.height();

    var theItemMargins = theItem.data('fullmargins').split(' ');
    var heightMarginDifference = parseInt(theItemMargins[0]) + parseInt(theItemMargins[2]);
    var widthMarginDifference = parseInt(theItemMargins[1]) + parseInt(theItemMargins[3]);

    var widthProportion =  imageWidth / ($(window).width() - widthMarginDifference);
    var heightProportion =  imageHeight / ($(window).height() -heightMarginDifference);

     if (widthProportion > heightProportion){
         theItem.animate({ width  : (imageWidth / widthProportion) ,
                           height : (imageHeight / widthProportion) }, 150)
     } else {

         theItem.animate({ width : (imageWidth / heightProportion) ,
                           height : (imageHeight / heightProportion)  }, 150)
     }
}

$('.background_sizer_image').click(function(){ FullScreenBackground($(this))});
0 голосов
/ 27 сентября 2011

Не тестировалось, но вы можете попробовать: 

function FullScreenBackground(theItem,imageWidth,imageHeight){
    var winWidth=$(window).width();
    var winHeight=$(window).height();

    var picHeight = imageHeight / imageWidth;
    var picWidth = imageWidth / imageHeight;

    if ((winHeight / winWidth) > picHeight) {
        $(theItem).attr("width",winWidth - 240);
        $(theItem).attr("height",picHeight*winWidth - 300);
    } else {
        $(theItem).attr("height",winHeight - 300);
        $(theItem).attr("width",picWidth*winHeight - 240);
    };

    $(theItem).css("margin-left",(winWidth-$(theItem).width())/2 + 120);
    $(theItem).css("margin-top",(winHeight-$(theItem).height())/2 + 100);
}

Это должно уменьшить высоту и ширину по сумме полей, а затем сместить верх и лево с полями, необходимыми для них.

...