Photoswipe圖像尺寸/比例

Question

我使用Laravel網站，包括Photoswipe。 這是我的問題：當我點擊一張照片時，它彈出一個預定義的高度和寬度（在我的情況下是764X480）。我想讓我的照片以其原始比例打開，而不是預定義的（因爲我有一些全景圖）。有沒有辦法解決這個問題？是否可以設置其他尺寸？您可以檢查http://www.pixelkomando.com/paysages

非常感謝的行爲！ 文斯

Answer 1

可惜PhotoSwipe沒有一個選項來自動檢測圖像的尺寸。這不是一個錯誤或缺少的功能。這是作者的偏好，保持它小而乾淨的純JavaScript代碼。筆者的建議是這裏http://photoswipe.com/documentation/faq.html

你可以試試這個。 （來源：https://github.com/dimsemenov/PhotoSwipe/issues/796）

var items = [ 
    { src: 'http://........', w:0, h:0 }, 
    { src: 'http://........', w:0, h:0 } 
]; 

var gallery = new PhotoSwipe(.....); 
gallery.listen('gettingData', function(index, item) { 
     if (item.w < 1 || item.h < 1) { // unknown size 
     var img = new Image(); 
     img.onload = function() { // will get size after load 
     item.w = this.width; // set image width 
     item.h = this.height; // set image height 
      gallery.invalidateCurrItems(); // reinit Items 
      gallery.updateSize(true); // reinit Items 
     } 
    img.src = item.src; // let's download image 
    } 
}); 
gallery.init(); 

我個人還沒有測試，但筆者通過註釋下面的代碼樣的批准。還有一些其他的解決方案來自開發人員在其問題選項卡下的github頁面上。

你也有其他幾個選項也

最骯髒的解決方案。這可能對於一些圖像來說足夠好，但是如果您有幾十張圖像，則需要花費太多時間來等待init。

嵌入網頁上的全尺寸圖片。這將使您可以訪問窗口負載上的圖像尺寸，以便您可以使用實際尺寸創建圖像陣列，然後使用init PhotoSwipe。

2.您可以使用像http://imagesloaded.desandro.com/這樣的jQuery插件來檢測圖片是否被加載。您可以使用尺寸爲100x100的小圖像佔位符來初始化文檔上的PhotoSwipe。然後根據插件的過程，使用PhotoSwipe API更新加載的圖像。

最先進的解決方案。我上面提到的imagesLoaded插件使用jquery的延遲對象。 http://api.jquery.com/category/deferred-object/你總是歡迎編寫你自己的插件。

Answer 2

謝謝。 JS真的不夠好。我找到了一個解決方案。

我更換了下面幾行：

// create slide object 
item = { 
    src: linkEl.getAttribute('href'), 
    w: parseInt(size[0], 10), 
    h: parseInt(size[1], 10) 
}; 

通過

// create slide object 
item = { 
    src: linkEl.getAttribute('href'), 
    w: parseInt(size[0], 12), 
    h: parseInt(size[1], 12) 
}; 

但我不得不說，我不知道是什麼和是。

用於保持比，我只找到一個CSS招：

我在photoswipe加入一條線。CSS是這樣的：

.pswp img { 
    max-width: none; 
} 

它現在：

.pswp img { 
    max-width: none; 
    height: auto !important; 
} 

它似乎並沒有成爲解決這個問題的最好辦法，但我有我需要的結果。