Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

доделал

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent 36ea891f36
commit 9703ff5569
5 changed files with 141 additions and 121 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      assets/css/gp-style-core.css
  2. 15
      assets/css/gp-style-desktop.css
  3. 132
      assets/js/gp-main.js
  4. 110
      assets/js/gp-product.js
  5. 1
      product.html

2
assets/css/gp-style-core.css
Unescape View File

@ -446,7 +446,7 @@ button{
/* breadcrumbs */
.breadcrumbs{
margin: 24px;
margin: 96px 24px 24px;
display: flex;
align-items: center;

15
assets/css/gp-style-desktop.css
Unescape View File

@ -6,6 +6,13 @@
position: relative;
background-color: var(--background-white);
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 200;
}
.header::after{
content: '';
@ -78,6 +85,9 @@
width: 100%;
height: 100%;
}
.header__logo-white{
display: none;
}
.header__menu-block{
position: absolute;
@ -238,11 +248,14 @@
text-decoration: none;
}
.header.white{
background-color: thistle;
/* background-color: thistle; */
}
.header.white .header__logo-black{
display: none;
}
.header.white .header__logo-white{
display: block;
}
.header.white .main-menu__link{
color: var(--text-white);
}

132
assets/js/gp-main.js
Unescape View File

@ -152,118 +152,6 @@ checkbox.forEach(e => {
// checkbox
// slider gallery modal
const gallery = new Swiper('.gallery__slider', {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
});
let paginationButtons = document.querySelectorAll('.gallery-pagination__item');
paginationButtons.forEach(button => {
let index = button.dataset.countImg;
button.onclick = function () {
gallery.slideTo(index);
}
})
// open gallery
let detailImage= document.querySelectorAll('.detail__image');
detailImage.forEach(button => {
let index = button.dataset.countImg;
button.onclick = function () {
gallery.slideTo(index);
document.querySelector('.gallery').classList.add('active');
}
})
// close gallery
document.querySelector('.gallery__close').onclick = function () {
document.querySelector('.gallery').classList.remove('active');
}
// slider gallery modal
// slider gallery main phone
// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
const detailPhone = new Swiper('.detail__images-phone', {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
});
let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');
detailImagesPhones.forEach(button => {
button.onclick = function (e) {
let index = button.dataset.countImg;
gallery.slideTo(index);
document.querySelector('.gallery').classList.add('active');
}
})
// slider gallery main phone
// detail catalog
const detailCatalot = new Swiper('.detail__catalot', {
// Navigation arrows
navigation: {
nextEl: '.detail-catalot-control__button.next',
prevEl: '.detail-catalot-control__button.prev',
},
breakpoints: {
1600: {
slidesPerView: 4,
},
1200: {
slidesPerView: 3,
},
780: {
slidesPerView: 2.2,
},
100: {
slidesPerView: 1.3,
spaceBetween: 20
},
}
});
// detail catalog
// function
function modalOpen(buttonElement, contentElement){
let modal = document.querySelector('.modal'),
@ -416,11 +304,19 @@ window.addEventListener('resize', (e) => {
modalOpen('.button--filter', '.modal__filter');
modalOpen('.basket-open', '.modal__basket');
modalClose('.modal__close');
// media
// gallery
// if (!document.querySelector('.detail__images').classList.contains('swiper')) {
// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
// }
// gallery
});
// resize
// scroll
window.addEventListener("scroll", function (e) {
let header = document.querySelector('.header');
let scroll = window.scrollY;
if (scroll >= 75) {
header.classList.remove('white')
}else{
header.classList.add('white')
}
});
// scroll

110
assets/js/gp-product.js
Unescape View File

@ -0,0 +1,110 @@
'use strict';
// slider gallery modal
const gallery = new Swiper('.gallery__slider', {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
});
let paginationButtons = document.querySelectorAll('.gallery-pagination__item');
paginationButtons.forEach(button => {
let index = button.dataset.countImg;
button.onclick = function () {
gallery.slideTo(index);
}
})
// open gallery
let detailImage= document.querySelectorAll('.detail__image');
detailImage.forEach(button => {
let index = button.dataset.countImg;
button.onclick = function () {
gallery.slideTo(index);
document.querySelector('.gallery').classList.add('active');
}
})
// close gallery
document.querySelector('.gallery__close').onclick = function () {
document.querySelector('.gallery').classList.remove('active');
}
// slider gallery modal
// slider gallery main phone
// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
const detailPhone = new Swiper('.detail__images-phone', {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
});
let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');
detailImagesPhones.forEach(button => {
button.onclick = function (e) {
let index = button.dataset.countImg;
gallery.slideTo(index);
document.querySelector('.gallery').classList.add('active');
}
})
// slider gallery main phone
// detail catalog
const detailCatalot = new Swiper('.detail__catalot', {
// Navigation arrows
navigation: {
nextEl: '.detail-catalot-control__button.next',
prevEl: '.detail-catalot-control__button.prev',
},
breakpoints: {
1600: {
slidesPerView: 4,
},
1200: {
slidesPerView: 3,
},
780: {
slidesPerView: 2.2,
},
100: {
slidesPerView: 1.3,
spaceBetween: 20
},
}
});
// detail catalog

1
product.html
Unescape View File

@ -1056,6 +1056,7 @@
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="assets/js/gp-main.js"></script>
<script src="assets/js/gp-product.js"></script>
</body>
</html>
Write Preview
Loading…
Cancel
Save