muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added product images

Browse source
This commit is contained in:
JSriwongsa 2023-07-01 16:29:24 -05:00
parent c035304c72
commit 74d72e26d0
3 changed files with 138 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
ecommerce/fashion_website/pages/page.css
View file

@ -183,9 +183,10 @@ nav.menu .sub-menu li{
}
/*---------- header ----------*/
.dotgrid .wrapper{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
display: var(--display,grid);
--grid-col:175px;
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-col),100%), 1fr));
gap: var(--gutter, 30px);
}
.dotgrid .dot-image{
position: relative;
@ -499,6 +500,29 @@ form.search :where(i:last-child){
overflow: hidden;
text-overflow: ellipsis;
}
/*----- product -----*/
.product .wrapper{
--grid-col:331px
}
.product .main-image img{
width: 100%;
}
.product .outer-thumb{
display: none;
}
.product .outer-thumb .item{
height: fit-content !important;
cursor: pointer;
}
.product .thumb-wrap{
position: relative;
width: 70px;
height: 90px;
}
.product .custom-pagination{
position: relative;
height: 40px;
}
@ -507,14 +531,33 @@ form.search :where(i:last-child){
@media(min-width:481px){
.product.wrapper{
--gutter:60px;
}
.product.dotgrid .image{
position: relative;
max-width: 500px;
width: 100%;
margin: 0 auto;
height: min-content;
overflow: hidden;
}
.product .outer-main{
width: calc(100% -85px);
height: 100%;
margin: 0 0 0 85px;
}
.product .outer-thumb{
display: block;
position: absolute;
top: 0;
left: 0;
}
.custom-pagination{
display: none;
}
}

72
ecommerce/fashion_website/pages/page.html
View file

@ -8,6 +8,7 @@
<link rel="stylesheet" href="page.css">
<link rel="shortcut icon" href="images/icon.png">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
</head>
<body>
<div id="page" class="page-single">
@ -182,18 +183,6 @@
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="breadcrumb list-inline">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Tops</a></li>
<li><span>Castleton Green Halterneck Top</span></li>
</ul>
</div>
</div>
</div>
<div id="search-float" class="search-float">
<div class="container wide">
<form action="" class="search">
@ -204,9 +193,65 @@
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="breadcrumb list-inline">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Tops</a></li>
<li><span>Castleton Green Halterneck Top</span></li>
</ul>
</div>
</div>
</div>
</header>
<main>
<div class="section">
<div class="container">
<div class="wrap">
<div class="product dotgrid">
<div class="wrapper">
<div class="image">
<div class="outer-main">
<div class="main-image swiper">
<div class="wrap swiper-wrapper">
<div class="item swiper-slide"><img src="images/top1.jpg" alt=""></div>
<div class="item swiper-slide"><img src="images/top1-1.jpg" alt=""></div>
<div class="item swiper-slide"><img src="images/top1-2.jpg" alt=""></div>
<div class="item swiper-slide"><img src="images/top1-3.jpg" alt=""></div>
</div>
</div>
<div class="custom-pagination">
<div class="swiper-pagination"></div>
</div>
</div>
<div class="outer-thumb ob-cover">
<div class="thumbnail-image swiper" >
<div class="wrap swiper-wrapper">
<div class="item swiper-slide">
<div class="thumb-wrap"><img src="images/top1.jpg" alt=""></div>
</div>
<div class="item swiper-slide">
<div class="thumb-wrap"><img src="images/top1-1.jpg" alt=""></div>
</div>
<div class="item swiper-slide">
<div class="thumb-wrap"><img src="images/top1-2.jpg" alt=""></div>
</div>
<div class="item swiper-slide">
<div class="thumb-wrap"><img src="images/top1-3.jpg" alt=""></div>
</div>
</div>
</div>
</div>
</div>
<div class="summary"></div>
</div>
</div>
<div class="product detail"></div>
</div>
</div>
</div>
</main>
<footer></footer>
</div>
@ -259,6 +304,7 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script src="page.js"></script>
</body>
</html>

26
ecommerce/fashion_website/pages/page.js
View file

@ -1,3 +1,4 @@
//navbar
const openBtn = document.querySelectorAll('[trigger-button]');
const closeBtn = document.querySelectorAll('[close-button]');
const overlay = document.querySelector('[data-overlay]');
@ -17,8 +18,7 @@ for (let x = 0; x < openBtn.length; x++){
targetEl.querySelector('[close-button]').addEventListener('click',openData);
overlay.addEventListener('click', openData);
}
//submenu
const subMenu = document.querySelectorAll('.child-trigger');
subMenu.forEach((menu) => menu.addEventListener('click', function(e){
e.preventDefault();
@ -28,3 +28,25 @@ const subMenu = document.querySelectorAll('.child-trigger');
this.closest('.has-child').classList.toggle('active');
}
}))
//swiper product
const thumbImage = new Swiper('.thumbnail-image', {
//loop: true,
direction:'vertical',
spaceBetween: 25,
slidePerView: 1,
freeMode: true,
watchSlideProgress: true,
});
const mainImage = new Swiper('.main-image', {
loop: true,
autoHeight: true,
pagination:{
el: '.swiper-pagination',
clickable:true,
},
thumbs:{
swiper: thumbImage,
},
});