Lightbox jQuery besar plug-in di website dengan Dreamweaver dan tutorial jQuery. Pelajari Lightbox html jQuery, cara set-up kait script, dan pasang style sheet yang diperlukan untuk membuat musim semi Lightbox jQuery ke dalam hidup dan menampilkan gambar Anda dengan cara yang penuh gaya dan modern. Ini adalah suatu Lightbox tutorial jQuery fantastis bahwa Anda akan memiliki contoh Lightbox pertama jQuery Anda dalam menit.
Script
Karena ini adalah script berbasis jQuery, kita perlu memuat di perpustakaan jQuery pertama. Untuk melakukan itu kita tambahkan
Hal pertama yang harus dilihat di sini adalah bagaimana kita benar-benar menemukan semua link kami. jQuery mendukung keseluruhan penuh CSS3 selectors. Jadi kita menggunakan $ ('a [rel = lightbox ^]'). Ini mengatakan mendapatkan link dengan atribut rel yang dimulai dengan "lightbox". Bagian ^ memberitahu jQuery untuk mencocokkan apa pun yang dimulai dengan string yang cocok daripada harus sesuai persis. Kami juga bisa menggunakan $ ('a [rel = lightbox]') tetapi menggunakan ^ = pemilih akan berguna ketika kita ingin mengelompokkan gambar dalam tutorial yang lebih maju tersebut.
Overlay dan variabel kontainer adalah apa yang membuat latar belakang transparan dan kotak kontainer putih masing-masing. Pada titik ini mereka belum dimasukkan ke dalam halaman, kami hanya pengaturan mereka. jQuery benar-benar membuat bagian ini sederhana karena kita hanya bisa lewat di markup sewenang-wenang dan itu mengurus semua suntikan DOM.
Overlay dan variabel kontainer adalah apa yang membuat latar belakang transparan dan kotak kontainer putih masing-masing. Pada titik ini mereka belum dimasukkan ke dalam halaman, kami hanya pengaturan mereka. jQuery benar-benar membuat bagian ini sederhana karena kita hanya bisa lewat di markup sewenang-wenang dan itu mengurus semua suntikan DOM.
Targetnya adalah pada dasarnya div placeholder mana akan kita masukkan gambar kami seperti yang dimuat. Kami hanya bisa menempatkan mereka secara langsung dalam wadah tapi dalam pengalaman saya ini div ekstra menghemat banyak sakit kepala lebih lanjut.
dekat, prev dan berikutnya adalah link yang berfungsi sebagai navigasi kita di dalam lightbox itu. Demo di sini hanya membuat mereka sebagai teks tetapi cukup mudah untuk menggunakan CSS untuk melakukan penggantian gambar pada mereka jika Anda ingin tampilan yang lebih grafis.
dekat, prev dan berikutnya adalah link yang berfungsi sebagai navigasi kita di dalam lightbox itu. Demo di sini hanya membuat mereka sebagai teks tetapi cukup mudah untuk menggunakan CSS untuk melakukan penggantian gambar pada mereka jika Anda ingin tampilan yang lebih grafis.
Tidak ada komentar:
Posting Komentar