0
画像Iは、モデルポップアップの助けを借りて、画像をプレビュー行っている
<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 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>をプレビューするとき、キャプションが必要ですが、同じ画像のキャプションを表示する必要がある場合は画像をクリックしてください。このコードでは、これは画像プレビュー付きのサムネイルスライダです。ここでは、欠落しているファイルの一部が動作していません。私はタイトルで表示するのではなく、キャプションで表示したい。これがサムネイルスライダーです。
[私は速く答えを得るために、私の質問に、「緊急」または他の類似のフレーズ追加することができますどのような状況下では？]をお読みください（// meta.stackoverflow .com/q/326569） - これはボランティアに対処する理想的な方法ではなく、おそらく回答を得ることに逆効果があるということです。これをあなたの質問に追加しないでください。 – halfer
ちょっとしたことがあったら、[ask]と[help]のページを読むことをお勧めします。あなたの投稿の数が広すぎたり、不明瞭で、意図的に重複したり、トピック以外の投稿がありました。あまりにも多くの閉鎖された質問やdownvoted質問が自動的な質問禁止につながるので、本当にここに投稿できるものを理解する価値があります。 – halfer