Skip to content

Commit

Permalink
New code!
Browse files Browse the repository at this point in the history
  • Loading branch information
NhatQuyenIT committed Dec 4, 2023
1 parent 4fd9677 commit cb4ece2
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 69 deletions.
40 changes: 38 additions & 2 deletions css/Mystyles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -756,10 +756,12 @@ html,
padding-bottom: 30px;
margin-bottom: 30px;
}
.detail_bottom label{

.detail_bottom label {
font-size: 24px;
font-weight: bold;
}

.detail_bottom .addtocart {
display: flex;
cursor: pointer;
Expand Down Expand Up @@ -795,4 +797,38 @@ html,
width: 100px;
height: 30px;
padding: 5px;
}
}

.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
}

.popup-image {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

/* Thay đổi kích thước của nút đóng */
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 50px;
/* Đổi kích thước thành 30px hoặc kích thước mong muốn */
cursor: pointer;
}

.close:hover {
background-color: orange;
color: red;
}
134 changes: 74 additions & 60 deletions details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
<link href="./bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./themes/css/font-awesome.min.css">
<!-- <link rel="stylesheet" type="text/css" href="themes/css/font-awesome.min2.css"> -->
<link rel="stylesheet" type="text/css" href="./themes/css/font-awesome.min3.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link href="./themes/css/bootstrappage.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="./themes/css/font-awesome.min.css">
<!-- <link rel="stylesheet" type="text/css" href="themes/css/font-awesome.min2.css"> -->
<link rel="stylesheet" type="text/css" href="./themes/css/font-awesome.min3.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link href="./themes/css/bootstrappage.css" rel="stylesheet" />
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/Mystyles.css">
Expand All @@ -28,11 +28,11 @@
<script src="./js/jquery-3.7.1.slim.js"></script>
<script src="./js/jquery-3.7.1.slim.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./themes/js/superfish.js"></script>
<script src="./themes/js/jquery.scrolltotop.js"></script>
<!-- global styles -->
<link href="./themes/css/flexslider.css" rel="stylesheet" />
<link href="./themes/css/main.css" rel="stylesheet" />
<!-- <script src="./themes/js/superfish.js"></script> -->
<!-- <script src="./themes/js/jquery.scrolltotop.js"></script> -->
<!-- global styles -->
<link href="./themes/css/flexslider.css" rel="stylesheet" />
<link href="./themes/css/main.css" rel="stylesheet" />

</head>

Expand Down Expand Up @@ -164,47 +164,55 @@ <h6 class="dropdown-item disabled">Danh mục</h6>
<!-- Content -->
<div class="container">
<div class="trai">
<img src="./img/Laptop/brand/MSI/638121568991277911_msi-gaming-gf63-thin-11-den-dd.jpg" alt="" class="bigsize">
<div>
<div class="khungImg">
<img src="./img/Laptop/brand/MSI/637639340540705429_msi-gaming-gf63-den-2.jpg" alt="">
</div>
<div class="khungImg">
<img src="./img/Laptop/brand/MSI/637639340538048946_msi-gaming-gf63-den-3.jpg" alt="">
</div>
<div class="khungImg">
<img src="./img/Laptop/brand/MSI/637639340539455202_msi-gaming-gf63-den-4.jpg" alt="">
</div>
<div class="khungImg">
<img src="./img/Laptop/brand/MSI/637639340536799316_msi-gaming-gf63-den-5.jpg" alt="">
</div>
<div>
<img src="./img/Laptop/brand/MSI/638121568991277911_msi-gaming-gf63-thin-11-den-dd.jpg" alt="" class="bigsize"
onclick="showPopup(this.src)">
</div>
<div>
<div class="khungImg">
<img src="./img/Laptop/brand/MSI/637639340540705429_msi-gaming-gf63-den-2.jpg" alt=""
onclick="showPopup(this.src)">
</div>
<div class="khungImg">
<img src="./img/Laptop/brand/MSI/637639340538048946_msi-gaming-gf63-den-3.jpg" alt=""
onclick="showPopup(this.src)">
</div>
<div class="khungImg">
<img src="./img/Laptop/brand/MSI/637639340539455202_msi-gaming-gf63-den-4.jpg" alt=""
onclick="showPopup(this.src)">
</div>
<div class="khungImg">
<img src="./img/Laptop/brand/MSI/637639340536799316_msi-gaming-gf63-den-5.jpg" alt=""
onclick="showPopup(this.src)">
</div>
</div>
</div>
<div class="phai">
<div class="detail">
<p class="h1 text-justify text-center">Chi tiết sản phẩm</p>
<div class="tieude">Laptop MSI Gaming GF63 Thin 11UC-1228VN i7-11800H</div>
<address class="info">
<strong>Nhà sãn xuất:</strong> <span>MSI</span><br>
<strong>Tình trạng:</strong> <span>Còn hàng</span><br>
<strong>Loại:</strong> <span>Gaming</span><br>
</address>
<div class="gia">20.490.000<sup><span style="text-decoration: underline;">đ</span></sup> </div>
</div>
<div class="detail_bottom">
<label for="quantity">Số lượng: </label>
<button class="quantitydown" onClick="quantitydown()">-</button>
<input type="number" name="soluong" id="quantity" value="1" min="1" max="10" step="1">
<button class="quantityup" onClick="quantityup()">+</button>
<button type="button" class="addtocart">
<i class="fa fa-shopping-basket" aria-hidden="true"></i><span style="padding-left: 10px">Thêm vào giỏ</span>
<div class="detail">
<p class="h1 text-justify text-center">Chi tiết sản phẩm</p>
<div class="tieude">Laptop MSI Gaming GF63 Thin 11UC-1228VN i7-11800H</div>
<address class="info">
<strong>Nhà sãn xuất:</strong> <span>MSI</span><br>
<strong>Tình trạng:</strong> <span>Còn hàng</span><br>
<strong>Loại:</strong> <span>Gaming</span><br>
</address>
<div class="gia">20.490.000<sup><span style="text-decoration: underline;">đ</span></sup> </div>
</div>
<div class="detail_bottom">
<!-- Sử dụng các hàm mới trong HTML -->
<label for="quantity">Số lượng: </label>
<button class="quantitydown" onclick="quantitydown()">-</button>
<input type="number" name="soluong" id="quantity" value="1" min="1" max="10" step="1">
<button class="quantityup" onclick="quantityup()">+</button>
<button type="button" class="addtocart">
<i class="fa fa-shopping-basket" aria-hidden="true"></i><span style="padding-left: 10px">Thêm vào giỏ</span>
</button>
<hr>
<hr>
<img src="./img/mua_tra_gop.png" alt="">
<img src="./img/mua_hang.png" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="container-fluid">
<div class="row">
Expand Down Expand Up @@ -327,24 +335,30 @@ <h2>ĐĂNG KÝ</h2>
<!-- Kết quả tìm kiếm sẽ được hiển thị ở đây -->
</ul>

