在 HTML 页面上仅显示 1 张画廊图片

Posted 2023-03-05

【中文标题】在 HTML 页面上仅显示 1 张画廊图片

【英文标题】：Display only 1 picture of a gallery on a HTML page

【发布时间】：2019-05-13 05:00:43

【问题描述】：

我正在尝试在网站上显示一组图像，但是

-我只想先显示一张图片，点击那张图片后

-用户可以点击“左”或“右”箭头查看其他图片。

我正在使用 Light-box，现在我的代码完成方式使所有图片都显示在页面上，而不仅仅是一张

<div class="gallery">
         <a href="images/pic1.jpg" data-lightbox="mygallery"> <img   class="img-responsive"  src="images/pic1.jpg"> </a>
         <a href="images/pic2.jpg" data-lightbox="mygallery"><img src="images/pic2.jpg"  class="img-responsive" > </a>
         <a href="images/pic4.jpg" data-lightbox="mygallery"><img src="images/pic4.jpg"  class="img-responsive"></a>
         <a href="images/pic5.jpg" data-lightbox="mygallery"><img src="images/pic5.jpg"  class="img-responsive"></a>
         <a href="images/pic6.jpg" data-lightbox="mygallery"><img src="images/pic6.jpg"  class="img-responsive"></a>
         <a href="images/pic7.jpg" data-lightbox="mygallery"> <img src="images/pic7.jpg"  class="img-responsive"></a>
         <a href="images/pic8.jpg" data-lightbox="mygallery"><img src="images/pic8.jpg"  class="img-responsive"></a>

【参考方案1】：

最好使用支持 lightbox 的滑块。您也可以查看以下示例 -

// lightbox gallery
  var current = '.heathrow-images-for-lightbox ul li.current';
      


  // loading lightbox on thumbnail click
  $('.heathrow-images-for-lightbox ul li').on('click', 'a', function(event) 
    event.preventDefault();
    var bigImagehref = $(this).attr('href');

    $(this).parent().addClass('current');
    $('.heathrow-lightbox').fadeIn();
    $('.heathrow-lightbox').append('<img class="image-in-lightbox" src="' + bigImagehref + '" ></div>');

  );

  

  //closing the lighbox and reseting the current class
  $('.heathrow-lightbox').on('click', '.close', function() 
    $('.heathrow-lightbox').fadeOut();
    $('.heathrow-lightbox .image-in-lightbox').remove();
    $(current).removeClass('current');
  );


  //navigating through the gallery images in the lightbox


  $('.heathrow-lightbox a').on('click', function()         
    if ($(this).attr('class') == 'next') 
      if($(current).next().length)
        var bigImagehref = $(current).next().find('a').attr('href');
        $(current).next().addClass('current');
        $(current).prev().removeClass('current');
      
      else 
        $(".heathrow-images-for-lightbox li:last").removeClass('current');
        $(".heathrow-images-for-lightbox li:first").addClass('current');
        var bigImagehref = $(current).find('a').attr('href');
        
      
      
        
    
    else if ($(this).attr('class') == 'prev') 
      bigImagehref = $(current).prev().find('a').attr('href');
    
   

    $('.heathrow-lightbox .image-in-lightbox').remove();
    $('.heathrow-lightbox').append('<img class="image-in-lightbox" src="' + bigImagehref + '" ></div>');
  );

.heathrow-lightbox 
  background: rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
  height: 100%;
  top: 0;   
  width: 100%;
  z-index: 9999;


.heathrow-lightbox .image-in-lightbox 
  max-width: 700px;
  max-height: 700px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 999;


.heathrow-images-for-lightbox 



.heathrow-images-for-lightbox ul 
  padding: 0;
  margin: 0;


.heathrow-images-for-lightbox ul li 
  transition: all 300ms; 
  float: left;
  display: block;
  position: relative;
  width:  25%;


.heathrow-images-for-lightbox ul li a img 
  width: 100%;
  height: auto;




.close, 
.next, 
.prev 
  transition: all 300ms;
  color: red;
  font-size: 30px;
  text-decoration: none;
  position: absolute;
  z-index: 9999;


.close 
  position: absolute;
  right: 20px;
  top: 20px;


.next, 
.prev 
  color: #aaa;
  top: 50%;


.next 
  right: 20px;


.prev  
  left: 20px;


.close:hover, 
.next:hover, 
.prev:hover 
  color: #fff;


ul 
  list-style: none;
   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="heathrow-images-for-lightbox">
<ul>
       <li>
        <a href="https://uat.onewarwickpark.co.uk/media/1079/one-warwick-park-deluxe-room.jpg">
          <img src="https://uat.onewarwickpark.co.uk/media/1079/one-warwick-park-deluxe-room.jpg"  />
         </a>
      </li>
  
         <li>
        <a href="https://uat.onewarwickpark.co.uk/media/1077/one-warwick-park-guest-lounge.jpg">
          <img src="https://uat.onewarwickpark.co.uk/media/1077/one-warwick-park-guest-lounge.jpg"  />
         </a>
      </li>
  
         <li>
        <a href="https://uat.onewarwickpark.co.uk/media/1075/one-warwick-park-atrium.jpg">
          <img src="https://uat.onewarwickpark.co.uk/media/1075/one-warwick-park-atrium.jpg"  />
         </a>
      </li>
  
         <li>
        <a href="https://uat.onewarwickpark.co.uk/media/1078/one-warwick-park-reception.jpg">
          <img src="https://uat.onewarwickpark.co.uk/media/1078/one-warwick-park-reception.jpg"  />
         </a>
      </li>


  </ul>
  </div>

  <div class="heathrow-lightbox">
    <a href="javascript:void(0)" class="close">close<i class="fa fa-close"></i></a>
    <a href="javascript:void(0)" class="prev">prev<i class="fa fa-chevron-left"></i></a>
    <a href="javascript:void(0)" class="next">next<i class="fa fa-chevron-right"></i></a>
  </div>

【讨论】：

是的。这将解决我认为的解决方案。谢谢@free_soul

谢谢，我试试看结果告诉你

【参考方案2】：

我有你的问题，我使用 owlcarousel

OwlCarousel

你可以轻松地做你想做的，或者你也可以使用

Bootstrap4 Carousel

这是给你的建议。