Простая галерея изображений, новая для 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

Существует много способов сделать это, вы можете использовать data- для достижения этой цели, сделать два контейнера, один для основные фотографии и другие для небольших фотографий, затем поместите свои большие изображения в основной контейнер для фотографий и дайте им имя, относящееся к ним, такое data-target=img1 2 3 ... и дайте маленьким фотографиям имя данных таких data-status=img1 2 3 и т. д. .. и положить их в div не в чор.

В JQuery основной базой которой вы будете строить свою функцию на нем, когда некоторые один щелчок на маленькое изображение, например data-status="img1" он будет показывать DIV с data-target именем, равным ему data-target="img1" и то же для остальных, то вы можете сделать это 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>