抓取特定图像时点击图片放大图像

Question

JSFIDDLE DEMO

HTML

<div class="col-4.col-xs-12 col-sm-6 col-md-3"> 
    <div class="ratio-14-16"> 
     <div class="productImg" style="background-image:url('http://paperbotz.files.wordpress.com/2010/11/hello_kitty001.png'); background-position: center center; background-repeat: no-repeat; background-size: cover;width:200px; height: 200px"> 
     </div> 
     <div class="info uppercase text-center"> 
     <span data-image>View Image</span> 
     </div> 
    </div> 
    <div class="details">Test 2</div> 
<div class="img-panel-view.cly-abs-center" style="background-size: cover; background-repeat: no-repeat; backgroung-position: center center"></div> 

JQuery的

$('[data-image]').on('click', function(e){ 
    e.preventDefault(); 
    var imgPartBg = $(this).closest().css('background-image'); 
    alert(imgPartBg); 

    $('.img-panel-view').css('background-image', 'url(' + bg + ')'); 
}); 

会有动态图像画廊，当点击其中一个，它应该抓取特定div中的特定背景图像以在叠加层上完整显示。他们将拥有完整的绝对路径。 Replace（）将不会被使用。

尝试使用最接近的（）或兄弟姐妹（'。productImg'）并返回undefined。 如何在点击特定图片时抓取背景图片？

更新

还有一个类似的问题。如何抓取细节？试图接近，分组，父母或兄弟姐妹，并没有抓住细节DIV

Answer 1

$('[data-image]').on('click', function(e){ 
    e.preventDefault(); 
    var imgPartBg = $(this).parent().prev('div.productImg').css('background-image'), 
     path = imgPartBg.replace('url(','').replace(')',''); 

    $('.img-panel-view').css('background-image', 'url(' + path + ')'); 
}); 

Answer 2

试试这个检索“背景图片” http://jsfiddle.net/76oshjrk/

HTML稍微更新的URL：

<span id="data-image">View Image</span>  <!-- added id tag --> 

JQuery的略作修改：

$('.productImg').on('click', function(e){ 
    e.preventDefault(); 
    var src = $(this).css('background-image');  //get "background-image" url 
    var myURL = src.slice(4,src.length-1);   //remove "url(" and ")" 
    $('#data-image').html("url: " +myURL);   //full url of "background-image" 

});