Question

简而言之 - 我在WP Google Map Pro中显示帖子，可以列出帖子。因此，我不能使用任何需要短代码的图库，因为插件不显示短代码。

我尝试根据图片创建自己的图库。以下是它或多或少的样子 - 这是样本：

<div id="post_content">
<img src="image1.jpg" class="thumb" />
<img src="image2.jpg" class="thumb" />
<img src="image3.jpg" class="thumb" />
</div>

<div class="showimagediv"></div>

我使用jquery来做到这一点并且工作正常：

<script>
$(document).ready(function() {
    $('.thumb').on('click', function() {
        var img = $('<img />', {src    : this.src,
                                'class': 'fullImage'
                  });

        $('.showimagediv').html(img).show();
    });

        $('.showimagediv').on('click', function() {
        $(this).hide();
    });
});
</script>

然而，我只能显示图像并将其关闭。但我想让它看起来像带有arrowx PREV NEXT的灯箱。

问题是：我怎样才能做到这一点？要将同一div中的下一个图像加载到div“showimagediv”中并将image1替换为image2？有没有解决方案？

Answer 1

我认为你正在寻找这个：

＆＃13;

$(document).ready(function() {

    $(".showimagediv").html($("img").eq(0).clone())
    var pos = 0;
    $('#prev').on('click', function() {
        if(pos>0) pos--
          $(".showimagediv").hide().html($("img").eq(pos).clone()).fadeIn("slow");
    });

    $('#next').on('click', function() {
        if(pos<2) pos++
        $(".showimagediv").hide().html($("img").eq(pos).clone()).fadeIn("slow");
    });
    
    $('.showimagediv').on('click', function() {
        $(this).hide();
    });
});

＆＃13;

.img1{
 width: 50px;
 height: 50px;
}
.img2{
 width: 70px;
 height: 70px;
}
.img3{
 width: 90px;
 height: 90px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post_content">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="thumb img1" />
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="thumb img2" />
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="thumb img3" />
</div>
<button id="prev">Prev</button>
<button id="next">Next</button><br><br>
<span></span>
<div class="showimagediv"></div>

＆＃13;

单击按钮时显示div的下一个图像

1 个答案: