0

サムネイル付きの小さな画像ギャラリーを作成しました。特定の色にカーソルを合わせるたびに、メイン ウィンドウの画像がその色の画像に変わります (実際には、カラー画像をそこに配置した画像のさまざまなカラー バリエーションに置き換えたいと思います)。

私がやりたいのは、そのようなギャラリーを自分のページに複数配置することです。問題は、別のギャラリーを追加すると、すべてが複製されることです。ギャラリーごとに css および jquery コードを作成することは避けたいと思います。これを実現する方法はありますか？

また、もともと、カラーサムネイルをクリックしたときにのみ大きな画像が表示されるようにしたかったのですが、ホバーではclick()なく、代わりに使用するmouseover()と、画像が「ちらつき」、消えます。私は何を間違っていますか？

以下は私のコードです：

CSS

.g-wrap {
    width: 250px;
    margin: 0;
    padding: 0;
}
.g-image {
    width: 250px;
    height: 159px;
    position: relative;
}
.g-image img {
    display: none;
    position: absolute;
    width: 250px;
    height: 159px;
    border: none;
}
.g-colors {
    margin: 0 auto;
}
.g-colors a {
    display: block;
    width: 24px;
    height: 24px;
    float: left;
}
.clearfix {
    float: none;
    clear: both;
}
/*Color palette*/
.purple {background-color: #7d278a;}
.beige {background-color: #b8b596;}
.gray {background-color: #5a5b5d;}
.blue {background-color: #5388d4;}

HTML

<div class="g-wrap">
<div class="g-image">
<a href=""><img src="http://imageshack.us/a/img89/4650/purplew.jpg" /></a>
<a href=""><img src="http://imageshack.us/a/img18/6574/beigekq.jpg" /></a>
<a href=""><img src="http://imageshack.us/a/img526/2198/grayw.jpg" /></a>
<a href=""><img src="http://imageshack.us/a/img849/6161/blueye.jpg" /></a>
</div>
<div class="g-colors">
<a href="" title="purple" class="purple"></a>
<a href="" title="beige" class="beige"></a>
<a href="" title="gray" class="gray"></a>
<a href="" title="blue" class="blue"></a>
</div>
<div class="clearfix"></div>
</div>

jQuery

$(document).ready(function(){
    var totalWidth = 0;
    $(".g-colors").children().each(function() {
    totalWidth = totalWidth + $(this).width();
    $(".g-colors").css('width',totalWidth);
});
    });
$(document).ready(function(){
    $(".g-image img").eq(0).css('display','block')
    $(".g-colors a").each(function(){
        $(this).mouseover(function(){
        var x = $(this).index();
        $(this).closest(".g-image img").hide();
        $(this).closest(".g-image img").eq(x).show();
        });
        });
    });
4

1 に答える 1

0

まず、JS コードにエラーがあると思います。次の出力をコンソールに追加してみてください。

console.log($(this).closest(".g-image img").length);

$(this).closest(".g-image img").hide();
$(this).closest(".g-image img").eq(x).show();

私にとっては、0 が出力されます。これは、要素の jQuery セットが空であることを意味します。実際、次のようなものを書く必要があると思います (HTML 構造に従って):

var imgs = $(this).closest('.g-wrap').find('.g-image img');
imgs.hide();
imgs.eq(x).show();

次に、コード全体を複製する必要がないようにするには、よりスマートなコードを記述する必要があります:) たとえば、$(document).ready(...);に配置したものをラップします。別の関数で。その関数はDOM 要素を作成し、ギャラリー機能でそれを承認するためにいくつかの操作を行います。つまり、関数は、いくつかのイベント ハンドラーをそれぞれの ".g-colors a" 要素にアタッチする必要があります (サンプルで既に行っているのとまったく同じ方法で)。次に、関数を各ギャラリー DOM 要素に適用できます。それだけです。このようなもの：

function makeGallery(gal)
{
   var totalWidth = 0;
   $(".g-colors > a", gal).each(function() {
      totalWidth = totalWidth + $(this).width();
      $(".g-colors").css('width', totalWidth);
   });


   $(".g-image img", gal).eq(0).css('display','block');

   $(gal).on('mouseover', '.g-colors > a', function() {
      var x = $(this).index();

      var imgs = $('.g-image img', gal);
      imgs.hide();
      imgs.eq(x).show();
   });
}

$(function () {
   makeGallery($('.g-wrap')[0]);
});
于 2013-05-17T08:59:36.600 に答える