CSS এবং জাভাস্ক্রিপ্ট দিয়ে ইমেজ জুম (Image Zoom) কীভাবে তৈরি করবেন?

মাউস হোভারে ইমেজ জুম ইফেক্ট (Magnifying Glass Style)

একটি ইমেজের ওপর মাউস হোভার করলে একটি লেন্স (lens) দেখায় এবং ডান পাশে/নিচে বড় আকারে জুম করা ভিউ দেখায়। এটি ই-কমার্স প্রোডাক্ট ইমেজ, ম্যাপ, ডায়াগ্রামের জন্য আদর্শ।

পূর্ণ কোড উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ইমেজ জুম উদাহরণ</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; max-width: 900px; margin: 0 auto; }
    
    .zoom-container {
      position: relative;
      display: inline-block;
      max-width: 100%;
    }
    
    .zoom-image {
      display: block;
      max-width: 100%;
      height: auto;
      cursor: crosshair;
    }
    
    /* জুম লেন্স (মাউসের সাথে ঘুরে) */
    .zoom-lens {
      position: absolute;
      border: 2px solid #d4d4d4;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      pointer-events: none; /* মাউস ইভেন্ট ইমেজে পাস করতে */
      display: none;
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.1); /* বাইরের অংশ ডিম */
      z-index: 10;
    }
    
    /* জুম রেজাল্ট কন্টেইনার */
    .zoom-result {
      position: absolute;
      left: 110%; /* ইমেজের ডান পাশে */
      top: 0;
      width: 400px;
      height: 400px;
      border: 2px solid #d4d4d4;
      border-radius: 8px;
      background-repeat: no-repeat;
      background-size: cover;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      display: none;
      z-index: 9;
      overflow: hidden;
    }
    
    /* মোবাইলে রেসপন্সিভ: রেজাল্ট নিচে দেখান */
    @media (max-width: 768px) {
      .zoom-result {
        left: 0;
        top: 110%;
        width: 100%;
        height: 300px;
      }
    }
  </style>
</head>
<body>
  <h1>ইমেজ জুম উদাহরণ</h1>
  <p>নিচের ছবির ওপর মাউস নিন — ডান পাশে জুম করা ভিউ দেখবেন।</p>
  
  <div class="zoom-container" id="zoomContainer">
    <img 
      class="zoom-image" 
      id="zoomImage" 
      src="https://picsum.photos/id/1015/800/600.jpg" 
      alt="জুম করার জন্য ছবি"
      width="500"
      height="375"
    >
    <div class="zoom-lens" id="zoomLens"></div>
    <div class="zoom-result" id="zoomResult"></div>
  </div>
  
  <script>
    const container = document.getElementById('zoomContainer');
    const image = document.getElementById('zoomImage');
    const lens = document.getElementById('zoomLens');
    const result = document.getElementById('zoomResult');
    
    // কনফিগারেশন
    const LENS_SIZE = 100; // লেন্সের আকার (পিক্সেল)
    const RESULT_SIZE = 400; // রেজাল্ট কন্টেইনার আকার
    
    // রেজাল্টে ব্যাকগ্রাউন্ড ইমেজ সেট
    result.style.backgroundImage = `url('${image.src}')`;
    
    // স্কেল ফ্যাক্টর: রেজাল্ট কতগুন বড় হবে
    const scaleX = RESULT_SIZE / LENS_SIZE;
    const scaleY = RESULT_SIZE / LENS_SIZE;
    result.style.backgroundSize = `${image.width * scaleX}px ${image.height * scaleY}px`;
    
    // মাউস মভ ম্যান্ডেল
    function moveLens(e) {
      e.preventDefault();
      
      // মাউস পজিশন ইমেজের রিলেটিভ
      const rect = image.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      // লেন্স পজিশন (সেন্টার করুন)
      let lensX = x - LENS_SIZE / 2;
      let lensY = y - LENS_SIZE / 2;
      
      // বাউন্ডারি চেক
      if (lensX < 0) lensX = 0;
      if (lensY < 0) lensY = 0;
      if (lensX > image.width - LENS_SIZE) lensX = image.width - LENS_SIZE;
      if (lensY > image.height - LENS_SIZE) lensY = image.height - LENS_SIZE;
      
      // লেন্স মুভ
      lens.style.left = lensX + 'px';
      lens.style.top = lensY + 'px';
      lens.style.display = 'block';
      
      // রেজাল্ট ব্যাকগ্রাউন্ড পজিশন আপডেট
      result.style.backgroundPosition = `-${lensX * scaleX}px -${lensY * scaleY}px`;
      result.style.display = 'block';
    }
    
    // ইভেন্ট লিসেনার
    container.addEventListener('mousemove', moveLens);
    container.addEventListener('mouseenter', () => {
      lens.style.display = 'block';
      result.style.display = 'block';
    });
    container.addEventListener('mouseleave', () => {
      lens.style.display = 'none';
      result.style.display = 'none';
    });
    
    // টাচ সাপোর্ট (মোবাইল)
    container.addEventListener('touchmove', (e) => {
      if (e.touches.length === 1) {
        moveLens(e.touches[0]);
      }
    }, { passive: false });
    container.addEventListener('touchstart', () => {
      lens.style.display = 'block';
      result.style.display = 'block';
    }, { passive: true });
    container.addEventListener('touchend', () => {
      lens.style.display = 'none';
      result.style.display = 'none';
    });
    
    // রিসাইজ হ্যান্ডলিং
    window.addEventListener('resize', () => {
      // রেজাল্ট পজিশন রিক্যালকুলেট (মোবাইলে top/bottom স্যুইচ)
      if (window.innerWidth <= 768) {
        result.style.left = '0';
        result.style.top = '110%';
      } else {
        result.style.left = '110%';
        result.style.top = '0';
      }
    });
  </script>
</body>
</html>

কীভাবে কাজ করে

1. কন্টেইনার (`.zoom-container`): `position: relative` — সব চাইল্ডের রেফারেন্স পয়েন্ট।
2. লেন্স (`.zoom-lens`): `position: absolute`, `pointer-events: none` — মাউসের সাথে ঘুরে, ইমেজের ওপর বৃত্তাকার এলাকা হাইলাইট করে।
3. রেজাল্ট (`.zoom-result`): `background-image` হিসেবে মূল ইমেজ সেট, `background-size` বড় করে জুম ইফেক্ট। `backgroundPosition` লেন্সের পজিশন অনুযায়ী আপডেট।
4. স্কেল ক্যালকুলেশন: `scale = resultSize / lensSize` — লেন্স ১ পিক্সেল মুভ করলে রেজাল্টে `scale` পিক্সেল শিফট।

উন্নত ফিচার (অপশনাল)

• ক্লিক টগল: মোবাইলে ক্লিক করলে লেন্স লক করা।
• জুম लेভেল কন্ট্রোল: স্ক্রোল হইলে জুম ইন/আউট।
• গ্যালারি সাপোর্ট: থাম্বনেইল ক্লিক করলে মূল ইমেজ পরিবর্তন।
• লেজি লোডিং: হাই-রেজ ইমেজ শুধু জুমের সময় লোড।

সামान्य সমস্যা ও সমাধান

লাইব্রেরি বিকল্প

জটিল প্রজেক্টে রেডি-মেড লাইব্রেরি ব্যবহার করুন: Zoom.js, Medium Zoom, Drift, SimpleLightbox।