Deskripsi Lightbox. Deskripsi JQuery Lightbox

→ Lightbox pada jQuery

Artikel ini memberikan contoh plug-in galeri kotak lampu. pada jQuery. Dan di sini Anda bisa unduh. opsi kerja. Begitulah cara kerjanya:

Implementasi lightbox ini baik karena dapat dikontrol melalui hash konfigurasi. Ini dimulai dengan sangat mudah. Untuk memulai plugin, Anda memerlukan perpustakaan jQuery, mulai dengan versi 1.2.6, plugin lightbox itu sendiri dan file gaya. Di arsip, tepat di bawah, terletak opsi jadi. Unduh, Buka kemasan dan buka file index.html Di browser apa pun. Harus bekerja.

Saya berharap bagaimana menjalankan semuanya bisa dimengerti. Saya hanya akan memberi tahu cara mengelola pengaturan lightbox. Segera, saya perhatikan bahwa plugin tidak berfungsi di IE 6, dan karena itu kami menempatkan kondisi inisialisasi untuk semua selain "keledai". Selanjutnya satu lagi momen penting: $ (Dokumen). Sudahkarena sampai kayu siap Dom. Inisialisasi tidak akan bergulir. Proses inisialisasi itu sendiri benar:

$ ("# Galeri a"). Lightbox ();

Contoh kode sumber:

kecepatan. - Kecepatan pembukaan foto dan penutupannya, di Milefeconds.

Parameter Hash. kunci: Tutup, Sebelumnya dan Berikutnya Ini adalah kunci yang manajemen tampilan galeri alternatif.

kegelapan - Transparansi latar belakang redup. Mengambil nilai dari 0 hingga 1. Warna latar belakang dapat diubah dalam file gaya.

Parameter gambar Hesha, diinvestasikan dalam file hash, itu adalah jalur ke gambar untuk latar belakang, animasi indikator unduhan dan tombol-tombol mundur.

Juga dalam teks Heshe, Anda dapat mengubah label untuk menavigasi.

Jika Anda mendapatkan situs untuk gambar yang dibangun di jQuery, mungkin, lightbox akan digunakan di atasnya. Daya Lightbox adalah bahwa ia bahkan dapat mengubah gambar di galeri yang menarik dan efisien. Dalam hal ini adalah popularitas plugin untuk jQuery di bidang desain web adalah.

Berkat Komunitas JQuery, ada sejumlah besar plugin lightbox, yang menciptakan peluang luar biasa bagi para desainer untuk bekerja dengan gambar. Dalam pelajaran kami, 15 plugin berbeda disajikan untuk memperhatikan.

Topup.

Topup mudah digunakan perpustakaan JavaScript untuk output gambar dan halaman web yang tidak mengganggu. Perpustakaan dikendalikan melalui JQuery dan JQuery UI untuk memberikan kompatibilitas dan kekompakan silang.

Plugin Highslide.

Highslide adalah alat khusus untuk melihat gambar, media, dan galeri.

Kotak warna

Plugin Kecil Kustom untuk jQuery 1.3+.

Lightbox 2 adalah skrip sederhana dan tidak mencolok yang digunakan untuk menampilkan gambar di lapisan penutup pada halaman saat ini. Mudah untuk menginstalnya, dan berfungsi di semua browser modern.

prettyPhoto mendukung tidak hanya gambar, tetapi juga video, flash, YouTube dan Ajax. LikeBox untuk file media.

SlimBox 2 - Light Box 2 Clone 4 KB ukuran, diimplementasikan menggunakan jQuery.

Shadowbox - Aplikasi web untuk melihat file media yang mendukung semua format populer. Shadowbox ditulis pada JavaScript dan CSS, dan memiliki opsi pengaturan yang baik.

Pirobox Extended v.1.0.

Salah satu keuntungan dari plug-in ini adalah kemampuan untuk membuka semua jenis file - dari konten bawaan file UWF, dari gambar sederhana file hingga.pdf.

Fitur-fitur indah lainnya: Ukuran gambar dan teknologi pendukung otomatis berubah dan lemparan.

Greybox dapat digunakan untuk menampilkan situs web, gambar, dan konten lainnya.

Super Box adalah plugin yang menampilkan Windows dengan efek lightbox.

Membuat Galeri Foto di Situs

Galeri foto Lightbox2. - Instalasi dan konfigurasi

