1 Тема від Ярослав

  • Ярослав
  • Гість

Тема: Максимальний розмір зображення lightbox2

Доброго дня!
За розмір зображення і box-у відповідають
CSS-код:

#lightbox img {
    width: auto;
    height: auto;
}

JS-код:

    Lightbox.prototype.changeImage = function(imageNumber) {
      var $image, $lightbox, preloader,
        _this = this;
      this.disableKeyboardNav();
      $lightbox = $('#lightbox');
      $image = $lightbox.find('.lb-image');
      this.sizeOverlay();
      $('#lightboxOverlay').fadeIn(this.options.fadeDuration);
      $('.loader').fadeIn('slow');
      $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
      $lightbox.find('.lb-outerContainer').addClass('animating');
      preloader = new Image;
      preloader.onload = function() {
        $image.attr('src', _this.album[imageNumber].link);
        $image.width = preloader.width;
        $image.height = preloader.height;
        return _this.sizeContainer(preloader.width, preloader.height);
      };
      preloader.src = this.album[imageNumber].link;
      this.currentImageIndex = imageNumber;
    };

Для того щоб зображення, перевищуючи певний розмір, показувалось меншим радять використовувати такий код:

    Lightbox.prototype.changeImage = function(imageNumber) {
      var $image, $lightbox, preloader,
        _this = this;
      this.disableKeyboardNav();
      $lightbox = $('#lightbox');
      $image = $lightbox.find('.lb-image');
      this.sizeOverlay();
      $('#lightboxOverlay').fadeIn(this.options.fadeDuration);
      $('.loader').fadeIn('slow');
      $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
      $lightbox.find('.lb-outerContainer').addClass('animating');
      preloader = new Image;
      preloader.onload = function() {
        $image.attr('src', _this.album[imageNumber].link);
        preloader.width = ( preloader.width > 1000 ) ? 1024 : preloader.width;
        preloader.height = ( preloader.height > 768 ) ? 768 : preloader.height;
        $image.width = preloader.width;
        $image.height = preloader.height;
        return _this.sizeContainer(preloader.width, preloader.height);
      };
      preloader.src = this.album[imageNumber].link;
      this.currentImageIndex = imageNumber;
    };

І такий:

    #lightbox img {
    max-width: 1024px;
    max-height: 768px;
    }

Проте тут не беруться до уваги пропорції зображення і ми можемо отримати білі смуги ліворуч і праворуч або ж знизу і згори від нього. Чи можна якось це виправити?

2 Відповідь від Ярослав

  • Ярослав
  • Гість

Re: Максимальний розмір зображення lightbox2

Dragonzap звідси розробив дуже хороше рішення:
У файлі lightbox.js замінити

preloader.onload = function() {
$image.attr('src', _this.album[_this.currentImageIndex].link);
$image.width = preloader.width;
$image.height = preloader.height;
return _this.sizeContainer(preloader.width, preloader.height);
};

на

    preloader.onload = function() {
        $image.attr('src', _this.album[_this.currentImageIndex].link);
        if (preloader.width > window.innerWidth * 0.9) {
            preloader.height = (window.innerWidth * 0.9 * preloader.height) / preloader.width;
            preloader.width = window.innerWidth * 0.9;
        }

        if (preloader.height > window.innerHeight * 0.8) {
            preloader.width = (window.innerHeight * 0.8 * preloader.width) / preloader.height;
            preloader.height = window.innerHeight * 0.8;
        }
        
        $image.width = preloader.width;
        $image.height = preloader.height;
        $image.attr('width', preloader.width + "px");
        return _this.sizeContainer(preloader.width, preloader.height);
    };

у файлі ligthbox.css код:

#lightbox img {
width: auto;
height: auto;
}

на

#lightbox img {
/*width: auto;
height: auto;*/
}