jQuery替代scr

Question

在我的站点中，我使用bootstrap3和bootsnipp作为lightbox 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>

​

图像链接显示为：mysite.com/spare/thumbs/zzxx.jpg

我只想在lightbox 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');
});

})；

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

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

Answer 1

谢谢，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>

​

将src从#小尺寸图像和on.click粘贴到#全尺寸图像new_src。

Answer 2

你有没有尝试过这样定义：

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

Answer 3

你也可以：

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