Photoswipe adalah album foto/game yang dirancang khusus untuk perangkat sentuh seluler. Ini kompatibel dengan semua browser iPhone, iPad, BlackBerry 6+, dan desktop. Implementasi yang mendasari didasarkan pada HTML/CSS/JavaScript, dan merupakan produk album foto gratis dan open source.
Untuk siapa
Biarkan situs seluler mengalami album album seperti aplikasi asli.
Fitur yang sangat bagus
Photoswipe memberi pengguna antarmuka interaktif album foto album yang akrab dan intuitif.
Situs web resmi
http://www.photoswipe.com/
Contoh Kode Sumber
http://github.com/downloads/codecomputerlove/photoswipe/code.photoswipe-3.0.5.zip
GitHub
https://github.com/codecomputerlove/photoswipe
Demo online
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
Fitur Kompatibilitas
Photoswipe kompatibel dengan sejumlah besar perangkat seluler dan semua pustaka kelas JavaScript populer/kerangka kerja pengembangan. Keduanya ada versi berbasis jQuery, versi bebas jQuery, dan versi yang kompatibel dengan mobile. Tentu saja, semua dalam satu ada dalam paket sampel kode sumber.
Cara menggunakan
Photoswipe adalah perpustakaan JavaScript independen yang dapat dengan mudah diintegrasikan ke dalam situs web Anda. Banyak optimisasi telah dibuat untuk browser seluler (webkit). Tentu saja, untuk browser desktop dan jQueryMobile, versi yang sesuai juga disediakan dalam paket kode sumber.
Referensi Perpustakaan Kelas
<!- Photoswipe merujuk Klass sebelumnya. Jika Anda perlu meningkatkan kecepatan pemuatan, Anda dapat menambahkan tag/atribut tundul ke skrip->
<type skrip = "Text/JavaScript" src = "klass.min.js"> </script>
<!- Catatan penting, jika Anda tidak menggunakan versi jQuery, kesalahan akan terjadi di bawah IE. Tentu saja, jika Anda menggunakan versi jQuery, Anda perlu memperkenalkan jQuery->
<script type = "text/javascript" src = "code.photoswipe-3.0.5.min.js"> </script>
Kode panggilan
/* Tambahkan DOMContentLoaded Event Mendengarkan, mirip dengan fungsi siap JQuery.
Contoh metode default/01-default.html
Silakan periksa .Campel/09-eksklusif-mode-no-thumbnails.html tanpa mode thumbnail.
*/
// Metode Photoswipe.Attach menerima 3 parameter (koleksi elemen HTML, informasi konfigurasi opsional, dan ID tipe string opsional saat beberapa instance)
Document.addeventListener ('DomContentLoaded', function () {
// Atur Photoswipe untuk mengikat semua tag <a> di bawah wadah dengan ID sebagai galeri. Klik untuk mengaktifkan
// Objek di sini adalah instance photoswipe, dan Anda dapat menggunakan metode yang sesuai, seperti show (0), hide (), dll.
var myphotoswipe = code.photoswipe.attach (window.document.queryselectorall ('#galeri a'), {enableMouseWheel: false, enableKeyboard: false});
}, PALSU);
Jika Anda menggunakan jQuery, kode panggilan adalah sebagai berikut:
// Versi jQuery, file JS yang sesuai juga perlu diubah dalam file JS
// Lihat contoh/02-jQuery.html untuk detail untuk contoh
$ (dokumen) .ready (function () {
// Objek di sini adalah instance photoswipe, dan Anda dapat menggunakan metode yang sesuai, seperti show (0), hide (), dll.
var myphotoswipe = $ ("#galeri a"). photoswipe ({enableMouseWheel: false, enableKeyboard: false});
});
Kode HTML
<!- Ul li dan hal-hal lain digunakan untuk menampilkan thumbnail, dan juga dapat disesuaikan sesuai kebutuhan. Elemen <mmg> di bawah ini adalah thumbnail. Jika tidak diperlukan, SRC dapat diatur ke kosong ->
<ul id = "galeri">
<li> <a href = "gambar/penuh/01.jpg"> <img src = "gambar/thumb/01.jpg"/> </a> </li>
<li> <a href = "gambar/penuh/02.jpg"> <img src = "gambar/thumb/02.jpg"/> </a> </li>
<li> <a href = "gambar/penuh/03.jpg"> <img src = "gambar/jempol/03.jpg"/> </a> </li>
<li> <a href = "gambar/penuh/04.jpg"> <img src = "gambar/jempol/04.jpg"/> </a> </li>
<li> <a href = "gambar/penuh/05.jpg"> <img src = "gambar/jempol/05.jpg"/> </a> </li>
<li> <a href = "gambar/penuh/06.jpg"> <img src = "gambar/thumb/06.jpg"/> </a> </li>
</ul>
Deskripsi parameter
1.AllowUserZoom: Memungkinkan pengguna untuk mengklik dua kali untuk melihat gambar dengan memperbesar/memindahkan. Nilai default = true
2.AutostartSlideshow: Ketika Photoswipe diaktifkan, tayangan slide akan dimainkan secara otomatis. Nilai default = false
3.AllowRotationOnUserZoom: Hanya didukung oleh iOS - memungkinkan pengguna untuk memutar gambar dengan gerakan dalam mode zoom/pan. Nilai default = false
4.BackButtonHideenabled: Tekan tombol return untuk menyembunyikan slide album. Ini terutama digunakan oleh Android dan BlackBerry. Ini mendukung versi BB6, Android v2.1, iOS 4 dan yang lebih baru. Nilai default = true
5.CaptionAndToolBarautohidedelay: Waktu tunda secara otomatis disembunyikan oleh bilah judul dan toolbar. Nilai default adalah = 5000 (MS). Jika diatur ke 0, itu tidak akan disembunyikan secara otomatis (ketuk/klik untuk beralih terlihat dan disembunyikan)
6.CaptionAndToolBarflipposisi: Toggle judul bilah dan toolbar (biarkan keterangan ditampilkan di bagian bawah dan toolbar ditampilkan di bagian atas). Nilai default = false
7.CaptionandToolBarhide: Sembunyikan judul bar dan bilah alat. Nilai default = false
8.CaptionandToolBaropacity: Transparansi Bar Judul dan Toolbar (0-1). Nilai default = 0.8
9.CaptionandToolBarShowEmptyCaptions: Bilah judul ditampilkan bahkan jika judul gambar saat ini kosong. Nilai default = true
10.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.
11. 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.
12.DoubleTapspeed: Interval maksimum untuk mengklik dua kali. Nilai default = 300 (ms)
13.Doubletapzoomlevel: Ketika pengguna mengklik dua kali, kelipatan pembesaran adalah level "zoom-in" default. Nilai default = 2.5
14.enabledRag: Memungkinkan menyeret gambar sebelumnya/berikutnya ke antarmuka saat ini. Nilai default = true
15.EnableKeyboard: Izinkan operasi keyboard (switching panah kiri dan kanan, ESC EXIT, masukkan pemutaran otomatis, tampilan bilah ruang/judul hidden/outs). Default = true
16.enablemousewheel: memungkinkan operasi roda mouse. Default = true
17.fadeinspeed: Kecepatan (durasi) dari elemen efek, milidetik. Default = 250
18.FadeOutspeed: Kecepatan (durasi) dari elemen efek pudar, milidetik. Default = 250
19.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"
20.invertmousewheel: Balikkan roda mouse. Secara default, menggulir ke bawah mouse akan beralih ke gambar berikutnya dan hingga gambar sebelumnya. Default = false
21.JQueryMobile: Menunjukkan apakah Photoswipe diintegrasikan ke dalam proyek seluler JQuery. Secara default, PhotoSwipe akan mencoba dan menyelesaikannya untuk Anda
22.JQueryMoBeDialogHash: Tag hash JQuery Mobile yang digunakan di jendela dan halaman dialog. Nilai default = "& ui-state = dialog"
23.Loop: Apakah album secara otomatis loop. Default = true
24.Margin: Interval antara dua gambar, unit ini adalah piksel. Default = 20
25.MaxUserZoom: Perbesaran maksimum. Default = 5.0 (diatur ke 0 akan diabaikan)
26.MinuserZoom: Pengurangan terkecil dari gambar. Default = 0,5 (diatur ke 0 akan diabaikan)
27.Mousewheelspeed: Sensitivitas sebagai respons terhadap roda tikus. Default = 500 (ms)
28.NextPreviousSlidespeed: Berapa milidetik yang akan ditunda ketika tombol sebelumnya dan berikutnya diklik. Default = 0 (sakelar sekarang)
29.Preventhide: Mencegah pengguna 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
30.PreventsLideshow: Blok Mode Playback Otomatis. Ini juga akan menyembunyikan tombol Putar di toolbar. Default = false
31.SLIDESHOWDELAY: Berapa lama waktu yang dibutuhkan untuk memainkan gambar berikutnya dalam mode bermain otomatis? Default = 3000 (ms)
32.slidespeed: Waktu ketika gambar meluncur ke tampilan. Default = 250 (ms)
33.swipethreshold: Berapa banyak piksel yang meluncur jari untuk memicu peristiwa gerakan gesek. Default = 50
34.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
35.slidetimingFunction: Fungsi pelonggaran saat meluncur. Default = "kemudahan-keluar"
36.ZIndex: Nilai Zindex Awal. Default = 1000
37.enableUiWebViewRepositionTimeout: Periksa apakah orientasi perangkat telah berubah. Default = false
38.UIWebViewResetPositionDelay: Waktu untuk memeriksa apakah arah perangkat berubah secara teratur adalah 500 (MS)
39.PreventDefaultTouchEvents: Blokir acara sentuh default, seperti pengguliran halaman. Default = true
40.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.
Fungsi khusus
getToolBar: function () { /*Mengembalikan string html yang akan ditampilkan di toolbar* /}, getImageSource: function (el) { /*Tell galeri cara mendapatkan src gambar. Secara default, Gallery mengasumsikan bahwa Anda menggunakan tag <a> untuk membungkus thumbnail <mmg>, dan atribut HREF dari tag <a> adalah URL dari gambar lengkap. Pada saat ini, metode ini dapat digunakan untuk mengembalikan jalur gambar elemen yang sesuai. Itu bisa dari segala jenis. Misalnya, Atribut Rel atau semacamnya. Akan lebih mudah untuk memiliki jQuery. */ return el.getAttribute ('rel'); }, getimageCaption: function (el) { /** Seperti metode getImageSource, metode ini mengembalikan judul gambar. Secara default, galeri mencari atribut alt gambar. * /}, getImageMetAdata: function (el) { / ** Jika Anda mendengarkan ondisplayImage, maka Anda bisa mendapatkan informasi meta tambahan melalui fungsi ini. Dan gunakan */ return di ondisplayImage {longdescription: el.getAttribute (el, 'data-long-description')}}Untuk ponsel Android, satu klik akan menyebabkan masalah mengklik pada lapisan ditutup, dan lapisan bawah masih akan memicu acara klik. Solusi kami adalah sebagai berikut:
// Trigger klik di beberapa level di ponsel Android. Kami menggunakan timer untuk mencegat var event_timeout = 500; // mencegah beberapa pemicu acara // blok acara berturut -turut dalam waktu singkat var multiclickprevent = false; fungsi preventMulticlick () {if (multiclickPrevent) {return false; } multiclickPrevent = true; window.setTimeout (function () {multiclickPrevent = false;}, event_timeout); Kembali Benar; }; // beradaptasi dengan browser var userAgent = navigator.useragent; var likeos = userAgent.match (/iPad | iPhone | iPod/i); var likeandroid = userAgent.match (/android/i); var SpecialClick = "klik"; if (listeios) {specialClick = "TouchStart klik"; } lain jika (likeandroid) {specialClick = "TouchStart klik"; } /Contoh $ (". T_RIGHT"). Live (Klick Special, Function () {if (preventMulticlick ()) {// Lakukan operasi lain} else {// else adalah untuk menolak operasi, Anda dapat secara langsung mengembalikan False atau Return False;}}); // contoh $ ("body"). Live (klik khusus, fungsi () {if (preventMulticlick ()) {// lakukan operasi lain}});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.