4

私はHTML/CSSの分野ではほとんど初心者であり、最初のWebサイトの構築を開始して以来、jqueryの課題に直面しています。サムネイルを使用して、jqueryを利用した画像ギャラリーを作成したいと思います。そのことについて私が従ったチュートリアルは、Ivan Lazarevic（http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/）でした。また、このスレッドを通じてStackoverflowのフォーラムを利用しました：http：//goo.gl/ILzsx。

彼が提供するコードは、表示されている大きな画像を、クリックされたサムネイルの大きなバージョンに置き換えます。これは非常にスムーズに機能するようですが、同じ向きの写真の場合のみです。次のコードは2つの異なるファイルに表示されるため、水平方向の画像と垂直方向の画像の違いがわかります。

   <div id="mainImage">
     <img id="largeImage" src="Images/Projects/UOW/UOWII_large.jpg"/>
   </div>

と：

   <div id="mainImageVERTICAL">
     <img id="largeImageVERTICAL" src="Images/Projects/UOW/UOWI_large.jpg" />
   </div>

画像の向きが縦向きか横向きかによって、largeImageパラメーターとlargeImageVERTICALパラメーターの両方に異なるCSSルールを作成しました。

   #largeImage { 
   position: fixed;
   height: 83%;
   width:auto;
   top: 15%;
   left: 5%;
   }

と：

   #largeImageVERTICAL { 
   position: fixed;
   height: 83%;
   width:auto;
   top: 15%;
   left: 36.36%;
   }

これらの2つのルールは、画像を画面の異なるポイントに配置するだけです。ただし、私が知りたいのは、コードを変更して、それぞれに属するCSSルールを適用して縦向きと横向きの両方の画像を含むページを作成できるようにする方法です。今までのところ、私が持っているのは、Lazarevicのアプローチから得たものです。

   $('#thumbs img').click(function(){
   $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
   });

このコードは、サムネイルをより大きな画像に置き換えるだけです。すでに述べたように、適切なルールを適切な画像に適用できるようにしたいのですが、これはJSコーディングによって行われる必要があると思いますが、これについてはほとんど何も知りません。

このプロジェクトを続けることができるように、私はいくつかの助けをいただければ幸いです。これを機能させる方法はありますか？たぶん、クリックされた画像に応じて、1つまたは別のCSSルールを使用するようにマシンに指示するJS関数ですか？私は本当にここで立ち往生しています...

前もって感謝します！

4

2 に答える 2

1

これを行うにはいくつかの方法があります。

HTML5data-*属性を使用して、<img>更新する要素を指定します。そう：

<div id="thumbs">
    <img src="img.jpg" data-large="largeImage"/>
    <img src="anotherimg.jpg" data-large="largeImageVERTICAL"/>
</div>

それで：

$('#thumbs img').click(function(e) {
    var imageId = $(this).attr('data-large'),
        newSrc = this.src.replace('thumb', 'large');
    $('#' + imageId).attr('src', newSrc);
});

または、サムネイルのサイズを使用して、縦か横かを判断します。

$('#thumbs img').click(function(e) {
    var $this = $(this),
        height = $this.height(),
        width = $this.width(),
        newSrc = this.src.replace('thumb', 'large');
    var imageId = (height > width) ? 'largeImageVERTICAL' : 'largeImage';
    $('#' + imageId).attr('src', newSrc);
});

いずれの場合も、他の未使用の<img>要素を非表示にして、以前に選択した別の方向の画像が表示されないようにする必要があります。

これを達成する1つの方法は次のとおりです。

var alternateImageId = (imageId === 'largeImage') ? 'largeImageVERTICAL' : 'largeImage';
$('#' + alternateImageId).hide();

click上記のイベント ハンドラに上記の 2 行を追加し、 を呼び出し.show()た後に呼び出し.attr('src', ...)ます。

于 2013-03-14T13:02:16.567 に答える
1

ID ではなくクラスを使用します。

#largeImage{ 
   top: 15%;
   width:auto;
   height: 83%;
   position: fixed;
}
.portrait{ 
   left: 36.36%;
}
.landscape{ 
   left: 5%;
}

js

$('#largeImage').on('load', function () {
    var that = $(this);
    if (that.width() < that.height()) {
        that.addClass('portrait');
    } else {
        that.addClass('landscape');
    }
});
$('#thumbs').on('click', 'img', function () {
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
于 2013-03-14T13:06:28.107 に答える