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>

谢谢！

Answer 1

也许你可以使用这样的东西：

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

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

});

或者您可以将更大的图片网址存储在图库项目的数据属性中，并使用更大的文件网址。

Answer 2

像这样。

＆＃13;

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();
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

将图像从图库添加到英雄部分

2 个答案: