ギャラリーからヒーローセクションへ画像を追加

Question

私がやっていることはギャラリー画像をクリックしてヒーロー画像を置き換えることです。 jqueryでこれを行う方法があるとは確信していますが、エレガントなものは何も見つかりません。

私はこのサイトhttp://nicholasdumais.com/jonbar/fashion/

とコードがあります。

<div class="col-8"> 
    <img class="gallery-hero" src="../img/shot7.jpg"> 

</div> 
<div class="col-4 gallery-container"> 

    <span style="font-size:36px;color:#222;"> 
     fashion 
    </span> 

    <br><br> 
    <div class="col-4"> 
     <img class="gallery-thumb" src="../img/shot1.jpg"> 

     <img class="gallery-thumb" src="../img/shot3.jpg"> 

     <img class="gallery-thumb" src="../img/shot11.jpg"> 

     <img class="gallery-thumb" src="../img/shot5.jpg"> 

     <img class="gallery-thumb" src="../img/shot13.jpg"> 
    </div> 


    <div class="col-4"> 
     <img class="gallery-thumb" src="../img/shot7.jpg"> 

     <img class="gallery-thumb" src="../img/shot2.jpg"> 

     <img class="gallery-thumb" src="../img/shot4.jpg"> 

     <img class="gallery-thumb" src="../img/shot9.jpg"> 
    </div> 


    <div class="col-4"> 
     <img class="gallery-thumb" src="../img/shot12.jpg"> 

     <img class="gallery-thumb" src="../img/shot8.jpg"> 

     <img class="gallery-thumb" src="../img/shot10.jpg"> 

     <img class="gallery-thumb" src="../img/shot6.jpg"> 

     <img class="gallery-thumb" src="../img/shot14.jpg"> 
    </div> 

</div> 

感謝を！

$('.gallery-thumb').click(function(){ 

    $('.gallery-hero').attr('src', $('this').attr('src')); 

}); 

それとも、ギャラリー項目のデータ属性に大きな画像のURLを保存し、その大きなファイルのURLを使用することができます。

Answer 1

たぶん、あなたはこのようなものを使用することができます。

Answer 2

このようなものです。

var galThamb = $('.gallery-thumb'), 
 
    galHero = $('.gallery-hero'); 
 

 
galThamb.on('click', function() { 
 
    var slfSrc = $(this).attr('src'); 
 

 
    galHero.removeClass('active').delay(300).queue(function(next){ 
 
    var img = new Image(); 
 
    
 
    img.onload = function() { 
 
     galHero.attr('src', slfSrc).addClass('active'); 
 
    }; 
 
    
 
    img.src = slfSrc; 
 
    next(); 
 
    }); 
 
});

.gallery-hero{ 
 
    opacity: 0; 
 
    transition: all .3s; 
 
} 
 

 
.gallery-hero.active{ 
 
    opacity: 1; 
 
}

<img src="..." class="gallery-hero active">