Question

我有一个滚动的图库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％的高度和宽度。你可以在代码片段中看到它。

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

Answer 1

如果您想要显示用户点击的特定图片，我建议您使用$(this).css()选择器而不是$(.scrolls img).css()更准确地指向您要渲染100％的图片。< / p>

滚动灯箱库

1 个答案: