Как просмотреть изображение по клику в представлении галереи с помощью HTML, CSS и JavaScript?
В этой статье мы увидим, как легко мы можем создать галерею изображений с функцией предварительного просмотра, используя HTML, CSS и немного JavaScript.
HTML:
• Создайте div с классом container.
• Создайте еще два div внутри первого div, один для основного вида, а другой для бокового вида с классами main_view и side_view.
• Внутри основного вида вставьте один тег изображения с идентификатором main.
• Внутри бокового вида вставьте все остальные изображения галереи с изменением функции и передайте src изображения функции.
CSS:
• Задайте ширину и поля для container.
• Задайте высоту и ширину для main_view.
• Установите размеры изображения в файле main_view.
• Установите side_view, чтобы отображать все изображения в правильных размерах, используя flex.
JavaScript:
используя функцию change, мы просто заменим src main_view на источник изображения, по которому щелкнули.
Весь код.
<html>
<head>
<style type="text/css">
/* Настройка основных размеров для просмотра галереи */
.container {
margin: 0 auto;
width: 90%;
}
.main_view{
width: 80%;
height: 25rem;
}
.main_view img{
width: 100%;
height: 100%;
object-fit: cover;
}
.side_view{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.side_view img{
width: 9rem;
height: 7rem;
object-fit: cover;
cursor: pointer;
margin:0.5rem;
}
</style>
</head>
<body>
<!-- Контейнер для нашей галереи -->
<div class="container">
<!-- Главный вид нашей галереи -->
<div class="main_view">
<img src="images/mobile-on.webp" id="main" alt="IMAGE">
</div>
<!-- Все изображения с видом сбоку -->
<div class="side_view">
<img src="images/mobile-on.webp" onclick="change(this.src)">
<img src="images/nowtebook.webp" onclick="change(this.src)">
<img src="images/targareyan.png" onclick="change(this.src)">
</div>
</div>
<script type="text/javascript">
const change = src => {
document.querySelector("#main").src = src
}
</script>
</body>
</html>
