<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Online Shop with Image Viewer</title>
<style>
body {
font-family: Arial, sans-serif;
/* HEADER */
.header {
background: #333;
color: white;
padding: 15px;
text-align: center;
/* PRODUCT SECTION */
.product-container {
display: flex;
padding: 20px;
gap: 20px;
.product-item {
flex: 1;
border: 1px solid #ddd;
border-radius: 10px;
padding: 15px;
text-align: center;
/* Image wrapper to position Next button */
.image-wrapper {
position: relative;
margin-bottom: 10px;
.product-image {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px;
/* Next button on top-right of image */
.next-btn {
position: absolute;
right: 8px;
bottom: 8px;
padding: 5px 10px;
font-size: 12px;
border: none;
border-radius: 4px;
background: rgba(0, 0, 0, 0.7);
color: white;
cursor: pointer;
.product-item [Link]-btn {
margin-top: 10px;
padding: 8px 16px;
border: none;
background: #ff4d4f;
color: white;
border-radius: 4px;
cursor: pointer;
</style>
</head>
<body>
<!-- HEADER -->
<div class="header">
<h1>My Online Shop</h1>
<p>Online Store – Product View with Multiple Images</p>
</div>
<!-- PRODUCT LIST -->
<div class="product-container">
<!-- PRODUCT 1 -->
<div class="product-item">
<div class="image-wrapper">
<!--
data-images: list of image URLs separated by comma
danh sách nhiều ảnh, phân tách bằng dấu phẩy
-->
<img class="product-image"
src="[Link]"
alt="Product 1"
data-images="[Link], [Link], [Link]"
data-index="0">
<button class="next-btn" onclick="nextImage(this)">Next ▶</button>
</div>
<h3>Sport Shoes</h3>
<p>$45.00</p>
<button class="buy-btn">Buy Now</button>
</div>
<!-- PRODUCT 2 -->
<div class="product-item">
<div class="image-wrapper">
<img class="product-image"
src="[Link]"
alt="Product 2"
data-images="[Link], [Link]"
data-index="0">
<button class="next-btn" onclick="nextImage(this)">Next ▶</button>
</div>
<h3>Smart Watch</h3>
<p>$80.00</p>
<button class="buy-btn">Buy Now</button>
</div>
<!-- PRODUCT 3 -->
<div class="product-item">
<div class="image-wrapper">
<img class="product-image"
src="[Link]"
alt="Product 3"
data-images="[Link], [Link], [Link], [Link]"
data-index="0">
<button class="next-btn" onclick="nextImage(this)">Next ▶</button>
</div>
<h3>Backpack</h3>
<p>$35.00</p>
<button class="buy-btn">Buy Now</button>
</div>
</div>
<script>
// 🇻🇳 Hàm đổi ảnh khi nhấn nút Next
// 🇬🇧 Function to change image when Next button is clicked
function nextImage(button) {
// Tìm thẻ img trong cùng product-item
const img = [Link]('.product-image');
// Lấy danh sách ảnh từ thuộc tính data-images
const images = [Link](',');
// Lấy index hiện tại (mặc định 0 nếu chưa có)
let currentIndex = parseInt([Link]) || 0;
// Tăng index, nếu vượt quá thì quay về 0
currentIndex = (currentIndex + 1) % [Link];
// Cập nhật ảnh và lưu lại index mới
[Link] = images[currentIndex].trim();
[Link] = currentIndex;
</script>
</body>
</html>
///////////////////////////////////////
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Online Shop with Expandable Description</title>
<style>
body {
font-family: Arial, sans-serif;
.header {
background: #333;
color: white;
padding: 15px;
text-align: center;
.product-container {
display: flex;
padding: 20px;
gap: 20px;
.product-item {
flex: 1;
border: 1px solid #ddd;
border-radius: 10px;
padding: 15px;
text-align: center;
.product-item img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px;
.buy-btn {
margin-top: 10px;
padding: 8px 16px;
border: none;
background: #ff4d4f;
color: white;
border-radius: 4px;
cursor: pointer;
.more-btn {
margin-top: 5px;
background: none;
border: none;
color: #007bff;
cursor: pointer;
font-size: 14px;
.hidden {
display: none;
</style>
</head>
<body>
<div class="header">
<h1>My Online Shop</h1>
</div>
<div class="product-container">
<!-- PRODUCT 1 -->
<div class="product-item">
<img src="[Link]" alt="Product 1">
<h3>Sport Shoes</h3>
<p>$45.00</p>
<!-- SHORT DESCRIPTION -->
<p class="short-desc">
Comfortable running shoes with breathable fabric.
</p>
<!-- FULL DESCRIPTION (HIDDEN) -->
<p class="full-desc hidden">
These sport shoes are designed for maximum comfort with high-quality breathable mesh,
durable sole, and shock absorption technology. Perfect for running, walking,
and everyday use.
</p>
<button class="more-btn" onclick="toggleDesc(this)">Xem thêm / See more</button>
<button class="buy-btn">Buy Now</button>
</div>
<!-- PRODUCT 2 -->
<div class="product-item">
<img src="[Link]" alt="Product 2">
<h3>Smart Watch</h3>
<p>$80.00</p>
<p class="short-desc">
Smart fitness tracking with heart rate and sleep monitor.
</p>
<p class="full-desc hidden">
This smartwatch supports full-day fitness tracking, heart rate monitoring, sleep analysis,
Bluetooth connectivity, multiple sports modes, and long-lasting battery life up to 10 days.
</p>
<button class="more-btn" onclick="toggleDesc(this)">Xem thêm / See more</button>
<button class="buy-btn">Buy Now</button>
</div>
<!-- PRODUCT 3 -->
<div class="product-item">
<img src="[Link]" alt="Product 3">
<h3>Backpack</h3>
<p>$35.00</p>
<p class="short-desc">
Lightweight backpack suitable for school or travel.
</p>
<p class="full-desc hidden">
This backpack features water-resistant fabric, padded straps, multiple compartments
for laptops, books, and accessories. Ideal for students, travelers, and daily use.
</p>
<button class="more-btn" onclick="toggleDesc(this)">Xem thêm / See more</button>
<button class="buy-btn">Buy Now</button>
</div>
</div>
<script>
// 🇻🇳 Hàm mở rộng / thu gọn mô tả
// 🇬🇧 Function to show / hide product full description
function toggleDesc(button) {
const product = [Link];
const shortDesc = [Link](".short-desc");
const fullDesc = [Link](".full-desc");
// Toggle descriptions
if ([Link]("hidden")) {
[Link]("hidden");
[Link]("hidden");
[Link] = "Thu gọn / Show less";
} else {
[Link]("hidden");
[Link]("hidden");
[Link] = "Xem thêm / See more";
</script>
</body>
</html>