Dalam salah satu artikel sebelumnya, diberitahu tentang galeri foto gratis paling populer yang paling populer - Kotak lampu.dibuat berdasarkan perpustakaan skrip jQuery. . Di pangkalan Kotak lampu. Desainer web telah mengembangkan banyak klon menarik, tetapi opsi awal masih terus berkembang dan berhasil digunakan untuk galeri foto di berbagai situs. Pikirkan itu pembaharuan Terakhir - Plugin. Lightbox2.Berbeda dengan ukuran kecil dan seperti biasa, instalasi mudah ke situs. Di mana Lightbox2. Ini memiliki desain yang menarik, bekerja di semua browser dan, yang sangat menyenangkan, dengan benar menampilkan gambar besar, memerasnya sesuai dengan ukuran layar pengguna.

Pengembang Polos Lightbox2. - Lokesh Dhakar, programmer dari San Francisco. Saat ini (2014) tersedia versi Lightbox v2.7.1, yang akan kami coba instal di situs. Contoh membuka satu gambar menggunakan Lightbox2. Ditunjukkan pada gambar.

Menginstal Galeri Foto Lightbox2.

Untuk memasang galeri foto Lightbox2. Pertama, buat folder baru di situs, menelepon, tentu saja, lightbox2.. Folder ini harus berada di direktori yang sama dengan halaman galeri foto. Kemudian unduh arsip dan membongkarnya di folder yang dibuat. Kami akan memiliki dua skrip di dalamnya ( * .js.), Gambar Auxiliary (Folder img.) dan file CSS (* .css.). Selanjutnya, masukkan ke halaman judul dengan galeri foto di dalam tag ... Garis berikut menunjukkan cara untuk file baru kami:

Catatan penting: jika Anda menggunakan beberapa plugin di situs Anda jQuery.Lebih nyaman untuk mentransfer file jQuery.js (lebih disukai versi terbaru) ke folder root sehingga tidak memuatnya beberapa kali. Dalam hal ini, deretan banding untuk itu akan terlihat sama untuk semua plugin. Secara khusus, untuk contoh kami, ternyata:
.
Tidak disarankan untuk menggunakan beberapa halaman beberapa versi yang berbeda. jQuery.sehingga mereka tidak bertentangan satu sama lain. Pada saat yang sama, pastikan untuk memeriksa operasi plugin versi yang diinstal jQuery.Karena tidak semua versi dipertukarkan.

Sekarang Anda perlu menempatkan gambar yang diinginkan di situs halaman. Seperti biasa, masing-masing harus diwakili sebagai miniatur (kecil) dan gambar berukuran penuh (besar) di mana tautan dari thumbnail menunjukkan. Dalam tag tautan juga menentukan rel \u003d "lightbox" - untuk satu gambar, dan jika kita ingin menggabungkan beberapa gambar ke galeri, maka ekspresi apa pun yang sama untuk semua, misalnya, rel \u003d "lightbox-one"

dll.

Jika Anda perlu membuat prasasti ke gambar, lalu letakkan di tautan judul.
Contoh galeri foto sederhana dari tiga gambar ditunjukkan pada Gambar:

Catatan penting: jika ukuran gambar utama ( big.jpg.) lebih dari ukuran Layar di browser pengguna, lalu Lightbox2.secara otomatis menyesuaikan (mengurangi) pada ukuran layar. Dalam hal ini, gambar yang diperbesar selalu cocok ke layar, terlepas dari perangkat mana yang digunakan untuk melihat: Smartphone, tablet atau monitor resolusi tinggi.

Oleh karena itu, diinginkan bahwa gambar besar memiliki pasokan resolusi, misalnya, setidaknya 1000 piksel secara vertikal layar standar HD penuh. - 1920x1080. Dalam contoh kami, ini adalah gambar "Sabtu".

Menyiapkan Galeri Foto Lightbox2.

Untuk mengkonfigurasi file file galeri foto lightbox.js. dalam html- atau editor Teks, misalnya, di notebook. Pada awal file Anda akan melihat pengaturan yang tersedia:
ini.Fadurasi \u003d 500; // waktu pembukaan gambar MS
ini.fitimagesinviewport \u003d true; // pas ukuran layar Benar / Salah
ini.resizeduration \u003d 700; // waktu menyebarkan gambar MS
ini.PositionFromtop \u003d 50; // titik kotak windbox di atas layar
ini.showimagenumberlabel \u003d Benar; // gambar kesimpulan gambar Benar / Salah
dll.

Yang utama dilengkapi dengan komentar dalam bahasa Rusia. Ubah nilai parameter dan setelah menyimpan file Lightbox.js. Anda dapat mengamati hasilnya dengan membuka halaman dengan galeri foto Anda di browser.

