jQuery 替换 scr

Question

在我的站点中，我将 bootstrap3 和 bootsnipp 用于灯箱 http://bootsnipp.com/snippets/featured/bootstrap-lightbox

我的代码：

        <td>
            <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
                <div id="full-size-image" >
                    <img src="{{ $result->get_cover('thumbs')}}" style="height: 50px;" alt="{{ $result->type->name }}">
                </div>
            </a>
        </td>

<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
    <div class="modal-content">
        <div class="modal-body">
            <img src="" alt="" />
        </div>
    </div>
</div>

图片link显示为：mysite.com/spare/thumbs/zzxx.jpg

我想在 /originals/ 上替换 /thumbs/ 仅在灯箱 windows。我使用：

$(document).ready(function() {
var $lightbox = $('#lightbox');

$('[data-target="#lightbox"]').on('click', function(event) {

    $('#full-size-image img').attr('src', function(i, src) {
        return src.replace('thumbs','originals');
    });

    var $img = $(this).find('img'),
        src = $img.attr('src'),
        alt = $img.attr('alt'),
        css = {
            'maxWidth': $(window).width() - 100,
            'maxHeight': $(window).height() - 100
        };

    $lightbox.find('.close').addClass('hidden');
    $lightbox.find('img').attr('src', src);
    $lightbox.find('img').attr('alt', alt);
    $lightbox.find('img').css(css);});

$lightbox.on('shown.bs.modal', function (e) {
    var $img = $lightbox.find('img');
    $lightbox.find('.modal-dialog').css({'width': $img.width()});
    $lightbox.find('.close').removeClass('hidden');
});

});

但是在我的方法中，像这样，links在整个页面中被替换。

 $('#full-size-image img').attr('src', function(i, src) {
        return src.replace('thumbs','originals');
    });

Answer 1

你试过这样定义吗:

var src = $('#full-size-image img').attr('src');
var new_src = src.replace('thumbs','originals');
$('#full-size-image img').attr('src',new_src);

Answer 2

谢谢，Wahyu Kodar。

我的方法：

$(document).ready(function() {
var $lightbox = $('#lightbox');

$('[data-target="#lightbox"]').on('click', function(event) {

    var src = $('#small-size-image img').attr('src');
    var new_src = src.replace('thumbs','originals');
    $('#full-size-image img').attr('src',new_src);

    var $img = $(this).find('img'),
        alt = $img.attr('alt'),
        css = {
            'maxWidth': $(window).width() - 100,
            'maxHeight': $(window).height() - 100
        };

    $lightbox.find('.close').addClass('hidden');
    $lightbox.find('img').attr('src', new_src);
    $lightbox.find('img').attr('alt', alt);
    $lightbox.find('img').css(css);

    });

$lightbox.on('shown.bs.modal', function (e) {
    var $img = $lightbox.find('img');
    $lightbox.find('.modal-dialog').css({'width': $img.width()});
    $lightbox.find('.close').removeClass('hidden');
});
});

和

<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
    <div id="full-size-image" class="modal-body">
        <img src="" alt="" />
    </div>
</div>

从#small-size-image 获取源代码并on.click 粘贴到#full-size-image new_src

Answer 3

您还可以这样做：

$('#full-size-image img').prop('src', function (i, src) {
  return src.replace('thumbs', 'original');
});

Answer 4

我正在删除灯箱的 bootsnip 并给 http://ashleydw.github.io/lightbox/

a href= as original img
src = as thumb image

jQuery 替换 scr

jQuery replace scr

jquery

replace