预览图像时需要字幕

Question

 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- When click on image --> <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <img src="" class="imagepreview" style="width: 100%;"> <figcaption class="img-title"> </figcaption> </div> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="panel panel-default" style="margin-top: 7px;"> <div class="photo-gallary-head panel-heading "> <h4 title="Photo Gallery" class="photo-gallary-head-name"> <a href="#" title="Photo Gallery">Photo Gallery</a> </h4> </div> <div class="panel-body"> <div class="img-t humbnail"> <div class="carousel slide" id="myCarousel1" data-ride="carousel"> <!-- Carousel items --> <div class="carousel-inner"> <!--/item--> <div class="item active"> <div class="row"> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-1.jpg"> <figcaption class="img-title">A caption for the above image.</figcaption></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-2.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-3.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-4.jpg"></a> </div> </div> </div> <div class="item "> <div class="row"> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-5.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-6.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-7.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-8.jpg"></a> </div> </div> </div> <div class="item "> <div class="row"> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-9.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-10.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-11.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-12.jpg"></a> </div> </div> </div> <!--/item--> <div class="item "> <div class="row"> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-13.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-14.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-15.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-16.jpg"></a> </div> </div> </div> <div class="item "> <div class="row"> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-17.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-18.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-19.jpg"></a> </div> <div class="col-xs-3"> <a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-20.jpg"></a> </div> </div> </div> <!--/item--> </div> </div> <div id="carouselButtons" style="text-align:center; margin-top:20px"> <a class="left1 carousel-control1" href="#myCarousel1 " data-slide="prev" title="Previous"><i class="fa fa-angle-left"></i></a> <button id="pauseButton" type="button" class="btn btn-default btn-md" title="Play"> <i class="fa fa-play-circle" style="font-size:20px"></i> </button> <button id="playButton" type="button" class="btn btn-default btn-md" title="Pause"> <i class="fa fa-pause-circle" style="font-size:20px"></i> </button> <a class="right1 carousel-control1" href="#myCarousel1" data-slide="next" title="next"><i class="fa fa-angle-right"></i></a> </div> </div> </div> </div> </div> 

我已经在模型弹出窗口的帮助下完成了预览图像，但是单击图像时需要显示相同的图像标题。 在此代码中，这是带有图像预览的缩略图滑块。 这里有些丢失的文件，无法正常工作。 我不想按标题显示，但按标题显示。 这是缩略图滑块。

Answer 1

您可以尝试将title或alt标签设置为图像，我认为它将自动作为标题。

或者你能给我你的滑块jQuery URL