没有点击的第一张图片

Question

我的图片库存在问题。当我点击缩略图时，它会显示大图，但我想要显示第一张图像而不必点击其缩略图。 我该如何解决这个问题？ 以下是我的代码。

这里是我的Django的模板：

<div class="row"> 
    {% if offer_images1 %} 
     <div class="col-md-6 col-sm-6 col-xs-12" id="help"> 
      {% for image in offer_images1 %} 
       <img id="imageHere" class="zoom_01 img-responsive" data-zoom-image="{{ image.paint.url }}" /> 
      {% endfor %} 
     </div> 

     <div class="col-md-6 col-sm-6 col-xs-12"> 
      <i><b>{% trans "Title" %}: </b>{{ offer_gallery.title }}</i><br> 
      <i><b>{% trans "Status" %}: </b>{{ offer_gallery.status }}</i><br> 
     </div> 

       {% for image in offer_images1 %} 
        <div class="col-md-3 hover08 column"> 
         <div style="padding-top:20px;padding-bottom:20px;"> 
          <figure class="img1"> 
           <img class="thumb img-responsive" src="{{ image.paint.url }}" width="150" height="150" style="border:1px solid grey"> 
          </figure> 
         </div> 
        </div> 
        {% if forloop.counter|divisibleby:"4" and not forloop.last %} 
         </div><div class="row"> 
        {% endif %} 
       {% endfor %} 

    {% endif %} 
</div> 

这里是我的jQuery代码：

<script> 
    $(document).ready(function() { 
     $(".thumb").each(function(index) { 
      $(this).on("click", function(){ 
       var image = $(this).attr("src") 
       $("#imageHere").attr('src', image); 
      }); 
     }); 
    }); 
</script> 

Answer 1

触发click事件的第一图像自己在。

<script> 
    $(document).ready(function() { 

     $(".thumb").on("click", function(){ 
      $("#imageHere").attr('src', $(this).attr("src")); 
     }); 

     // ======= HERE ======= 
     $(".thumb:first").click(); 

    }); 
</script>