0
我希望你不介意帮助我使用这段代码。 我使用的引导，我有这个网站：如何在照片打开后在照片上放置链接？
<div class="gallery">
<div class="container">
<div class="row">
<div class="col-xs-3 gallery-item">
<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
<img src="images/port1.jpg" class="img-responsive img-gallery" alt="Projekti i pare">
</a>
</div> <!-- /.col -->
<div class="col-xs-3 gallery-item">
<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
<img src="images/port2.jpg" class="img-responsive img-gallery" alt="Projekti i dyte">
</a>
</div> <!-- /.col -->
<div class="col-xs-3 gallery-item">
<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
<img src="images/port3.jpg" class="img-responsive img-gallery" alt="Projekti i trete">
</a>
</div> <!-- /.col -->
<div class="col-xs-3 gallery-item">
<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
<img src="images/port4.jpg" class="img-responsive img-gallery" alt="Projekti i katert">
</a>
</div> <!-- /.col -->
<div class="col-xs-3 gallery-item">
<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
<img src="images/port4.jpg" class="img-responsive img-gallery" alt="Projekti i peste">
</a>
</div> <!-- /.col -->
<div class="col-xs-3 gallery-item">
<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
<img src="images/port4.jpg" class="img-responsive img-gallery" alt="Projekti i gjashte">
</a>
</div> <!-- /.col -->
<div class="col-xs-3 gallery-item">
<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
<img src="images/port4.jpg" class="img-responsive img-gallery" alt="Projekti i shtate">
</a>
</div> <!-- /.col -->
</div> <!--/.row -->
</div> <!-- /.container -->
</div> <!-- /.gallery -->
<div class="modal fade" id="modalGallery" tabindex="-1" role="dialog" aria-labelledby="modalGalleryLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="modalGalleryLabel">Gallery</h4>
</div> <!-- /.modal-header -->
<div class="modal-body">
<div id="carouselGallery" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
</div> <!-- /.carousel-inner -->
</div> <!-- /.carousel -->
</div> <!-- /.modal-body -->
<div class="modal-footer">
<ul class="pagination">
</ul>
</div> <!-- /.modal-footer -->
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
这是我的CSS：
.gallery{
margin-top: 100px;
}
.gallery-item{
margin-bottom: 30px;
}
.modal-footer{
text-align: center;
}
.pagination{
margin: 0;
}
而且我Javacsript
$(document).ready(function(){
$('.link-gallery').click(function(){
var galleryId = $(this).attr('data-target');
var currentLinkIndex = $(this).index('a[data-target="'+ galleryId +'"]');
createGallery(galleryId, currentLinkIndex);
createPagination(galleryId, currentLinkIndex);
$(galleryId).on('hidden.bs.modal', function(){
destroyGallry(galleryId);
destroyPagination(galleryId);
});
$(galleryId +' .carousel').on('slid.bs.carousel', function(){
var currentSlide = $(galleryId +' .carousel .item.active');
var currentSlideIndex = currentSlide.index(galleryId +' .carousel .item');
setTitle(galleryId, currentSlideIndex);
setPagination(++currentSlideIndex, true);
})
});
function createGallery(galleryId, currentSlideIndex){
var galleryBox = $(galleryId + ' .carousel-inner');
$('a[data-target="'+ galleryId +'"]').each(function(){
var img = $(this).html();
var galleryItem = $('<div class="item">'+ img +'</div>');
galleryItem.appendTo(galleryBox);
});
galleryBox.children('.item').eq(currentSlideIndex).addClass('active');
setTitle(galleryId, currentSlideIndex);
}
function destroyGallry(galleryId){
$(galleryId + ' .carousel-inner').html("");
}
function createPagination(galleryId, currentSlideIndex){
var pagination = $(galleryId + ' .pagination');
var carouselId = $(galleryId).find('.carousel').attr('id');
var prevLink = $('<li><a href="#'+ carouselId +'" data-slide="prev">«</a></li>');
var nextLink = $('<li><a href="#'+ carouselId +'" data-slide="next">»</a></li>');
prevLink.appendTo(pagination);
nextLink.appendTo(pagination);
$('a[data-target="'+ galleryId +'"]').each(function(){
var linkIndex = $(this).index('a[data-target="'+ galleryId +'"]');
var paginationLink = $('<li><a data-target="#carouselGallery" data-slide-to="'+ linkIndex +'">'+ (linkIndex+1) +'</a></li>');
paginationLink.insertBefore('.pagination li:last-child');
});
setPagination(++currentSlideIndex);
}
function setPagination(currentSlideIndex, reset = false){
if (reset){
$('.pagination li').removeClass('active');
}
$('.pagination li').eq(currentSlideIndex).addClass('active');
}
function destroyPagination(galleryId){
$(galleryId + ' .pagination').html("");
}
function setTitle(galleryId, currentSlideIndex){
var imgAlt = $(galleryId + ' .item').eq(currentSlideIndex).find('img').attr('alt');
$('.modal-title').text(imgAlt);
}
});
我想补充的一个href链接照片，当照片变大时，我该怎么办？
请通过提供[MCVE]（http://stackoverflow.com/help/mcve） –
来简化您的问题请检查此链接：-http：//www.w3schools.com/html/html_images.asp –