Как мне сделать Slimbox 2 для автоматического изменения размера экрана?

Question

Согласно документации Slimbox2 эта функция не поддерживается. Но мне было интересно, сталкивался ли кто-нибудь с какими-либо хитростями, чтобы сделать эту работу.

Основная проблема, с которой я сталкиваюсь, заключается в том, что некоторые из моих изображений довольно длинные, и при низком разрешении LightBox2 создаст неприятные ощущения для пользователя.

Answer 1

Я недавно начал использовать slimbox2 на своем веб-сайте (http://www.trips.elusien.co.uk) и обнаружил, что он может извлечь выгоду из нескольких модификаций:

• «Изменение размера слайда»: это делает размер слайд-шоу постоянным, а не в зависимости от размера изображения (указав размер в пикселях), или вы можете использовать процент, чтобы увеличить или уменьшить слайды в слайд-шоу. Вы указываете это с помощью 2 новых опций:

  slideWidth: 0,              // Initial width  of the slide (in pixels or in percent as a string e.g. "50%")
  slideHeight: 0,             // Initial height of the slide (in pixels or in percent as a string e.g. "50%")
  

• позволяет переключать слайды автоматически, а не вручную. Вы указываете это с помощью новой опции:

  slideInterval: 0,           // Interval between flipping slides (in seconds), 0 means no automation.
  

• загрузить слайды из слайд-шоу.

Первая и последняя функции не могут быть реализованы в оригинальной версии Slimbox2, поскольку в этой версии изображение отображается в виде фонового изображения, а не с использованием тега «IMG».

Я разместил файлы Javascript и CSS на своем веб-сайте. Если вы хотите попробовать их, перейдите на мой сайт и нажмите на ссылку «Примеры Slimbox», вы можете скачать их здесь. Чтобы увидеть изящный способ использования slimbox2, нажмите ссылку «PhotoSLide Show» на главной странице.

С уважением, Нил

Answer 2

это легко исправить, проверьте мой код.

найдите и замените три строки в файле slimbox2.js:

$(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 */
    window.innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //ie fix
    window.innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //ie fix        
    var winWidth =  window.innerWidth-200; //browser width
    var winHeight = window.innerHeight-100; //browser height
    var my_w = preload.width; //original width
    var my_h = preload.height; //original height

        // scale  width
        var scaleW1 = winWidth;
        var scaleH1 = (my_h * winWidth) / my_w;

        // scale  height
        var scaleW2 = (my_w * winHeight) / my_h;
        var scaleH2 = winHeight;
        var scale = (scaleW2 > winWidth);

        if (scale) {
            reswidth = Math.floor(scaleW1);
            resheight = Math.floor(scaleH1);

        }
        else {
            reswidth = Math.floor(scaleW2);
            resheight = Math.floor(scaleH2);

        }
        if ($("p").hasClass("slimboxie")){ 
        $(image).css({filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='"+ activeURL + "', sizingMethod='scale')", visibility: "hidden", display: ""});

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

Я любитель в javascript, но я думаю, что он отлично работает. Я заставил это работать с IE8 также. Вам нужно только вставить:

<!--[if IE 8]>
<p class="slimboxie"></p>
<![endif]-->

Answer 3

после загрузки изображения: