-1

私のDOMは次のようになります...

<div id="leftPan">
    <div id="leftmemberPan">
        <a href="#"><img src="/MyApp/images/${article.images[0].imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testingMain"/></a>    
    </div>
    <div id="thumbnailPan">
        <c:forEach items="${article.images}" var="image">                       
            <a href="#"><img src="/MyApp/images/${image.imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testing"/></a>                        
        </c:forEach>
    </div>
</div>

leftmemberPanメイン画像を表示しておりthumbnailPan、サムネイルのリストを表示しています

<c:forEach items="${article.images}" var="image">サムネイル画像の配列を保持する単なるJSTLタグです。

私はjQueryを初めて使用し、初めて使用していることに注意してください。

4

3 に答える 3

1

サムネイルのaltタグ内にメイン画像srcのリストを保存してから、leftmemberPansrcを変更してプライマリ画像を表示することができます。

元：

<img id="leftmemberPan" src="myplace_holder.jpg" />
<img class="thumbnail myimg.jpg" src="myimg_thumbnail.jpg" />

<script type="text/javascript">
    $(".thumbnail").click(function()
    {
        var class_array = $(this).attr("class").split(' ');
        var newsrc = class_array[class_array.length-1]; // Pull new src from the class tag (assuming it's the last one)
        $("#leftmemberPan").attr('src', newsrc);
    });
</script>

これはそれを行うための1つの方法にすぎないことに注意してください。他の多くの方法でもプライマリイメージを保存できます。

お役に立てれば！

編集：クラス属性を利用するようにコード例を更新しました

于 2012-08-07T18:16:01.493 に答える
0

画像のパスを各サムネイルのデータパスタグに入れ、親指をクリックすると、データパスからそのパスを取得しsrc、メイン画像のパスをそのパスにします。

乾杯！

于 2012-08-07T18:17:36.980 に答える
0

以前の投稿/回答の改訂（jQuery 1.7を使用）..。

<img class="thumbnail" data-file="myimg.jpg" src="myimg_thumbnail.jpg" />

<script type="text/javascript">
    var mainImage = $("img","#leftmemberPan")[0];
    $("#thumbnailPan").on("click", ".thumbnail", function(event){
        mainImage.src = $(this).data("file");
    });
</script>
  • メインファイルの画像パスにデータ属性を使用します。
  • ページの読み込み後に1回（時間）のDOMルックアップを実行して、メインの画像要素を参照します。
  • サムネイルのデータ属性を使用して、画像要素のsrc属性を設定するだけです。
于 2012-08-07T18:30:24.173 に答える