单击时在模态中显示img滑块的img

Question

我有一个图像滑块，我希望用户能够点击当前显示的img，然后在模态中看到它。困难在于图像彼此叠加。因此，我目前的方法是在模态中点击任何img，最顶层的img是唯一可以在模态中显示的img。

当用户点击滑块时，有没有办法显示（在模态中）滑块中当前显示的图像？您可以在此fiddle查看我当前的进度。这是我目前用于在模态中显示点击img的jquery：

  $(window).load(function() {
            $('img').on('click', function() {
                var sr = $(this).attr('src');
                $('#mimg').attr('src', sr);
                $('#myModal').modal('show');
            });
        });

提前感谢您的帮助！

Answer 1

Working Fiddle

您似乎没有选择当前幻灯片的图片。我通过循环滑动并检查它们的不透明度找到了当前的幻灯片。

删除此

var sr = $(this).attr('src');

替换为

var sr;
$(this).closest('.slides').find('.slide-container').each(function(index) {
    if ($(this).find('.slide').css("opacity") === 1) {
        sr = $(this).find('img').attr('src');
    }
});