füge Bild von der Galerie zum Heldenabschnitt hinzu

Question

Was ich versuche zu tun ist, ein Galeriebild zu haben, das Heldbild auf Klicken zu ersetzen. Ich bin mir ziemlich sicher, dass es einen Weg gibt, dies in jQuery zu tun, aber ich kann nichts Elegantes finden.

Ich habe diese Seite http://nicholasdumais.com/jonbar/fashion/

und Code:

<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> 

Dank!

Answer 1

Vielleicht könnten Sie etwas wie folgt verwenden:

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

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

}); 

Oder könnten Sie speichern größere url Bild in Datenattribute der Galerie Elemente und verwenden, die größere Datei url.

Answer 2

So etwas wie das.

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">