Need caption when preview the image

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> 

I have done preview the image with the help of model popup, but need show same image caption when click on image. In this code this is the thumbnail slider with image preview. Here some of the missing file, it is not working. I don't want to show by title but show by caption. This is the thumbnail slider.

Answer 1

You can try to set title or alt tag into image, i think it will take automatically as caption.

Or can you give me your slider jquery url