照片打开后如何在照片上放置链接？

Question

我希望你不介意帮我这个代码。  我正在使用bootstrap，我有这个HTML：

   <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链接。我该怎么办？

Answer 1

在分配<a href=""></a>时，只需添加galleryItem。

像：

var galleryItem = $('<div class="item"><a href="your-link">'+ img +'</a></div>');

要为每个<a>添加不同的链接，请在链接中使用额外的属性“数据链接”，

<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery" data-link="your-link-1">

在JS中，创建一个变量并通过.attr()函数＆amp;获取该链接。将其添加到您的链接中，例如

// Get the link from data attribute 'data-link'
var imgLink = $(this).attr('data-link');

// Append the link into the 'galleryItem'
var galleryItem = $('<div class="item"><a href="' + imgLink + '">'+ img +'</a></div>');

请看下面的代码段：

$(document).ready(function(){
			     $('.link-gallery').click(function(){
			    var galleryId = $(this).attr('data-target');
			    var currentLinkIndex = $(this).index('a[data-target="'+ galleryId +'"]');
			    var imgLink = $(this).attr('data-link');

			    createGallery(galleryId, currentLinkIndex, imgLink);
			    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, imgLink){
			    var galleryBox = $(galleryId + ' .carousel-inner');

			    $('a[data-target="'+ galleryId +'"]').each(function(){
			        var img = $(this).html();
			        var galleryItem = $('<div class="item"><a href="' + imgLink + '">'+ img +'</a></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);
			}
			      });

.gallery{
margin-top: 100px;
     }
  .gallery-item{
   margin-bottom: 30px;
     }
    .modal-footer{
     text-align: center;
   }
    .pagination{
    margin: 0;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<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" data-link="your-link-1">
                    <img src="http://placehold.it/200x200" 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" data-link="your-link-2">
                    <img src="http://placehold.it/200x200" 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" data-link="your-link-3">
                    <img src="http://placehold.it/200x200" 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" data-link="your-link-4">
                    <img src="http://placehold.it/200x200" 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" data-link="your-link-5">
                    <img src="http://placehold.it/200x200" 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" data-link="your-link-6">
                    <img src="http://placehold.it/200x200" 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" data-link="your-link-7">
                    <img src="http://placehold.it/200x200" 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 -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

希望这有帮助！

Answer 2

请在javascript中替换一行

var galleryItem = $('<div class="item"><a href="http://google.com">'+ img +'</a></div>');

希望你能得到。

是的，如果你想要更换 http://google.com，如你所愿，可以另外一个。