jqueryを初めて利用し、ガイダンスを探しているシンプルな画像ギャラリー

Question

私は以下を持っています：http://prntscr.com/b71b2e 画像を格納する小さなボックスとデフォルトで選択した画像を格納する大きなボックスを探していますが、選択されたとき。 私はjqueryを初めて使っています。これは初心者のレベルのことだと思います。誰かが私に何をしなければならないか説明することができますか？ここで

は私のHTMLとCSSです：

.photos { 
    width:1000px; 
    height:1000px; 
    margin-right:auto; 
    margin-left:auto; 
    padding:0px;  
} 

.main-photo { 
    width:988px; 
    height:550px; 
    margin-left:5px; 
    border: thin solid #666; 
    margin-bottom:20px; 
} 

.main-photo-text { 
    margin-top:500px; 
    height:50px; 
    width:auto; 
    float:left; 
    font-size:200%; 
    color:#FFF; 
    text-shadow: #000 2px 2px; 
    padding-left:10px; 
} 

///

<div class="photos"> 

<div class="main-photo"> 
    <div class="main-photo-text">Project Name</div> 
</div> 

<a class="photo" href="#"></a> 
<a class="photo" href="#"></a> 
<a class="photo" href="#"></a> 
<a class="photo" href="#"></a> 
<a class="photo" href="#"></a> 
<a class="photo" href="#"></a> 
<a class="photo" href="#"></a> 
<a class="photo" href="#"></a> 
<a class="photo" href="#"></a> 
<a class="photo" href="#"></a> 


</div> 

Answer 1

これを行うには多くの方法があり、あなたは、1つの二つの容器を作り、これを実現するためにdata-を使用することができますメイン写真と別の写真を小さな写真のために入れて、あなたの大きな画像をメインの写真コンテナに入れて、data-target=img1 2 3 ...のようなデータ名を与えて、小さな写真のデータ名にこのようなdata-status=img1 2 3などを付けます。 .. divに入れないでchor。

display:none/visibility:hiddenまたはopacity:0に最初の画像を除いて大きな画像が消えるようにします。最初の画像はデフォルトで表示されるため、ページロード時にJQを使用してフェードアウトされます。

jQueryのでは、あなたがそれをあなたの関数を構築しますメインベースは小さな画像にいくつかのワンクリックは、このようなdata-status="img1"それは、あなたがこれを行うことができ、残りはそれdata-target="img1"と同じに等しいdata-target名前のdiv要素が表示されますときですhttps://jsfiddle.net/v7yf880a/

$(document).ready(function() { 
 
    $('div[data-status]').on('click', function() { 
 
    var thsData = $(this).data('status'); 
 
    $('div[data-target]').fadeOut(0); 
 
    $('div[data-target="' + thsData + '"]').fadeIn('slow'); 
 
    }); 
 
});

html, body { 
 
    height: 100%; 
 
} 
 

 
.photos { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100% 
 
} 
 

 
.target { 
 
    width: 100%; 
 
    height: 70%; 
 
    position: relative 
 
} 
 

 
.target div[data-target] { 
 
    position: absolute; 
 
    background-image: url(http://placehold.it/600x300); 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.target div[data-target]:not(:nth-of-type(1)) { 
 
    display: none; 
 
} 
 

 
.status { 
 
    width: 100%; 
 
    height: 30%; 
 
    float: left 
 
} 
 

 
.status div[data-status] { 
 
    float: left; 
 
    width: 20%; 
 
    height: 60px; 
 
    background-color: #9b59b6; 
 
    margin: 4px; 
 
    cursor: pointer 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="photos"> 
 

 
    <div class="target"> 
 
     <div data-target="img1">Project Name1</div> 
 
     <div data-target="img2">Project Name2</div> 
 
     <div data-target="img3">Project Name3</div> 
 
     <div data-target="img4">Project Name4</div> 
 
     <div data-target="img5">Project Name5</div> 
 
     <div data-target="img6">Project Name6</div> 
 
    </div> 
 
    <div class="status"> 
 
    <div data-status="img1">Project Name</div> 
 
    <div data-status="img2">Project Name</div> 
 
    <div data-status="img3">Project Name</div> 
 
    <div data-status="img4">Project Name</div> 
 
    <div data-status="img5">Project Name</div> 
 
    <div data-status="img6">Project Name</div> 
 
    </div> 
 

 
</div>