Wednesday, 23 July 2025
Image Zoom In Blogger Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Image Zoom</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
max-width: 1200px;
width: 100%;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
margin-top: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
font-size: 2.8rem;
}
.subtitle {
color: #7f8c8d;
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.zoom-container {
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: center;
margin-top: 20px;
}
.img-container {
flex: 1;
min-width: 300px;
max-width: 500px;
}
.img-zoom-container {
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
cursor: zoom-in;
background: #f8f9fa;
}
.img-zoom-container img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.img-zoom-lens {
position: absolute;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
width: 100px;
height: 100px;
background: rgba(52, 152, 219, 0.2);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
pointer-events: none;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.2s ease;
z-index: 10;
}
.result-container {
flex: 1;
min-width: 300px;
max-width: 500px;
display: flex;
flex-direction: column;
}
.img-zoom-result {
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
height: 400px;
background-color: #f8f9fa;
background-size: 200% 200%;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.3s ease;
}
.instructions {
background: #e3f2fd;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
border-left: 4px solid #2196f3;
}
.instructions h3 {
color: #2c3e50;
margin-bottom: 10px;
}
.instructions ul {
padding-left: 20px;
}
.instructions li {
margin-bottom: 8px;
line-height: 1.5;
}
.features {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
}
.feature-card {
flex: 1;
min-width: 250px;
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.feature-card h3 {
color: #2980b9;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.feature-card h3 i {
font-size: 1.5rem;
}
.feature-card p {
color: #7f8c8d;
line-height: 1.6;
}
.mobile-warning {
display: none;
background: #fff8e1;
color: #ff9800;
padding: 15px;
border-radius: 8px;
margin-top: 20px;
border-left: 4px solid #ff9800;
text-align: center;
}
@media (max-width: 768px) {
.zoom-container {
flex-direction: column;
}
.mobile-warning {
display: block;
}
}
@media (max-width: 480px) {
.container {
padding: 15px;
}
h1 {
font-size: 2.2rem;
}
}
</style>
</head>
<body>
<header>
<h1>Enhanced Image Zoom</h1>
<p class="subtitle">Hover over the image to see the enhanced zoom functionality with lens effect and smooth transitions</p>
</header>
<div class="container">
<div class="zoom-container">
<div class="img-container">
<div class="img-zoom-container" id="imageid">
<img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"
alt="Delicious Food"
width="600">
</div>
</div>
<div class="result-container">
<div class="img-zoom-result" id="result"></div>
<div class="instructions">
<h3>How to Use</h3>
<ul>
<li>Move your cursor over the image to see the zoom lens</li>
<li>The lens follows your cursor position</li>
<li>Zoomed result appears in the preview area</li>
<li>On touch devices, tap and drag to zoom</li>
<li>Move cursor away to hide the lens</li>
</ul>
</div>
</div>
</div>
<div class="mobile-warning">
<strong>Note:</strong> On mobile devices, touch and drag to use the zoom feature.
</div>
<div class="features">
<div class="feature-card">
<h3><i>🔍</i> High Precision Zoom</h3>
<p>Experience detailed image examination with our enhanced zoom algorithm that maintains image clarity.</p>
</div>
<div class="feature-card">
<h3><i>📱</i> Touch Support</h3>
<p>Fully responsive design with touch support for seamless use on mobile devices and tablets.</p>
</div>
<div class="feature-card">
<h3><i>🎨</i> Visual Feedback</h3>
<p>Elegant lens design with smooth transitions for an enhanced user experience.</p>
</div>
</div>
</div>
<script>
function imageZoom(wrapperID, resultID) {
const wrapper = document.getElementById(wrapperID);
const img = wrapper.querySelector("img");
const result = document.getElementById(resultID);
// Create lens
const lens = document.createElement("div");
lens.className = "img-zoom-lens";
wrapper.appendChild(lens);
// Wait for image to load
img.onload = function() {
// Get displayed image dimensions
const imgWidth = img.offsetWidth;
const imgHeight = img.offsetHeight;
// Set lens size based on image dimensions
const lensSize = Math.min(imgWidth, imgHeight) * 0.3;
lens.style.width = `${lensSize}px`;
lens.style.height = `${lensSize}px`;
// Calculate zoom ratios
const cx = result.offsetWidth / lensSize;
const cy = result.offsetHeight / lensSize;
// Set result background
result.style.backgroundImage = `url('${img.src}')`;
result.style.backgroundSize = `${imgWidth * cx}px ${imgHeight * cy}px`;
// Move lens function
function moveLens(e) {
// Show lens and result
lens.style.opacity = "1";
result.style.opacity = "1";
const pos = getCursorPos(e);
const lensSize = parseInt(lens.style.width);
// Calculate lens position
let x = pos.x - lensSize / 2;
let y = pos.y - lensSize / 2;
// Keep lens inside image
x = Math.max(0, Math.min(x, imgWidth - lensSize));
y = Math.max(0, Math.min(y, imgHeight - lensSize));
// Apply lens position
lens.style.left = x + "px";
lens.style.top = y + "px";
// Apply background position for zoom effect
result.style.backgroundPosition = `-${x * cx}px -${y * cy}px`;
}
// Get cursor position relative to image
function getCursorPos(e) {
const rect = img.getBoundingClientRect();
let x, y;
// Handle both mouse and touch events
if (e.type.includes('touch')) {
const touch = e.touches[0];
x = touch.clientX - rect.left;
y = touch.clientY - rect.top;
} else {
x = e.clientX - rect.left;
y = e.clientY - rect.top;
}
return { x, y };
}
// Hide lens when cursor leaves image
function hideLens() {
lens.style.opacity = "0";
result.style.opacity = "0";
}
// Add event listeners
wrapper.addEventListener("mousemove", moveLens);
wrapper.addEventListener("mouseenter", () => {
lens.style.opacity = "1";
result.style.opacity = "1";
});
wrapper.addEventListener("mouseleave", hideLens);
// Touch event listeners
wrapper.addEventListener("touchstart", moveLens);
wrapper.addEventListener("touchmove", moveLens);
wrapper.addEventListener("touchend", hideLens);
};
// Trigger onload in case image is cached
if (img.complete) img.onload();
}
// Initialize zoom after page loads
window.addEventListener('DOMContentLoaded', () => {
imageZoom("imageid", "result");
});
</script>
</body>
</html>
0 comments:
Post a Comment