1

私は信じられない奇妙な現象に出くわしました.なぜこれが起こるのかについて誰かが答えを持っているのだろうかと思いました. 私は、作成したカスタム jQuery スライドショーを使用して、写真サイトの画像の多くの操作を行ってきましたが、いくつかの問題に遭遇しました。

ここにギャラリーがあります: http://www.daemondeveloper.com/photography/gallery.php

このギャラリーの画像のサイズを変更して、プレビュー画像のサイズに合わせて拡大縮小する関数をいくつか追加しています。ご覧のとおり、最後の画像はパノラマであり、サイズを変更するようにjavascriptを指定していても、divの高さ全体を埋めていません。

ページを更新すると、javascript が突然動作するようになり、画像が適切に拡大縮小されます。

女の子のパノラマ写真をクリックしてみてください。私のスライドショーが表示され、jQuery を使用して縦方向に拡大縮小および中央揃えされた画像が表示されます。以下の関数は、ギャラリー内の小さな画像プレビューのクリックを処理するものです。

コメントされたchangeSize()関数がどこにあるかを見ると、それは私が関数を持っているために使用した場所であり、スケーリングは機能しませんでした。次に、スライドショーを表示する .show() 関数の後に移動しましたが、動作するようになりました。したがって、display:none; のように見えます。デバッグすると、currentImg オブジェクトが null であったため、display:none; に設定されているときに .slides セレクターが存在しないかのように、javascript の起動方法に影響がありました。これは本当に起こっているのでしょうか、それとも他の何かの副作用を見ているだけですか?

これが実際に起こっている場合、gallery.php ページの最初の読み込み時にパノラマ画像がスケーリングされないという最初の問題の原因に関係している可能性があります。

$('.imgHolder').click(function(){
    currentPosition = $('.imgHolder').index(this);

    $('#slideShow').width(slideWidth);

  // Remove scrollbar in JS
  $('#slideContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides.css({
    'float' : 'left',
    'width' : slideWidth
  });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', (slideWidth * numberOfSlides));

    // Hide left arrow control on first load
    manageControls(currentPosition);

    $('#slideInner').css('margin-left' , slideWidth*(-currentPosition));

    //changeSize(); used to be here

    $('#filter').show();
    $('#photoWrap').show();

            //Change image scale and center
    changeSize();
});

そして、ここにスケーリングとセンタリングを行う changeSize() 関数があります

 function changeSize(){

  currentSlide = $('.slide').get(currentPosition);
  currentImg = $(currentSlide).children('img:first')[0];
  imgRatio =  $(currentImg).height() / $(currentImg).width(); 

if(imgRatio < slideRatio)
{
    $(currentImg).addClass('landscape');
    //Vertically align
    var thisHeight = $(currentImg).height();
    $(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2));

}else{
    $(currentImg).addClass('portrait');
}


}
4

1 に答える 1

1 
$('#gallery ul li').each(function() {
    var img = $(this).children('div').children('img').first();
    var ratio = img.height() / img.width();
    var goal = img.parent('div').height() / img.parent('div').width();

    if (ratio < goal) {
        img.addClass('portrait');

        img.css('margin-left', -(img.width() / 2) + ($(this).children('div').width() / 2));
    } else {
        img.css('width', '100%');
    }
});

ここでは、変数$()を設定するときにメソッドを呼び出す要素を既に選択しているため、不要なインスタンスをコードから削除しました。imgこの冗長性が最終的な問題であるとは思えませんが、始めるには良い場所です。

 

コードをこれに更新して、そこからデバッグしましょう。

編集：

私はあなたのエラーを見つけたと思います（まあ、少なくとも1つ見つけました）：

function configGallery()
{

var currentPosition;
var slides = $('.slide')
var currentSlide;
var currentImg;
var slideWidth = 720;
var numberOfSlides = slides.length;
...
}

ここで何が問題なのか分かりますか？後でセミコロンを忘れてしまったvar slides = $('.slide')ので、それが問題になる可能性があります。正直なところ、あなたのスクリプトがまったく実行されたことに驚いています。通常、セミコロンがないと全体がクラッシュします。

アップデート：

機会があれば、 $() を削除するためのセレクターをいくつか次に示します。

function changeSize(){

      currentSlide = $('.slide').get(currentPosition);
      currentImg = $(currentSlide).children('img').first();
      imgRatio =  $(currentImg).height() / $(currentImg).width(); 

    if(imgRatio < slideRatio)
    {
        $(currentImg).addClass('landscape');
        //Vertically align
        var thisHeight = $(currentImg).height();
        $(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2));

    }else{
        $(currentImg).addClass('portrait');
    }
}

 

アップデート：

さて、画像サイズ変更関数を書き直すのに役立つちょっとしたフィドルを書きました。私はそれをきれいにしてプラグインに入れることに取り組みます。

アップデート：

これは、簡単で汚いプラグインの同じ関数です: http://jsfiddle.net/Wj3RM/3/ 私はそれをきれいにしませんでした.

于 2012-07-31T18:40:58.530 に答える