0

作成しようとしている単純な jquery ギャラリーがあります。

親指をクリックしたときを除いて、私はそれを機能させています-それはこれを行います：

  1. 既存のつまみのスペースを最初の画像に置き換えます
  2. 親指をメイン画像の上に置いてフロートを放り投げる
    • 最後の親指をクリックして、私の意味を確認してください

CSSまたはJqueryでこれを修正する方法を知っている人はいますか?

私はこれを超シンプルにしようとしています。

ありがとう

ここにjsfiddleがあります：http://jsfiddle.net/webdott/zZNBQ/1/

    <div>
    <img src="image1.jpg" class="first"/>
    <img src="image2.jpg" />
    </div>

    <style>
    img {float:right;width:10%;margin:1%;}
    .fullview{width:60%;margin:0 4% 0 0;float:left;}
    .first{width:60%;margin:0 4% 0 0;float:left}
    </style>

    <script>
    $('img').click(function() {
    $(this).addClass('fullview').siblings().removeClass('fullview first');
    });
    </script>
4

2 に答える 2

1

別のオプションは、コンテナ div と絶対位置を使用することです。

<div style="width:40%;float:right;">

このJSFiddleを参照してください。

于 2013-10-11T00:47:06.220 に答える
0

問題は、選択された画像の前後の画像が、大きい画像の表示方法や浮き方に影響を与えていることだと思います。大きな画像を 1 つの要素としてフローティングしてから、その要素のソースを変更して、クリックした要素と一致させてみませんか? この例のように。

$('.thumbnail').click(function() {
   var src = $(this).attr('src');
   $('#fullview').attr('src',src);
});

と

#fullview {
float:left;
max-width:75%;
}

ul {
float:right;
}

li {
    display: inline;
}
li img {
    width:50px;
    cursor: pointer;
}

または、似たようなことを行うこともできますが、この例のようにギャラリーを横に置きます。

于 2013-10-11T00:34:31.560 に答える