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

Question

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

Основная проблема, с которой я сталкиваюсь, заключается в том, что некоторые из моих изображений довольно длинные, а при низком разрешении 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. 
  

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

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

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

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

Answer 2

после загрузки изображения, сделайте следующее:.

$ ('# lbImage') CSS ('фон-размер', 'содержит');

Answer 3

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

найти и заменить три строки в файле 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]-->