滚动灯箱画廊答案

【问题标题】：scrolling lightbox gallery滚动灯箱画廊
【发布时间】：2018-05-23 14:00:41
【问题描述】：

我有一个滚动的画廊looks like this，我需要添加一个选项，点击其中一张图片时，点击的图片将覆盖屏幕的 100% 高度和宽度，滚动条仍会出现在下方图片以移动到下一张或上一张图片，这些图片的大小也将是屏幕的 100%。

这是第一个示例中的画廊：

$('.imageWrapper img').click(function() {
  $('.scrolls img').css({
   'width': '100%',
   'height': '100%'

 });

   $('.footerclass').css({
   'display': 'none'

 });
 });

.wrapper {
margin: auto;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
 }
 
.scrolls { 
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
} 

.scrolls img { 
width: 275px;
cursor: pointer;
display:inline-block;
display:inline;
margin-right: -5px;
vertical-align:top;
}

.imageWrapper {
display: inline-block;
position: relative;
margin-bottom: 120px;
}
    
.imageWrapper img {
display: block;
}

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

<body>
<div class="wrapper" id="column">
  <div class="scrolls">
    <div class="imageWrapper">
      <img src="images/01.jpg" />
      <a href="" class="cornerLink">Link</a>
    </div>
    <div class="imageWrapper">
      <img src="images/01.jpg" />
      <a href="" class="cornerLink">Link</a>
    </div>
    <div class="imageWrapper">       
      <img src="images/01.jpg" />
      <a href="" class="cornerLink">Link</a>
    </div>
    <div class="imageWrapper">
      <img src="images/01.jpg" />
      <a href="" class="cornerLink">Link</a>
    </div>
    <div class="imageWrapper">
      <img src="images/01.jpg" />
      <a href="" class="cornerLink">Link</a>
    </div>
    <div class="imageWrapper">
      <img src="images/01.jpg" />
      <a href="" class="cornerLink">Link</a>
    </div>
      <?php include 'footer.php';?>
  </div>
</div>
</body>

我尝试添加一个 JS，它会在单击一张图片时将所有图片的大小更改为 100% 的高度和宽度。您可以在 sn-p 中看到这一点。

我的问题是如何以 100% 显示用户点击的特定图片，并且仍然可以选择滚动到上一张或下一张图片。

【问题讨论】：

您说您希望图像覆盖 100% 的高度和 100% 的宽度。您希望它拉伸还是丢失部分图像？
我想让它伸展

标签： javascript jquery css

【解决方案1】：

如果您想显示用户点击的特定图片，那么我建议使用$(this).css() 选择器而不是$(.scrolls img).css() 来更准确地指向您希望 100% 渲染的图片。

【讨论】：

好的，这应该会有所帮助，但是我如何设置所有其他图片也将 100% 显示，以便用户能够滚动到其他图片？
我不确定。使用像 lightgallery.js 这样的库来为您处理该选项可能更容易？
我需要点击图片后滚动选项可用