Question

我试图通过JQuery获取图像的src值，将其传递到引导模式以显示它。我的问题是，我不知道如何获得此src价值，我尝试制作一些javascript但我认为它无法正常运行。请帮忙。

这是我的形象：

<img class="img-thumbnail" src="" data-def-dd="pic" id="pic" name="pic">

Boostrap模式：

<div id="img_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <img class="img-thumbnail" src="" data-onload="loadImage()"
                 data-def-dd="photo" id="photo_modal" name="photo">
        </div>
    </div>
</div>

最后是javascript：

var src = $(this).attr('src');
console.log(src);

function loadImage(){
    $('#photo_modal').attr('src', src);
}

Answer 1

如果您需要获取任何图像的来源：

$('img').on('click', function(){
     var imageSource = $(this).attr('src')
})

Answer 2

当您点击图片#pic时，其来源将被添加为图片#photo_modal的来源。

$('#pic').on('click', function() {
    $('#photo_modal').attr('src', $(this).attr('src'));
});

Answer 3

这是一个想法。 JSFiddle

<强> HTML

<img class="thumbnail mini-thumb" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" />

<img class="thumbnail mini-thumb" src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" />

<div id="img_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <img class="img-thumbnail" src="" id="photo_modal" name="photo">
        </div>
    </div>
</div>

我使用了data-bigpic，因此您可以为缩略图添加一个小图像，为模态添加第二个较大的图像。
添加了一个类以重用jquery函数的功能

<强>的Javascript（jQuery的）

$(document).ready(function(){
    loadPreviews();

});

function loadPreviews(){
    $(".mini-thumb").on('click', function(){
        console.log("Img url " + $(this).data('bigpic'));
      $("#photo_modal").attr("src", $(this).data('bigpic'));
        $("#img_modal").modal("show");
  });
}

该函数获取data-bigpic值并将其添加到模态图像。

- EDIT-- 这是fiddle相同但使用图像中的src。

这只是我的观点，但我相信使用ajax重新加载模态内容可能更好。如果您这样做，您的页面只需要加载迷你拇指。然后使用data-bigimage值加载服务器返回的数据。如果你有很多图像，它可能会有所帮助

Answer 4

试试这个，基本上你需要获得img的来源并将其插入到模态＆＃34;＆＃34;＆＃34;;

首先，您应该为要获取源的图像指定一个id，以便更容易检索，并确保多个图像与一个类没有关联。

<img id="img-thumbnail" class="img-thumbnail" src="" data-def-dd="pic" id="pic" name="pic">

其次，该功能应调整如下：

function loadImage(){
    // get the src of the image
    var image_src = $("#img-thumbnail").attr('src');

    // assign it to the modal's body
    $("#photo_modal").attr('src',image_src);
}

其次，您可以在页面加载时执行此代码：

选项1：

jQuery(document).ready(function($){
   loadImage();
});

选项2：

您可以在加载模态时执行该功能，因为需要加载可能会有延迟。

$('#img_modal').on('show.bs.modal', function (event) {

    loadImage();
});

希望这有帮助。

Answer 5

添加例如由hidden标识的输入clicked-img-src并定义click事件以处理用户点击img并从中获取src属性使用.attr('src')单击图像，然后存储在输入中：

<input type="hidden" id='clicked-img-src'/>

$('body').on('click', 'img', function(){
     var img_source = $(this).attr('src');
     $('#clicked-img-src').val(img_source);
})

然后，loadImage()中调用的onload函数从输入中获取src：

function loadImage(){
    $('#photo_modal').attr('src', $('#clicked-img-src').val());
}

希望这有帮助。

获取一个bootrap模式的单击获取src值

5 个答案: