CODEWITHSUNDEEP
javascriptjquerypythondjangotemplates
mark
mark

Reputation: 673

First image without click

I have a problem with my image gallery. When I click on a thumbnail it works and large image is shown but I want to have the first image to show up without having to click on its thumbnail. How can I 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>

Upvotes: 1

Views: 56

Answers (1)

Uzbekjon
Uzbekjon

Reputation: 11823

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>

Upvotes: 2

Related Questions