mkdocs glightbox

GLightbox MkDocs

Plugin MkDocs mendukung lightbox gambar dengan GLightbox.

GLightbox adalah perpustakaan lightbox javascript murni dengan dukungan seluler.

Demo langsung dengan Material untuk MkDocs.

Ketergantungan

1. File javascript GLightbox dan file CSS
   1. GLightbox==3.2.0

Penggunaan

1. Instal plugin dari PyPI

   pip install mkdocs-glightbox

2. Tambahkan plugin glightbox ke bagian plugin mkdocs.yml Anda:

    plugins :
      - glightbox

3. Semua gambar akan ditambahkan ke efek lightbox secara otomatis, kecuali gambar dalam tag jangkar dan gambar emoji dari ekstensi pymdown.

4. Anda dapat menyesuaikan plugin dengan meneruskan opsi di mkdocs.yml:

    plugins :
      - glightbox :
          touchNavigation : true
          loop : false
          effect : zoom
          slide_effect : slide
          width : 100%
          height : auto
          zoomable : true
          draggable : true
          skip_classes :
            - custom-skip-class-name
          auto_caption : false
          caption_position : bottom
          background : white
          shadow : true
          manual : false

   Pilihan	Bawaan	Keterangan
   sentuhNavigasi	BENAR	Mengaktifkan atau menonaktifkan navigasi sentuh (swipe).
   lingkaran	PALSU	Ulangi slide di akhir.
   memengaruhi	memperbesar	Nama efek pada lightbox terbuka. (memperbesar, memudar, tidak ada)
   slide_efek	menggeser	Nama efek pada slide lightbox. (geser, perbesar, pudar, tidak ada)
   lebar	mobil	Lebar untuk elemen sebaris dan iframe. Anda dapat menggunakan unit apa pun misalnya 90% atau 100vw untuk lebar penuh.
   tinggi	mobil	Tinggi untuk elemen sebaris dan iframe. Anda dapat menggunakan unit apa pun misalnya 90%, 100vh atau otomatis.
   dapat diperbesar	BENAR	Mengaktifkan atau menonaktifkan gambar yang dapat diperbesar.
   dapat diseret	BENAR	Mengaktifkan atau menonaktifkan tarikan mouse untuk membuka slide sebelumnya dan berikutnya.
   lewati_kelas	[ ]	Nonaktifkan lightbox gambar tersebut dengan nama kelas khusus tertentu.
   keterangan_otomatis	PALSU	Mengaktifkan atau menonaktifkan penggunaan alt gambar sebagai judul keterangan secara otomatis.
   keterangan_posisi	dasar	Posisi teks default. (bawah, atas, kiri, kanan)
   latar belakang	putih	CSS latar belakang gambar lightbox. Latar belakang akan ditampilkan jika gambar transparan. Anda dapat menggunakan nilai CSS apa pun untuk latar belakang misalnya #74b9ff atau Gainsboro atau none sama sekali.
   bayangan	BENAR	Mengaktifkan atau menonaktifkan bayangan gambar lightbox. Nonaktifkan ketika latar belakang none untuk mencegah bayangan di sekitar gambar transparan.
   panduan	PALSU	Jika benar, lightbox harus diaktifkan untuk setiap gambar secara manual dengan menambahkan kelas on-glb ke dalamnya atau menambahkan glightbox: true meta di halaman.

   Periksa informasi opsi lainnya di GLightbox Docs.

5. Untuk lebih banyak fleksibilitas:

   1. Nonaktifkan berdasarkan gambar: Menonaktifkan lightbox untuk gambar tertentu. Cocok untuk beberapa gambar yang tidak memerlukan efek lightbox.
   2. Nonaktifkan berdasarkan halaman: Menonaktifkan lightbox untuk halaman tertentu. Cocok untuk beberapa halaman yang tidak memerlukan efek lightbox.
   3. Aktifkan berdasarkan gambar: Nonaktifkan lightbox untuk halaman tertentu tetapi aktifkan beberapa gambar di halaman tersebut. Cocok untuk beberapa gambar yang memerlukan efek lightbox.
   4. Nonaktifkan secara global tetapi aktifkan berdasarkan gambar atau halaman: Nonaktifkan lightbox secara global tetapi aktifkan gambar atau halaman tertentu. Cocok untuk gambar atau halaman dalam jumlah besar yang tidak memerlukan efek lightbox.

6. Mendukung keterangan gambar lightbox, periksa lebih detail di Caption.

7. Mendukung pengelompokan gambar sebagai galeri, periksa detail lebih lanjut di Galeri.

Catatan

Jika ini pertama kalinya Anda menggunakan fitur plugin MkDocs, Anda harus tahu bahwa MkDocs menyertakan plugin default bernama search . Jika Anda ingin mempertahankan fitur pencarian, Anda perlu menambahkan kembali plugin search ke daftar plugins .

Bagaimana cara kerjanya

1. Salin file skrip GLightbox ke direktori site/assets/javascripts/ dan file CSS ke direktori site/assets/stylesheets/
2. Impor skrip GLightbox dan file CSS dan tambahkan kode javascript pada setiap halaman kecuali halaman yang dinonaktifkan
3. Cari semua tag gambar dan warp dengan tag jangkar untuk gambar yang dikecualikan GLightbox dengan kelas lewati atau sudah dibengkokkan dengan tag jangkar

Lisensi

Proyek ini dilisensikan di bawah Lisensi MIT - lihat file LICENSE.md untuk detailnya.