mark mark - 7 months ago 31
Javascript Question

First image without click

I have a problem with my image gallery. When I click on tmubnail is OK, large image has been showed. But I want to have first image without click on thumbnail.
How solve this problem?
Below is my code.

Here is my Django template:

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


Here is my 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

Trigger click event on first image yourself.

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

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

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

    });
</script>
Comments