在灯箱中打开不同的图像

Question

我在Bootstrap中有一个图像灯箱，我想要实现的是当用户点击图像时，弹出的图像会不同。

所以我会有拇指图标，当用户点击其中的一个时，将显示完整的图像。因此，代码是这样的：

<a href="full_Image_url" ..> <img src="thumb_img_url" ...></a> 

我尝试过编辑<a href="#" ..>与其他图像的位置，但它没有工作..

var $lightbox = $('#lightbox'); 
 

 
$('[data-target="#lightbox"]').on('click', function(event) { 
 
    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'); 
 
});

body { 
 
    padding: 30px 0px; 
 
} 
 

 
#lightbox .modal-content { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
#lightbox .close { 
 
    opacity: 1; 
 
    color: rgb(255, 255, 255); 
 
    background-color: rgb(25, 25, 25); 
 
    padding: 5px 8px; 
 
    border-radius: 30px; 
 
    border: 2px solid rgb(255, 255, 255); 
 
    position: absolute; 
 
    top: -15px; 
 
    right: -55px; 
 
    z-index: 1032; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="col-xs-6 col-sm-3"> 
 
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
 
     <img src="https://s3.amazonaws.com/ooomf-com-files/lqCNpAk3SCm0bdyd5aA0_IMG_4060_1%20copy.jpg" alt="..."> 
 
    </a> 
 
    </div> 
 

 
    <div class="col-xs-6 col-sm-3"> 
 
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
 
     <img src="https://s3.amazonaws.com/ooomf-com-files/Z3LXxzFMRe65FC3Dmhnp_woody_unsplash_DSC0129.jpg" alt="..."> 
 
    </a> 
 
    </div> 
 
</div> 
 

 
<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> 
 
</div>

Answer 1

你有点击事件<a data-target="#lightbox'>。你可以找到它的父div，然后找到它的下一个兄弟div和图像。最后一个div可以是第一个兄弟姐妹。是这样的：

var $lightbox = $('#lightbox'); 
 

 
$('[data-target="#lightbox"]').on('click', function(event) { 
 
    var imageDiv = $(this).parent().is(':last-child') ? $(this).parent().siblings().first() : $(this).parent().next(); 
 
    var $img = $(imageDiv).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.on('shown.bs.modal', function(e) { 
 
    var $img = $lightbox.find('img'); 
 

 
    $lightbox.find('.modal-dialog').css({ 
 
    'width': $img.width() 
 
    }); 
 
    $lightbox.find('.close').removeClass('hidden'); 
 
});

body { 
 
    padding: 30px 0px; 
 
} 
 

 
#lightbox .modal-content { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
#lightbox .close { 
 
    opacity: 1; 
 
    color: rgb(255, 255, 255); 
 
    background-color: rgb(25, 25, 25); 
 
    padding: 5px 8px; 
 
    border-radius: 30px; 
 
    border: 2px solid rgb(255, 255, 255); 
 
    position: absolute; 
 
    top: -15px; 
 
    right: -55px; 
 
    z-index: 1032; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="col-xs-6 col-sm-3"> 
 
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
 
     <img src="https://s3.amazonaws.com/ooomf-com-files/lqCNpAk3SCm0bdyd5aA0_IMG_4060_1%20copy.jpg" alt="..."> 
 
    </a> 
 
    </div> 
 

 
    <div class="col-xs-6 col-sm-3"> 
 
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
 
     <img src="https://s3.amazonaws.com/ooomf-com-files/Z3LXxzFMRe65FC3Dmhnp_woody_unsplash_DSC0129.jpg" alt="..."> 
 
    </a> 
 
    </div> 
 
</div> 
 

 
<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> 
 
</div>