Ограничить размер слимбокса (лайтбокса) размером окна

Всем привет,

Любой знает, как ограничить размер оверлейного окна Slimbox в процентах от размера окна пользователя (как делает prettyphoto)

Спасибо

Вот код модуля: http://paste.ly/3Kz

И тонкий ящик JS: http://paste.ly/3L0

Источник

5 ответов

Решение

Захватить разрешение окна пользователя и установить ширину и высоту наложения в соответствии с записанной информацией...

$('#overlay').width($(window).width()).height($(window).height());
Источник

На самом деле ни одно из ваших решений не сделало это для меня, так что мне пришлось поместить их в блендер и смешать результат, выполнив это:

как он сказал, обратите внимание на эти строки в slimbox2.js

w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});
w(p).width(k.width);
w([p,I,d]).height(k.height);

и замените их следующим блоком:

        var winWidth  = window.innerWidth  - 20;
        var winHeight = window.innerHeight - 120;
        if (winWidth > winHeight) { 
            var maxSize = winHeight; 
        } else { 
            var maxSize = winWidth;
        }

        /* determine proper w and h for img, based on original image'w dimensions and maxSize */
        var my_w = k.width; 
        var my_h = k.height;            

        if (my_w > my_h) {
            my_h = maxSize * my_h / my_w;
            my_w = maxSize;
        } else {
            my_w = maxSize * my_w / my_h;
            my_h = maxSize;
        }

        if (k.width > my_w || k.height > my_h){ /* constrain it */
            w(g).css({backgroundImage:"url("+n+")",backgroundSize:""+my_w+"px "+my_h+"px",visibility:"hidden",display:""});
            w(p).width(my_w);
            w([p,I,d]).height(my_h);    
        }
        else { /* default behaviour  NORMAL before hackeing*/
            w(g).css({backgroundImage:"url("+n+")",backgroundSize:"",visibility:"hidden",display:""});
            w(p).width(k.width);
            w([p,I,d]).height(k.height);            
        }

* будьте добры, я начинающий разработчик;)

Источник

Я пытался использовать решение Redscouse, но я думаю, что он использовал старую версию Slimbox. Вот решение, основанное на v2.04, которое ограничит изображение, чтобы оно поместилось в текущем окне браузера.

Найдите функцию animateBox(). Рядом с вершиной вы должны найти строки, которые выглядят так:

$(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});
$(sizer).width(preload.width);
$([sizer, prevLink, nextLink]).height(preload.height);

Замените эти строки этими:

/* make sure the image won't be bigger than the window */
var winWidth = $(window).width() - 20;
var winHeight = $(window).height() - 104;
var maxSize = (winWidth > winHeight) ? winHeight : winWidth; /* the smaller dimension determines max size */

/* determine proper w and h for img, based on original image'w dimensions and maxSize */
var my_w = preload.width; 
var my_h = preload.height;
if (my_w > my_h)
{
    my_h = maxSize * my_h / my_w;
    my_w = maxSize;
}
else
{
    my_w = maxSize * my_w / my_h;
    my_h = maxSize;
}

if (preload.width > my_w || preload.height > my_h){ /* constrain it */
    $(image).css({backgroundImage: "url(" + activeURL + ")", backgroundSize: my_w + "px " + my_h + "px", visibility: "hidden", display: ""});
    $(sizer).width(my_w);
    $([sizer, prevLink, nextLink]).height(my_h);
}
else { /* default behaviour */
    $(image).css({backgroundImage: "url(" + activeURL + ")", backgroundSize: "", visibility: "hidden", display: ""});
    $(sizer).width(preload.width);
    $([sizer, prevLink, nextLink]).height(preload.height);
}

Корректировки -20 и -104 должны учитывать дополнительное пространство, которое slimbox использует вокруг изображения. Не стесняйтесь настраивать их по мере необходимости.

Источник

У меня была похожая проблема, когда изображение расширялось за пределы размера окна. Я знаю, что мог бы решить эту проблему, ограничив размер изображения при загрузке, но я не хотел этого делать, я бы предпочел установить размер окна слимбокса, поэтому я приступил к задаче, вот что я пришел с и работает отлично!:)

Чтобы облегчить настройку в будущем, вы хотите добавить строки userDefinedWidth и userDefinedHeight к вашему вызову slimbox в опциях:

Пример:

$(function($) {
    $("a[rel^='lightbox']").slimbox({
    /* Put custom options here */
    userDefinedWidth:640, /* set max width here */
    userDefinedHeight:480, /* set max height here */
    initialWidth: 250,
    initialHeight: 250,
    imageFadeDuration: 400
});

Затем откройте slimbox.js (или slimbox2.js) и снова найдите параметры, на этот раз добавьте userDefinedWidth и userDefinedHeight без значений, например:

w.slimbox=function(O,N,M){
    u=w.extend({
    userDefinedWidth:'',
    userDefinedHeight:'',
    loop:false,
    ...etc.
    ...etc.

Затем найдите функцию с именем i. В функции i замените следующие строки:

w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});
w(p).width(k.width); 
w([p,I,d]).height(k.height);

с этими строками:

var my_w = u.userDefinedWidth; 
var my_h = u.userDefinedHeight;
w(g).css({backgroundImage:"url("+n+")",backgroundSize:""+my_w+"px "+my_h+"px",visibility:"hidden",display:""});
w(p).width(my_w);
w([p,I,d]).height(my_h);

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

Пит.

PS: я php парень, который разбирается с jquery/javascript, так что если кто-то может сделать это лучше / быстрее / проще, пожалуйста, не стесняйтесь. О, и, пожалуйста, не стесняйтесь использовать этот код где угодно.;)

Источник

Хотя ответ Авинаша работает, это гораздо проще:

.pp_overlay {max-width:100%; max-height:100%;}

Процент в вышеуказанных полях принимает его как процент от размера браузера пользователя.

Класс.pp_overlay - это то, что он называется в PrettyPhoto. Вам нужно будет найти эквивалент для слимбокса.

Источник
Другие вопросы по тегам