Erstes Bild ohne Klick

Question

Ich habe ein Problem mit meiner Fotogalerie. Wenn ich auf ein Thumbnail klicke, funktioniert es und ein großes Bild wird angezeigt, aber ich möchte, dass das erste Bild angezeigt wird, ohne auf das Thumbnail klicken zu müssen. Wie kann ich dieses Problem lösen? Unten ist mein Code.

Hier ist meine Django-Vorlage:

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

Hier ist mein jQuery-Code:

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

Answer 1

Trigger-click Ereignis auf dem ersten Bild selbst.

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

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

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

    }); 
</script>