Beberapa parameter dari jendela galeri, misalnya, warna latar belakang dan transparansi, warna prasasti, dll. Diatur dalam file CSS lightbox.css.. Gambar Auxiliary (Maju, Kembali, Unduh, Output) terletak di folder img.Dan mereka juga dapat diubah sesuai kebijaksanaan Anda.

Pada program lain untuk membuat galeri foto situs, carousel gambar dan tayangan slide, lihat dan di bagian "

Sering kali melakukan ulasan berbagai galeri gambar, mengumpulkan koleksi tayangan slide spektakuler yang luas dan -plagins. Ada di Piggy Bank dan Lighbox semata-mata pada CSS3, tanpa menghubungkan perpustakaan JS tambahan. Tetapi waktu tidak diam, pengguna semakin menggunakan berbagai perangkat seluler untuk selancar internet, yang berarti kemampuan beradaptasi elemen web dan pada galeri foto tertentu dengan efek "" menjadi salah satu prioritas yang harus diperhatikan oleh desainer web dan pengembang web .

Saya menyajikan pilihan lain 15 adaptif jquery. plugin yang berteman, baik dengan browser desktop, dan pas dengan layar berbagai perangkat seluler (Laptop, smartphone, tablet, dll.).

Lihat demo di situs pengembang, unduh plugin yang Anda suka dan buat, buat, buat ...

1. ILightBox.

ilighbox. - Ini adalah lightbox-plugin jQuery dengan dukungan berbagai macam jenis yang berbeda File: Gambar, Video, Flash / SWF, Ajax, Frame, dan Kartu bawaan. Plugin ini juga menambahkan tombol. jaringan sosialMengizinkan pengguna berbagi konten melalui Facebook, Twitter atau Reddit. Fitur luar biasa dari organisasi tayangan slide spektakuler, galeri gambar dan klip video, dengan melihat dalam mode yang biasa, dan layar penuh.

ilighbox. Ini bekerja dengan cepat dan ketika melihat pada perangkat seluler, lebih dari dengan benar menampilkan konten yang diproses. Antara lain, menggunakan plugin ini, Anda dapat dengan mudah mengimplementasikan output blok informasi berdasarkan jenis jendela modal.

Kecanduan: jQuery.
Mendukung browser: IE7 +, Chrome, Firefox, Safari dan Opera
Lisensi: Dan neraka tahu itu)))

2. Kotak Swipipe.

SwipipeBox. - Ini adalah plugin jQuery dengan dukungan untuk layar sensorik platform seluler. Selain gambar, plugin ini mendukung video tertanam dari YouTube dan Vimeo. Swipbox sangat mudah untuk dikencangkan ke proyek apa pun, plugin ini memiliki beberapa opsi intuitif untuk mengkonfigurasi fungsi dan perilakunya. Di situs web pengembang dokumentasi terperinci Pada koneksi dan penggunaan plugin, tanpa kelebihan air, semuanya hanya dalam kasus ini, jadi tidak sulit untuk mencari tahu apa, dan mengapa, saya pikir itu tidak akan sulit.

Kecanduan: jQuery.
Mendukung browser: IE9 +, Chrome, Safari, Firefox, Opera, iOS4 +, Android dan Windows Phone
Lisensi: Saya tidak mendefinisikan, mungkin Anda akan beruntung))))

3. Magnificpopup.

Untuk waktu yang lama, terlihat terkenal dan terbukti dengan plug-in jquery atau zepto.js. Penulis plugin - Dmitry Semenov, yang merupakan pengembang dan plugin Photoswipe, yang akan memberi tahu tepat di bawah ini. Datang di plugin jQuery / zepto, memiliki lebih banyak peluang yang hilang di photoswipe, seperti dukungan video, pemetaan dan konten Ajax, implementasi modal windows. dengan bentuk bawaan. Untuk semua kriteria, ini adalah alat luar biasa di pengembang web. Secara terpisah ada plugin untuk WordPress dan dokumentasi terperinci untuk pengaturan, dan penggunaan. Mengacau hanya kurangnya dokumentasi dalam bahasa Rusia, menilai dengan nama dan nama keluarga, penulis tampaknya Rusia, tidak pernah dipahami karena kerugian, atau karena kesadaran imajiner tentang perasaannya, dan Blah. Yah, oke, kepada siapa itu perlu dikorbankan, kita juga tidak menenggelamkan teh juga))).

Kecanduan: jQuery 1.9.1+, atau zepto.js
Mendukung browser: IE7 (sebagian), IE8 +, Chrome, Firefox, Safari dan Opera
Lisensi: Lisensi MIT.

4. Photoswipe.

Kecanduan: Javascript atau jquery
Mendukung browser
Lisensi: Lisensi MIT.

