我的图片库有问题。当我单击缩略图时,它可以工作并显示大图像,但我希望显示第一张图像而不必单击其缩略图。
我怎么解决这个问题?
下面是我的代码。
这是我的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>
最佳答案
自己在第一张图像上触发click
事件。
<script>
$(document).ready(function () {
$(".thumb").on("click", function(){
$("#imageHere").attr('src', $(this).attr("src"));
});
// ======= HERE =======
$( ".thumb:first" ).click();
});
</script>
关于javascript - 没有点击的第一张图片,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36756199/