Situs web resmi Photoswipe.js: http://photoswipe.com/, file photoswipe dan contoh terkait dapat diunduh di situs web ini.
Komponen ini terutama digunakan untuk menampilkan gambar dan album, dan sangat praktis.
1. Menggunakan komponen ini membutuhkan dua file JS
1 <script type = "text/javascript" src = "Simple-Inheritance.min.js">
2 <script type = "text/javascript" src = "code-photoswipe-1.0.11.min.js"> <!-Versi terbaru saat ini harus 1.0.11->
2. maka struktur halaman bisa seperti ini
<div id="Gallery"> <div> <div><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" /></a></div> <div><a href="images/full/02.jpg"><img src="images/full/02.jpg" /></a></div> <div><a href = "gambar/penuh/04.jpg"> <img src = "gambar/full/04.jpg"> <img src = "gambar/full/04.jpg"> <img src = "gambar/thumb/04.jpg"/</a> </div> <Div> <Div> <a href = "gambar/gambar/04. src = "gambar/jempol/05.jpg"/> </a> </div> <div> <a href = "gambar/full/06.jpg"> <img src = "gambar/jempol/06.jpg"/> </a> </div> </div> </div>
Bahkan, selain struktur halaman, satu -satunya hal yang sangat berguna dalam kode HTML ini adalah ID = "Galeri" dan <a href = "jalur gambar"> </a> (akan dijelaskan nanti). Kelas lain hanya memainkan peran dalam mempercantik struktur halaman asli (berbeda dari halaman yang Anda benar -benar ingin memiliki efek, yaitu, Anda hanya perlu mengetik sesuai dengan struktur halaman di atas, dan efek halaman yang Anda inginkan diselesaikan oleh plugin JS itu sendiri, dan Anda tidak perlu menulis tata letak efek).
Halaman membutuhkan JS dan struktur halaman, dan berikut ini adalah menggunakan plug-in.
3. Anda dapat menggunakan dua cara untuk mendeklarasikan plug-in
1. Ini dilakukan dengan menambahkanEventListener () di browser default.
document.addeventListener ("domContentLoaded", function () {code.photoswipe ('a', '#galeri'); // Ini melibatkan id = "galeri" dan <a href = "..." PATURE> di halaman di atas, di mana ID = "galeri" adalah wontainer // </a picker = "PATURE INI, di mana ID =" Galeri "adalah wontainer // </a picker =" PATCH = "GALLERY" GALLY "adalah wontainer // </a picker =" menunjuk ke}, false);2. Cara menggunakan jQuery:
$ (dokumen) .ready (function () {$ ("#galeri a"). photoswipe ();});4. Dengan pengaturan ini, halaman Anda mungkin akan seperti ini.
Efek halaman di awal:
Setelah mengklik gambar apa pun, bentuk halaman menjadi sebagai berikut (halaman ini sebenarnya adalah halaman yang benar -benar saya inginkan):
Anda dapat dengan jelas melihat konten di alt di <img /> di atas halaman, dan akan ada empat tombol di bawah ini, mewakili: tutup halaman dan kembali ke penampilan asli (yaitu, gambar di atas), pemutaran otomatis, gambar halaman sebelumnya, dan gambar halaman berikutnya.
Efek dari album semacam itu muncul. Tentu saja, Anda dapat menggunakan mouse untuk menggesek kiri dan kanan pada halaman ini. Jika Anda berada di perangkat genggam, Anda juga dapat menggesek ke kiri dan kanan di jari Anda.
Plugin ini memiliki banyak properti:
AllowUserZoom: Memungkinkan pengguna untuk mengklik dua kali untuk melihat gambar dengan memperbesar/memindahkan. Nilai default = true
AutostartsLideshow: Ketika Photoswipe diaktifkan, tayangan slide akan diputar secara otomatis. Nilai default = false
IdlowRotationOnUserZoom: Hanya didukung oleh iOS - memungkinkan pengguna untuk memutar gambar dengan gerakan dalam mode Zoom/PAN. Default = false
BackButtonHideenabled: Tekan tombol return untuk menyembunyikan slide album. Ini terutama digunakan oleh Android dan BlackBerry. Mendukung BB6, Android V2.1, iOS 4 dan versi yang lebih baru. Nilai default = true
CAPTIONANDTOOLBARAUTOHIDEDELAY: Waktu tunda secara otomatis disembunyikan oleh judul bilah dan toolbar. Nilai default adalah = 5000 (MS). Jika diatur ke 0, itu tidak akan disembunyikan secara otomatis (ketuk/klik untuk beralih terlihat dan disembunyikan)
CAPTIONANDTOOLBARFLIPPOSISI: Toggle Posisi antara judul bilah dan toolbar (biarkan keterangan ditampilkan di bagian bawah dan toolbar ditampilkan di bagian atas). Nilai default = false
CAPTIONANDTOOLBARHID: Sembunyikan judul bar dan bilah alat. Nilai default = false
CAPTIONANDTOOLBAROPACITITY: Transparansi Bar Judul dan Toolbar (0-1). Nilai default = 0.8
CAPTIONANDTOOLBARSHOWEMPTYCAPTIONS: Menampilkan bilah judul bahkan jika judul gambar saat ini kosong. Nilai default = true
Cachemode: Mode cache, code.photoswipe.cache.mode.normal (default, normal) atau code.photoswipe.cache.mode.agrisive (radikal, aktif). Memutuskan bagaimana PhotoSwipe mengelola cache cache gambar.
Mode agresif akan secara aktif mengatur jenis gambar non-"saat ini, sebelumnya, berikutnya" yang kosong. Ini akan berguna untuk melimpah memori di browser iOS yang lebih tua. Dalam kebanyakan kasus, mode normal OK.
DoubleTapspeed: Interval maksimum untuk mengklik dua kali. Nilai default = 300 (ms)
Doubletapzoomlevel: Ketika pengguna mengklik dua kali, kelipatan pembesaran adalah level "zoom-in" default. Nilai default = 2.5
EnableDrag: Memungkinkan menyeret gambar sebelumnya/berikutnya ke antarmuka saat ini. Nilai default = true
EnableKeyboard: Izinkan operasi keyboard (switching panah kiri dan kiri, keluar ESC, masukkan pemutaran otomatis, tampilan bilah ruang/bilah/keluar judul tersembunyi). Default = true
Enablemousewheel: Memungkinkan operasi roda mouse. Default = true
Fadeinspeed: Kecepatan (durasi) dari elemen efek, milidetik. Default = 250
FadeOutspeed: Kecepatan (durasi) dari elemen efek, milidetik. Default = 250
Imagescalemethod: Metode penskalaan gambar (mode). Nilai Opsional: "Fit", "Fitnouscale" dan "Zoom". Mode "FIT" memastikan bahwa gambar beradaptasi dengan layar. "Fitnouscale" mirip dengan "Fit" tetapi tidak memperbesar gambar. "Zoom" akan menyaring gambar secara penuh, tetapi ada kemungkinan bahwa penskalaan gambar tidak sama sebanding. Default = "fit"
Invertmousewheel: Membalikkan roda mouse. Secara default, menggulir ke bawah mouse akan beralih ke gambar berikutnya dan hingga gambar sebelumnya. Default = false
JQueryMobile: Menunjukkan apakah Photoswipe diintegrasikan ke dalam proyek seluler JQuery. Secara default, PhotoSwipe akan mencoba dan menyelesaikannya untuk Anda
JQueryMobileDialogHash: Tag hash JQuery Mobile digunakan untuk halaman dan halaman dialog. Nilai default = "& ui-state = dialog"
Loop: Apakah album secara otomatis loop. Default = true
Margin: Interval antara dua gambar, unit ini adalah piksel. Default = 20
Maxuserzoom: Perbesaran maksimum. Default = 5.0 (diatur ke 0 akan diabaikan)
Minuserzoom: Pengurangan terkecil dari gambar. Default = 0,5 (diatur ke 0 akan diabaikan)
Mousewheelspeed: Sensitivitas dalam menanggapi roda tikus. Default = 500 (ms)
NextPreviousslidespeed: Berapa milidetik yang akan ditunda setelah mengklik tombol sebelumnya dan berikutnya. Default = 0 (sakelar sekarang)
Preventhide: Mencegah pengguna untuk menutup photoswipe. Ini juga akan menyembunyikan tombol "Tutup" tutup pada toolbar. Gunakan di halaman eksklusif (contohnya adalah contoh/08-eksklusif-mode.html dalam kode sumber). Default = false
PreventSlideshow: Blok Mode Pemutaran Otomatis. Ini juga akan menyembunyikan tombol Putar di toolbar. Default = false
SlideshowDelay: Berapa lama waktu yang dibutuhkan untuk memainkan gambar berikutnya dalam mode play otomatis? Default = 3000 (ms)
Slidespeed: Waktu gambar meluncur ke tampilan. Default = 250 (ms)
Swipethreshold: Berapa banyak piksel yang digunakan untuk menggeser jari untuk memicu peristiwa gerakan gesek. Default = 50
swipetimethreshold: Menentukan jumlah maksimum milidetik untuk memicu gerakan gesek. Jika terlalu lambat, itu tidak akan memicu slide, dan hanya akan menyeret posisi foto saat ini. Default = 250
SlidetimingFunction: Fungsi pelonggaran saat meluncur. Default = "kemudahan-keluar"
Zindex: Nilai Zindex Awal. Default = 1000
EnableUiWebViewRepositionTimeout: Periksa apakah orientasi perangkat telah berubah. Default = false
UIWebViewResetPositionDelay: Waktu untuk memeriksa apakah arah perangkat berubah secara teratur adalah 500 (MS)
PreventDefaultTouchEvents: Memblokir peristiwa sentuh default, seperti pengguliran halaman. Default = true
Target: Harus menjadi elemen DOM hukum (seperti Div). Defaultnya adalah Window (Halaman Lengkap). Jika itu adalah DOM tingkat rendah, itu akan ditampilkan di DOM dan mungkin bukan layar penuh.
Jika Anda tidak perlu menampilkan halaman pertama dan secara langsung menampilkan halaman kedua, Anda dapat mengaturnya seperti ini:
$ (dokumen) .ready (function () {// Mengatur photoswipe, pengaturan "preventhide: true" var thumbels = code.photoswipe ('a', '#gallery', {preventide: true}); code.photoswipe.current.show (0);});Tentu saja, plugin ini memiliki banyak fungsi mendengarkan lainnya:
document.addeventListener ('domContentLoaded', function () {// onBeforeshow memanggil metode ini sebelum galeri akan ditampilkan.code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforeshow, function (e), "{" {"{" {{e) {"{{e) {{e) {{e) {{e) {{e) {{e) {e) (e) (e) Onshow call code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onshow, function (e) {console.log ("onbeforeshow");}); Console.log ("Onshow");}); // Onbeforehide Sebelum galeri adalah kode tersembunyi. Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onhide, function (e) {console.log ('onhide');}); Console.log ('Onshownext');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.ondisplayImage, function (e) {console.log ('ondisplayImage');}); Code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.onresetposition, function (e) {console.log ('OnResetPosition');}, // orsur orisinal, dan pada saat ini, dan ada yang saya pahami, dan ada sesuatu yang saya pahami, dan ada sesuatu yang saya pahami (Metode ini mungkin terjadi (Metode ini, Metode ini, Metode ini, MOTODI ADALAH PERUSAHAAN, dan METODI ADALAH MUDATI, MOTOK INI BEBERAPA GALLY BAGAI ADALAH MUTICTICE BEWA GALLY BAGAI GALLY BAGAI GALERI NOLADESS. Galeri telah memulai slideshowcode.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowStart, function (e) {console.log ('onslideshowstart');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstop, function (e) {console.log ('onslideshowstop');}); Code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.onbeforecaptionandtoolbarshow, function (e) {console.log ('onbeforecaptionandtoolbarshow');}); Code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.onbeforecaptionandtoolbarhide, function (e) {console.log ('onbeforecaptionandtoolbarhide');}); OnBeforeCaptionandToolBarShow atau OnBeforeCaptionandToolBarhide biasanya akan memicu OnBeforeCaptionandToolBarhide atau OnBeforeCaptionandToolBarhide Code.photoswipe.current.addeventlistener (code.photoswipe.eventpes.current, code. console.log ('onViewportClick');});}, false);Karena metode panggilan antarmuka API tidak ditemukan di situs web resmi Photoswipe, dan tingkat JS saat ini tidak terlalu baik, beberapa antarmuka API pada dasarnya tidak dipahami dengan baik. Namun, ketika saya memeriksa contohnya, saya menemukan bahwa variabel sering muncul, Code.photoswipe atau code.photoswipe.current. Semuanya dilakukan di konsol. Saat saya memasukkan Code.photoswipe, konten berikut muncul:
Meskipun Anda tidak dapat sepenuhnya memahami apa itu, Anda dapat melihat bahwa elemen saat ini disertakan. Kemudian masukkan code.photoswipe.current di konsol untuk mendapatkan konten berikut:
Anda dapat menemukan lebih banyak informasi di sini, misalnya: CurrentIndex menunjukkan bahwa gambar saat ini diindeks dalam daftar, dan seluruh koneksi adalah kode.photoswipe.current.currentIndex mewakili posisi yang diindeks dari gambar saat ini. Informasi ini sangat penting bagi saya. Kami dapat menampilkan informasi halaman yang berbeda di berbagai halaman melalui informasi ini.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.