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> 

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

我想替换/thumbs/ on /原件/只能在灯箱窗口。 我用：

$(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> 

得到＃小尺寸图像和on.click粘贴到＃全尺寸图像new_src

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'); 
}); 

Answer 4

我是灯箱删除bootsnip并给予http://ashleydw.github.io/lightbox/

a href= as original img 
src = as thumb image