11. Featherlight.

6 K.bit lightbox-plugin, untuk pengembang yang kurang lebih cerdas, dilengkapi dengan semua fitur yang paling diperlukan. Selain mendukung semua jenis konten umum (teks, gambar, iframe, AJAX), ada opsional opsional opsional, serta Anda dapat mengembangkan ekstensi Anda sendiri untuk plugin ini, yang sepenuhnya memenuhi kebutuhan Anda saat membuat proyek baru . Seperti semua ekonomi (pengembangan ekspansi) ini, itu tidak terlalu disengaja, tetapi mereka yang akan memasukkan plugin ini, saya pikir akan mengerti))).

Kecanduan: jQuery.
Mendukung browser: IE8 +, Chrome, Firefox, Safari dan Opera
Lisensi: Lisensi MIT.

12. LightGallery.

Lightgallery. - Plugin Casbox multifungsi dengan banyak fitur tambahan. Datang dengan lebih dari 20 opsi, untuk mengkonfigurasi detail lightbox terkecil. Ada segalanya, yah, atau hampir segalanya)). Galeri gambar penuh dengan miniatur yang dibangun dengan rapi, dengan elemen navigasi dan gulir miniatur. Markup HTML sederhana dalam bentuk daftar yang tidak berurutan

transisi yang mulus

Penampilan

menggunakan CSS.

Lightgallery.

Kecanduan: jQuery.
Mendukung browser: IE7 +, Chrome, Firefox, Safari, Opera, iOS, Android dan Windows Phone
Lisensi: Lisensi MIT.

13. Stripjs.

Tidak biasa, saya bahkan akan mengatakan: implementasi lightbox yang tidak biasa, lebih tepatnya, bukan presentasi konten yang biasa, ketika gambar atau video, dalam desain lisan, muncul di sebelah kanan, mengisi bukan seluruh layar, tetapi hanya pada ukuran yang ditentukan dari gambar atau video berukuran penuh. Pada layar besar Pendekatan ini jelas, kemungkinan interaksi dengan halaman tetap. Pada layar kecil perangkat seluler, semua desain inovatif ini, dengan lancar masuk ke lightbox klasik. Idenya menarik, lihat demo, mungkin seseorang akan memasukkan kreatif seperti itu.

Kecanduan: jQuery.
Mendukung browser: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ dan Android 3+
Lisensi: Creative commons by-nc-nd 3.0 lisensi

14. Lightlayer.

Plugin lightbox yang mudah digunakan yang dikombinasikan dengan baik dengan proyek apa pun dan juga terlihat bagus di layar apa pun. Plugin Lightlayer menyajikan kontrol atas serangkaian pengaturan, seperti mengubah warna latar belakang dan tingkat transparansi, posisi unit dasar, pemilihan efek transisi saat membuka / menutup, fungsi yang dapat dimanipulasi secara independen. Plugin berfungsi dengan baik dengan konten situs web eksternal, pemutar dan kartu video bawaan.

Kecanduan: jQuery.
Mendukung browser: IE9 +, Chrome, Firefox, Safari dan Opera
Lisensi: Lisensi MIT.

15. FluidBox.

Plugin Fluidbox - Casbox secara eksklusif untuk gambar. Jumlah semua jenis variasi representasi gambar benar-benar mengesankan. Plugin berfungsi dengan baik dengan gambar dalam berbagai desain, termasuk gambar mengambang, gambar dengan pemosisian absolut, gambar dan foto yang dibingkai bingkai, dan memiliki indentasi, dengan gambar tunggal, dan digabungkan ke dalam galeri. Secara umum, dengan sia-sia air untuk menuangkan, untuk melukis semua kemampuan plugin dalam tampilan singkat tidak akan berfungsi, jadi lebih baik melihat demo, memutar, berbalik dan berpikir plugin ini akan menyukai banyak.

Kecanduan: jQuery.
Mendukung browser: IE9 +, Chrome, Firefox, Safari, Opera
Lisensi: Lisensi MIT.

Ini mungkin semua! Saya harap ulasan kecil ini akan membantu Anda memahami tumpukan produk pengembangan web yang diusulkan. Saya ingin mencatat bahwa tidak semua plugin yang disajikan dalam pemilihan plugin yang saya gunakan pada proyek kerja, kebanyakan dari mereka terbukti di situs uji atau di Lachak, jadi jika ada pertanyaan, kemungkinan besar kami akan menyelesaikannya bersama, dan bersama-sama, Seperti biasa semuanya akan bekerja dengan kami.

