Dalam tutorial Membuat Gambar Zoom Dengan Vanilla JavaScript, kita akan membuat pustaka JavaScript sederhana untuk menambahkan efek zoom hover ke gambar. Kami akan membuat seluruh pustaka dari awal tanpa bergantung pada jQuery atau dependensi eksternal lainnya. Ayo masuk!

Membuat Galeri Gambar Zoom - Vanilla JavaScript
Source : engineering.fb.com

Anda dapat melihat efek ini di banyak situs belanja, termasuk situs yang sangat populer seperti eBay dan Amazon. Biasanya terdiri dari sekumpulan foto kecil yang dapat diperbesar dan diperiksa lebih detail menggunakan kaca pembesar melayang.

Source : tutorialzine.com

Untuk membuat tutorial yang sederhana, kami tidak akan menambahkan terlalu banyak fitur ke perpustakaan. Ini hanya akan berisi file JavaScript, dan file CSS opsional untuk mendesain galeri gaya di atas dengan cepat.

Sebelum kita mulai membangun perpustakaan, mari kita lihat bagaimana kita ingin orang menggunakannya. Membuat keputusan desain terlebih dahulu akan mempermudah pengembangan perpustakaan yang sebenarnya nantinya.

Karena kita membuat plugin galeri, orang yang menggunakannya akan membutuhkan beberapa boilerplate HTML. Tag akan berisi gambarnya, div kosong untuk efek zoom, dan beberapa kelas yang telah ditentukan untuk membuat perpustakaan berfungsi.

<div id="my-gallery" class="vanilla-zoom">
    <div class="sidebar">
        <img src="images/image-1.jpg" class="small-preview">
        <img src="images/image-2.jpg" class="small-preview">
        <img src="images/image-3.jpg" class="small-preview">
    </div>
    <div class="zoomed-image"></div>
</div>

Orang dapat dengan bebas mengubah tata letak ini dan menambahkan gambar sebanyak yang diperlukan. Namun, penting bahwa setiap gambar memiliki .small-preview class, dan ada div kosong.zoomed-image class.

Pustaka tersebut sebagian besar akan didorong oleh JavaScript, tetapi beberapa gaya CSS penting juga perlu disetel. Pengguna dapat memasukkan file CSS kami langsung di HTML.

<link rel=“stylesheet” href=“vanilla-zoom/vanilla-zoom.css”>

Sekarang tag dan gaya telah disetel, yang tersisa hanyalah menyertakan perpustakaan dan menginisialisasinya.

<script src="vanilla-zoom/vanilla-zoom.js"></script>
<script>
    vanillaZoom.init('#my-gallery');
</script>

File .js yang berisi pustaka membuat objek vanillaZoom tersedia secara global. Objek ini hanya memiliki satu metode untuk menginisialisasi plugin. Ini hanya memiliki satu parameter-ID galeri kami. Dengan cara ini, kita dapat menginisialisasi beberapa galeri independen dalam satu halaman.

Developing the Library

Saat membuat pustaka JavaScript front-end, kita perlu memastikan bahwa kita mendaftarkan API mereka dengan benar. Ada banyak cara untuk melakukan ini, yang paling sederhana adalah metode Jordan Checkman. Kami menyarankan Anda membaca postingan blognya secara lengkap, tetapi intinya adalah:

(function(window) {
  function define_library() {
    // Create the library object and all its properties and methods.
    var vanillaZoom = {};
    vanillaZoom.init = function(galleryId) {
      // Our library's logic goes here.
    }
    return vanillaZoom;
  }

  // Add the vanillaZoom object to global scope if its not already defined.
  if(typeof(vanillaZoom) === 'undefined') {
    window.vanillaZoom = define_library();
  }
  else{
    console.log("Library already defined.");
  }
})(window);

Kode di atas dibungkus dalam fungsi yang dapat dijalankan sendiri. Dengan cara ini, saat kita menambahkan file vanilla-zoom.js ke proyek kita, perpustakaan akan secara otomatis didaftarkan, dan objek vanillaZoom dan semua metodenya akan tersedia kepada pengguna.

Perpustakaan kami hanya memiliki satu metode- vanillaZoom.init (galleryId) . Tugasnya adalah memilih elemen DOM galeri dan kemudian menambahkan event listener padanya.

