預覽圖像

預覽圖像

<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>

我已經做了與模型彈出的幫助預覽圖像時需要字幕，但需要表現出相同的圖像標題時，請點擊圖片。在這段代碼中，這是帶圖像預覽的縮略圖滑塊。這裏有一些缺失的文件，它不起作用。我不想按標題顯示，而是按標題顯示。這是縮略圖滑塊。

來源

2017-07-26 Aditi

請仔細閱讀[在什麼情況下我想補充「緊急」或其他類似的短語我的問題，爲了獲得更快的答案？]（// meta.stackoverflow .com/q/326569） - 總結是這不是解決志願者問題的理想方法，而且可能對獲得答案起反作用。請不要將這添加到您的問題。 – halfer

當你得到片刻時，我建議你閱讀[問]和[幫助]頁面。你的一些帖子太寬泛，不清楚，故意重複，或者不在話題中。確實有必要了解可以在這裏發佈的內容，因爲太多封閉或者低估的問題會導致自動禁止問題。 – halfer

您可以嘗試將title或alt標記設置爲圖像，我認爲它會自動作爲標題。

或者你可以給我你的滑塊jQuery的URL

來源

2017-07-26 10:30:57

回答

相關問題