Apakah Anda mencari template Russified yang cocok untuk tujuan Anda? Mungkin, dalam hal ini, Anda harus mengunjungi TemplateMonster Markes. Untuk alasan sederhana yang baru-baru ini muncul di situs bagian Baru Template. Sekarang setiap pengguna dapat membiasakan diri dengan koleksi yang akan memperbarui dan memperbarui. Teks untuk templat ditulis secara manual. Tetapi ini bukan satu-satunya plus dari solusi siap pakai ini. Lagi pula, dalam paket mereka, Anda dapat menemukan segala sesuatu yang akan memfasilitasi pekerjaan pada pengembangan proyek online, termasuk editor visual.

Dengan segala hormat, Andrew

Lightbox adalah jQuery-plugin yang digunakan untuk menampilkan gambar atau konten lain di jendela yang didekorasi khusus, yang ditampilkan, sebagai aturan, pada latar belakang yang ditiap sembarangan di atas halaman konten utama.

Sebelum memasang plugin ke halaman dan terlibat dalam mengaturnya, mari kita lihat contohnya:

Memulai dengan Lightbox

Unduh. versi lalu. Plugin (juga tersedia melalui Bower: Bower Install Lightbox2 --save). Setelah itu, unzorchive file zip. dan lihat contoh kerja cut-off, yang ada di folder contoh..

Siap menginstal Lightbox di halaman Anda? Mulailah dengan menghubungkan CSS dan Javascript. Anda dapat mengambil kedua file ini dari folder. dist.. Masukkan kode berikut antara tag head di halaman web Anda

Kode berikut yang menghubungkan masukkan plugin di depan tag penutupan tubuh:

Pastikan jQuery yang Anda inginkan juga dimuat. Jika Anda sudah menggunakan jQuery (diperlukan jQuery 1.7 atau lebih tinggi) pada halaman, pastikan itu dimuat lightbox.js.. Jika Anda tidak terhubung dengan jQuery, dist / js / lightbox-plus jquery.js digunakan, yang sudah memiliki perpustakaan ini, atau unduh versi terbaru dari. Situs. Pastikan empat gambar yang diresepkan lightbox.css. Lokasi di lokasi yang ditentukan. Anda dapat mengambil gambar dari folder / Dist / gambar.

Sekarang kita akan menangani kode HTML. Tambahkan atribut data-lightbox ke tautan referensi dan yang ingin kami terapkan plugin kami. Dalam nilai atribut berkualitas tinggi, gunakan nama unik untuk setiap gambar. Sebagai contoh:

Gambar # 1.

Tambahkan atribut judul data jika Anda ingin menampilkan judul. Jika Anda memiliki sekelompok gambar terkait yang ingin Anda gabungkan dalam satu set, gunakan nilai yang sama dalam atribut data-lightbox untuk gambar yang diinginkan. Sebagai contoh:

Img 2 img 3 img 4

Pengaturan Lightbox.

Jika Anda ingin mengubah pengaturan default apa pun, hubungi opsi:.

selaluShownAnAvonTouchDevices default: Salah
Jika sebuah benar., panah navigasi kiri dan kanan yang muncul ketika melayang mouse saat melihat satu set gambar, akan terlihat pada perangkat dengan perangkat pendukung input sentuh
fadture Default: 500
Waktu yang diperlukan untuk menghilang wadah dalam milidetik.
fitimagesInViewport Default: Benar
Jika sebuah benar.Ini secara proporsional mengurangi ukuran gambar sehingga gambar cocok di area tampilan. Ini menghilangkan pengguna dari kebutuhan untuk menggulir untuk melihat seluruh gambar.
maxwidth.
Jika diatur, ketinggian gambar akan terbatas pada nilai ini (dalam piksel). Rasio aspek tidak akan diamati.
tinggi maksimal
Jika diatur, lebar gambar akan terbatas pada nilai ini (dalam piksel). Rasio aspek tidak akan diamati.
positionFromtop default: 50
Jarak dari atas jendela tampilan ke wadah lightbox (dalam piksel).
resesi ulang default: 700
Waktu di mana wadah lightbox akan mengubah lebar dan tinggi saat mengubah gambar dengan berbagai ukuran (dalam milidetik).
showimagenumberlabel default: true
Jika sebuah salahTeks akan menunjukkan nomor gambar saat ini dan jumlah total gambar di set, misalnya: "Gambar 2 dari 4".
sampah default: SALAH
Jika sebuah benar.Ketika gambar terakhir ditampilkan, tombol untuk menampilkan gambar berikutnya tidak hilang. Menekannya akan mengarah pada pertunjukan gambar pertama.