<div id="imagePopup" class="popup">
<span class="close" onclick="closePopup()">&times;</span>
<div id="imageContainer"></div>
</div>

<!-- JavaScript -->
<script src="./js/MyJS.js"></script>
<script src="./themes/js/common.js"></script>
<script src="./themes/js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$('.flexslider').flexslider({
animation: "fade",
slideshowSpeed: 4000,
animationSpeed: 600,
controlNav: false,
directionNav: true,
controlsContainer: ".flex-container" // the container that holds the flexslider
});
});
});
</script>
<script src="./themes/js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$('.flexslider').flexslider({
animation: "fade",
slideshowSpeed: 4000,
animationSpeed: 600,
controlNav: false,
directionNav: true,
controlsContainer: ".flex-container" // the container that holds the flexslider
});
});
});
</script>

</body>

</html>
61 changes: 61 additions & 0 deletions js/MyJS.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,4 +260,65 @@ function quantityup() {
if (document.getElementById('quantity').value > 1) {
document.getElementById('quantity').value++;
}
}
// Hàm hiển thị cửa sổ popup với ảnh
function showPopup(src) {
var popup = document.getElementById('imagePopup');
var imageContainer = document.getElementById('imageContainer');
imageContainer.innerHTML = '<img src="' + src + '" alt="Popup Image" class="popup-image">';
popup.style.display = 'block';
}

// Hàm đóng cửa sổ popup
function closePopup() {
var popup = document.getElementById('imagePopup');
popup.style.display = 'none';
}
// Hàm hiển thị cửa sổ popup với ảnh
function showPopup(src) {
var popup = document.getElementById('imagePopup');
var imageContainer = document.getElementById('imageContainer');
imageContainer.innerHTML = '<img src="' + src + '" alt="Popup Image" class="popup-image">';
popup.style.display = 'block';
}

// Hàm đóng cửa sổ popup
function closePopup() {
var popup = document.getElementById('imagePopup');
popup.style.display = 'none';
}

// Hàm thêm sự kiện click cho tất cả ảnh trong class "trai"
function addClickEventToImages() {
var images = document.querySelectorAll('.trai img');
images.forEach(function (image) {
image.addEventListener('click', function () {
showPopup(image.src);
});
});
}

// Gọi hàm khi trang được tải
window.onload = function () {
addClickEventToImages();
};
// Thêm JavaScript cho tăng giảm số lượng
function quantityup() {
var quantityInput = document.getElementById('quantity');
var currentValue = parseInt(quantityInput.value);
var maxValue = parseInt(quantityInput.getAttribute('max'));

if (currentValue < maxValue) {
quantityInput.value = currentValue + 1;
}
}

function quantitydown() {
var quantityInput = document.getElementById('quantity');
var currentValue = parseInt(quantityInput.value);
var minValue = parseInt(quantityInput.getAttribute('min'));

if (currentValue > minValue) {
quantityInput.value = currentValue - 1;
}
}
14 changes: 7 additions & 7 deletions themes/js/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,13 @@ var adjustMenu = function() {
}

//Menu
$('#menu > ul').superfish({
delay: 100,
animation: {opacity:'show', height:'show'},
speed: 'fast',
arrowClass: false,
autoArrows: true
});
// $('#menu > ul').superfish({
// delay: 100,
// animation: {opacity:'show', height:'show'},
// speed: 'fast',
// arrowClass: false,
// autoArrows: true
// });

$(document).ready(function(){
$(":checkbox").change(function(){
Expand Down

0 comments on commit cb4ece2

Please sign in to comment.