Photoswipeの画像サイズ/比率

Question

私は、Photoswipeを含むLaravelウェブサイトを使用しています。 私の問題は次のとおりです。写真をクリックすると、あらかじめ定義された高さと幅（私の場合は764X480）がポップアップします。あらかじめ定義された（私はいくつかのパノラマがあるので）ではなく、オリジナルの比率で写真を開くことができます。それを修正する方法はありますか？そして別のサイズを設定することは可能ですか？あなたは動作を確認することができますhttp://www.pixelkomando.com/paysages

ありがとうございます！ Vince

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ページの[Issues]タブに、他のいくつかのソリューションがあります。

また、あなたは他のオプションのカップルすぎ

1.汚いソリューションを持っています。これは2枚の画像には十分ですが、画像が10枚ある場合は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], 12), 
    h: parseInt(size[1], 12) 
}; 

によって

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

をしかし、私はとをするためのものであるかわからないと言っています。比率を維持するための

は、私が唯一のCSSのトリックが見つかりました：

私はphotoswipeに行を追加しました。このようなCSS：

.pswp img { 
    max-width: none; 
} 

それは今です：

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

それを解決するための最良の方法ではないようですが、私は、私は必要な結果を持っています。