У меня есть прокрутка галереи, которая выглядит следующим образом , мне нужно добавить опцию, которая при нажатии на одну из картинок, щелкнувшая картинка покрывает 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%, и при этом иметь возможность прокручивать предыдущее или следующее изображение.