Pertama, kami memeriksa apakah elemen yang sesuai telah ditambahkan ke HTML dan memilihnya. Kami tidak dapat menggunakan jQuery, jadi kami harus mengandalkan metode JavaScript asli untuk menangani DOM.

var container = document.querySelector(el);

if(!container) {
    console.error('Please specify the correct class of your gallery.');
    return;
}

var firstSmallImage = container.querySelector('.smalls-preview');
var zoomedImage = container.querySelector('.zoom-image');

if(!zoomedImage) {
    console.error('Please add a .zoomed-image element to your gallery.');
    return;
}

if(!firstSmallImage) {
    console.error('Please add images with the .small-preview class to your gallery.');
    return;
}
else {
    // Set the source of the zoomed image.
    zoomedImage.style.backgroundImage = 'url('+ firstSmallImage.src +')';
}

Pada baris terakhir kode di atas, kita mendapatkan sumber gambar dari gambar pratinjau dan menyetelnya sebagai latar belakang elemen yang dapat diperbesar. akan terjadi segera saat vanillaZoom.init (galleryId) dipanggil.

Baca Juga : Pengertian Pemrograman Ruby on Rails

Ketika salah satu pratinjau diklik, kami akan melakukan operasi yang sama. Ini memungkinkan pengguna untuk memilih gambar yang ingin mereka perbesar.

container.addEventListener("click", function (event) {
  var elem = event.target;

  if (elem.classList.contains("small-preview")) {
      zoomedImage.style.backgroundImage = 'url('+ elem.src +')';
  }
});

Elemen kaca pembesar memiliki beberapa pendengar acara tambahan. Saat kursor memasuki elemen, yang pertama diaktifkan, memperbesar ukuran gambar latar belakang, sehingga menciptakan efek zoom.

zoomedImage.addEventListener('mouseenter', function(e) {
    this.style.backgroundSize = "250%"; 
}, false);

Karena gambar sekarang sangat besar, tidak bisa masuk ke dalam wadah, hanya sebagian saja yang bisa dilihat. Kami ingin pengguna dapat memilih bagian mana dari gambar yang akan diperbesar, jadi kami menambahkan pendengar gerakan mouse untuk mengubah posisi latar belakang.

zoomedImage.addEventListener('mousemove', function(e) {

  // getBoundingClientReact gives us various information about the position of the element.
  var dimentions = this.getBoundingClientRect();

  // Calculate the position of the cursor inside the element (in pixels).
  var x = e.clientX - dimentions.left;
  var y = e.clientY - dimentions.top;

  // Calculate the position of the cursor as a percentage of the total size of the element.
  var xpercent = Math.round(100 / (dimentions.width / x));
  var ypercent = Math.round(100 / (dimentions.height / y));

  // Update the background position of the image.
  this.style.backgroundPosition = xpercent+'% ' + ypercent+'%';

}, false);

Saat kursor meninggalkan gambar yang diperbesar, kami ingin gambar kembali normal. Ini bisa dengan mudah dicapai dengan mengembalikan ukuran latar belakang ke cover dan posisi latar belakang ke center.

zoomedImage.addEventListener('mouseleave', function(e) {
    this.style.backgroundSize = "cover"; 
    this.style.backgroundPosition = "center"; 
}, false);

Pada titik ini, kita selesai!

Browser Support

Pustaka harus tersedia di semua browser desktop modern, meskipun beberapa CSS flexbox mungkin tidak ditampilkan dengan benar di IE lama.

Sayangnya, efek zoom tidak diterjemahkan dengan baik ke dalam desain sentuh. Oleh karena itu, ruang layar terbatas, jadi yang terbaik adalah menampilkan gambar di perangkat seluler dengan cara lain. Di CSS kami, kami hanya menyembunyikan elemen zoom dan mencantumkan gambar secara vertikal, tetapi Anda dapat mencoba solusi lain, seperti carousel.

Conclusion

Anda bisa mendapatkan kode sumber dan kode demo lengkap untuk artikel ini dari tombol “unduh” di dekat bagian atas halaman (gambar disediakan oleh Burst). Anda bebas menggunakan perpustakaan di semua proyek komersial atau pribadi (lisensi kami). Selamat membuat kode!