javascript - Need caption when preview the image -
<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">×</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 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 image of model popup, need show same image caption when click on image. in code thumbnail slider image preview. here of missing file, not working. don't want show title show caption. thumbnail slider.
you can try set title or alt tag image, think take automatically caption.
or can give me slider jquery url
Comments
Post a Comment