Javascript memperbesar gambar layar penuh

Ukuran file. 6. Total 52 MBViews. 16614 Pembaruan Terakhir. 12/05/2018 00. 13. 00 UTC Tanggal Publikasi. 05/01/2016 05. 32. 41 Situs Resmi UTC. Pergi ke situs web Lisensi. MIT

Unduh Demo

Lainnya dalam kategori ini

Lihat Plugin yang Direkomendasikan

TOP 100 Plugin jQuery 2022

Chrome, IE9+, FireFox, Opera, Safari#perbesar gambar#panel gambar

panci. js adalah plugin jQuery yang digunakan untuk menggeser dan memperbesar/memperkecil gambar besar dalam antarmuka layar penuh dengan gerakan kursor dan interaksi roda mouse

Bagaimana cara menggunakannya

1. Tambahkan referensi ke pustaka jQuery dan panci jQuery. file plugin js

<link href="jquery.pan.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery.pan.js"></script>

2. Sisipkan gambar ke halaman web Anda dan tambahkan tautan yang mengarah ke gambar besar menggunakan atribut data-big

<a class="pan" data-big="large.jpg" href="">
  <img src="small.jpg">
</a>

3. Panggil plugin pada dokumen siap dan selesai

$(".pan").pan();

Changelog

05-12-2018

• Memperbaiki beberapa masalah dengan gulir mouse di versi lama 1. x versi jQuery. Kode yang lebih jelas

02-06-2018

• Masalah acara Firefox diperbaiki

31-05-2018

• Perbaikan gulir jendela

Plugin jQuery yang luar biasa ini dikembangkan oleh saplumbaga. Untuk Penggunaan Lanjutan lainnya, silakan periksa halaman demo atau kunjungi situs web resmi

Klik gambar untuk membuka layar penuh. Ini adalah cara cepat untuk menampilkan gambar beresolusi tinggi yang menakjubkan di situs web Anda

Untuk mengaktifkan layar penuh langsung, setel parameter hanya layar penuh ke true. Sebagai contoh

<div class="Sirv" data-effect="zoom" data-options="fullscreen-only:true">
  <img alt="watch" data-src="https://i0.wp.com/sirv.sirv.com/website/demos/apple-watch-01.jpg" />
</div>

Sirv Zoom dapat diterapkan pada satu gambar atau sekumpulan gambar, dengan kemampuan untuk beralih di antara gambar tersebut dalam tampilan layar penuh

Sirv secara otomatis menghasilkan gambar mini dan menghasilkan gambar agar sesuai dengan lokasi penempatannya

Zoom gambar itu dan thumbnail-nya disisipkan menggunakan kode ini

<div class="Sirv" data-effect="zoom" data-options="fullscreen-only:true">
  <img alt="watch" data-src="https://sirv.sirv.com/website/demos/apple-watch-01.jpg" />
  <img alt="watch" data-src="https://sirv.sirv.com/website/demos/apple-watch-02.png" />
  <img alt="watch" data-src="https://sirv.sirv.com/website/demos/apple-watch-03.png" />
  <img alt="watch" data-src="https://sirv.sirv.com/website/demos/apple-watch-04.jpg" />
</div>

Salin dan tempel

Anda dapat menyalin dan menempelkan kode untuk pembesaran gambar Anda. Cukup unggah gambar Anda ke akun Sirv Anda, lalu klik tombol Sematkan untuk mendapatkan kode penyematan zoom. Gunakan di akun Anda jika Anda memerlukan bantuan

Geser dan perbesar

Pan dan zoom telah menjadi perilaku alami saat berinteraksi dengan gambar beresolusi tinggi. Pengguna secara naluriah mengklik, mengklik dua kali, atau menggulir roda mouse untuk memperbesar gambar. Semua interaksi ini didukung oleh fitur pan dan zoom layar penuh Sirv

Bahkan gambar beresolusi tinggi dimuat dengan cepat berkat cara Sirv memproses dan menyajikan gambar. Tidak perlu mengecilkan gambar Anda, seperti yang telah Anda lakukan di masa lalu. Bahkan, Anda disarankan untuk mengunggah gambar beresolusi tertinggi untuk memastikan zoom sebaik mungkin. Berapa pun ukurannya, gambar akan dimuat dengan cepat agar pengguna dapat menggeser dan memperbesarnya dalam layar penuh

Dipopulerkan oleh Google Maps, teknik pan and zoom yang digunakan oleh Sirv adalah satu-satunya cara untuk menampilkan gambar secara cepat dengan detail halus melalui koneksi internet kecepatan apa pun

Seluler dioptimalkan

Sirv dioptimalkan untuk menggunakan gerakan sentuh untuk memperbesar dan menggeser gambar di ponsel dan tablet

Ketuk sekali dan ketuk dua kali perbesar gambar segera ke layar penuh. Tombol X yang terlalu besar memungkinkan penutupan layar penuh dengan mudah

Sertakan jQuery dan plugin pada halaman dan inisialisasi plugin. Lihat demo yang berfungsi di https. //jmalarcon. github. io/jquery. pan/ atau periksa halaman index.html dari repositori ini

Bekerja dengan semua versi jQuery, dari 1. x ke yang terbaru

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="jquery.pan.js"></script>  <script type="text/javascript">     $(function(){         $(".pan").pan();     }) </script>

Jika ada atribut data-big dalam elemen, maka URL tersebut akan digunakan untuk gambar yang diperbesar. Jika tidak ada, maka itu harus berupa elemen <img> dan atribut src akan digunakan untuk memperbesar gambar, karena banyak gambar dibatasi ukurannya agar sesuai dengan penampungnya (misalnya dengan properti max-width). Lihat file sampel index.html_ di repo

<a class="pan" data-big="img/big1.jpg" href=""><img src="img/small1.jpg" alt="" /></a> <img class="pan" style="max-width:150px;" src="img/big2.jpg" alt="" />

Itu hanya menambahkan kemampuan zoom ke gambar yang lebih kecil dari ukuran aslinya. Metode pan()_ menyaring pilihan jQuery dan mengembalikan pilihan jQuery dengan elemen terakhir yang telah diproses untuk memiliki kemampuan zoom & pan. Anda dapat memprosesnya lebih lanjut seperti biasa dengan jQuery, misalnya

Bagaimana cara memperbesar JavaScript gambar?

Bagaimana cara memperbesar gambar di klik menggunakan JavaScript?

Bagaimana cara menambahkan efek zoom di JavaScript?

Bagaimana cara memperkecil gambar di CSS?