Saya membuat halaman seperti itu di situs saya untuk menguji kerja satu kode JavaScript yang sangat sederhana dan menarik untuk mengubah gambar.

Dengan menggunakan kode ini, Anda dapat membuat elemen web apa pun di halaman situs web: galeri gambar, penampil gambar, galeri foto, dll. Terserah! Anda bisa menyebutnya apa saja, apapun yang Anda inginkan - intinya sama. Ini adalah penampil gambar yang ringan.

Ada beberapa contoh, dan dibuat dengan menggunakan, meskipun setiap contoh memiliki sendiri, tetapi jenis kode javascript pertama yang berfungsi dalam tabel HTML biasa, dan bahkan (!) TANPA partisipasi CSS!

Prim* Sebagai latar belakang, mis. Saya mendefinisikan gambar "awal" untuk masing-masing contoh: gambar No.1.

Hal yang paling sederhana terlebih dahulu. Gambar dalam bingkai yang disorot akan berubah ketika Anda mengeklik tautan di sebelah kiri.

Seperti yang dapat Anda lihat dengan jelas dari contoh pertama, hasilnya adalah penampil gambar yang sederhana dan cepat. Semuanya berubah seketika!

Selain itu, tabelnya sendiri secara otomatis menyesuaikan dengan ukuran gambar.

Saya mencoba menjalankan yang lain di sini. fungsi yang sama
Satu-satunya perbedaan adalah saya menghapus batas 2 piksel dari tabel.

Saya ingin memeriksa bagaimana 2 skrip identik bekerja di halaman pertama.

Mereka sedang bekerja!
TETAPI! Penting (!) untuk memberi

Contoh ketiga mengubah gambar dengan mengklik link gambar Saya meluncurkan yang lain di sini fungsi yang persis sama
menampilkan gambar saat Anda mengeklik tautan.

Hanya sebagai pengganti nama tautan saya menyisipkan gambar multi-warna.
Cara kerjanya sama! DAN! Jangan lupa! .

nama fungsi lain dan contohnya
Contoh keempat mengubah gambar dengan mengklik link gambar

Di sini saya meluncurkan fungsi yang sama untuk menampilkan gambar seperti pada contoh sebelumnya, ketika mengklik link gambar.

TETAPI! Di sini saya mengubah tabel dengan menambahkan baris terbawah, yaitu. mengubah lokasi gambar tautan ini. PENTING! JANGAN LUPA(!)

Contoh penampil gambar ini sedikit istimewa. Saya mengkompilasinya dari GAMBAR YANG DIKUMPULKAN, dan yang pertama, "memulai", membuat gambar No. 0.

Saya tidak mengubah "tombol" tautan tersebut, tetapi menghubungkannya sudah gambar lainnya, dan yang paling menarik (!), ukurannya berbeda.

Dan dalam contoh ini semuanya bekerja SEMPURNA! NAMUN! Pasti diperlukan .

memperhitungkan beberapa fitur

Sangat penting! Ukuran (lebar) gambar yang terhubung untuk dilihat.!

Dalam kasus saya, dan saya menggunakan tata letak “kaku”, lebar maksimum tidak boleh lebih dari 772 px. Jika tidak, halaman akan meregang Ukuran ini adalah maksimum karena saya mengatur lebar pembungkus utama (#wrapper): max-width=800px , dan tabel utama situs (#content) memiliki indentasi - atribut
"bantalan sel"

, sama dengan 10 piksel di setiap sisi, dan sebagai tambahan - batas 2 piksel.
Secara total, padding dan border memberikan: 24 px. Ini perlu diperhitungkan! Setelah memeriksanya BERULANGKAH (!), saya menemukan bahwa perlu (!) Memberikan margin tambahan sebesar 2 px di setiap sisi. Jika tidak, halaman

* * *
itu akan tetap terjadi

Ukuran halaman web lainnya - perhitungan lebar maksimum gambar yang berbeda!

Kode penampil gambar Seperti yang Anda lihat dari contoh kode javascript pemirsa di atas, semuanya berfungsi dengan sempurna! Keindahannya adalah ukurannya yang sangat kecil dan tertulis tanpa koneksi.

setiap

skrip atau perpustakaan eksternal

Ini dia - kode penampil gambar. Tampan! fungsi primimages1(a)(document.example1.src=a;) Fungsi penampil diluncurkan sama di setiap tautan. Satu-satunya hal yang berubah adalah

alamat gambar

. Nah, prinsip penulisan perintah keluaran seperti ini adalah sebagai berikut: Tautan ke gambar No.1*Formal. Mencobanya dengan menguji kode javascript ini,

. Semuanya bekerja dengan baik!

Namun(!), jika Anda memasukkan alamat halaman web ke dalam kode, TIDAK AKAN berfungsi!
Penampil gambar lainnya

Saya menguji dan mendemonstrasikan di halaman tes pendidikan ini penulisan dan kemampuan fungsi kode javascript yang menarik.

Menurut saya, ini bisa digunakan untuk membuat penampil gambar paling sederhana, ringan dan tercepat.
Saya rasa saya sudah membicarakannya dengan cukup detail di sini dan menunjukkan semuanya dengan jelas.

Ada juga kemungkinan menarik untuk mengatur perubahan gambar di situs web Anda dengan membuat tab. Seperti ini: "Tab HTML+CSS untuk situs".

Ya, dan satu lagi penampil gambar, namun yang otomatis "hidup" di bagian "Slideshow JavaScript".
Untuk mengubahnya menjadi normal, cukup tekan tombol START/STOP.

Karena kita berbicara tentang pemirsa otomatis, dan jumlahnya lebih dari cukup di situs saya, ada baiknya mengunjungi bagian "Slideshow", yang terdapat banyak sekali. Ada "kotak penuh" di sana!
Dan omong-omong!

Pembuatan semua jenis tayangan slide pada halaman yang ditunjukkan dalam tautan telah dikomentari secara rinci.

Jika Anda menemukan situs gambar yang dibuat dengan jQuery, kemungkinan besar situs tersebut akan menggunakan lightbox. Kekuatan lightbox adalah ia dapat mengubah perpustakaan gambar sederhana menjadi galeri yang menarik dan efektif. Fitur inilah yang menjadi alasan popularitas plugin jQuery di bidang desain web.

Isi Ulang

Plugin slide tinggi

Kotak Warna

Plugin khusus kecil untuk jQuery 1.3+.

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

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

Slimbox 2 adalah tiruan Light box 2 berukuran 4 KB, diimplementasikan menggunakan jQuery.

Pirobox Diperpanjang V.1.0.

Salah satu kelebihan plugin ini adalah kemampuannya untuk membuka semua jenis file - mulai dari konten yang disematkan hingga file .swf, dari gambar sederhana hingga file .pdf.

GreyBox dapat digunakan untuk menampilkan website, gambar dan konten lainnya.

Super Box adalah plugin yang menampilkan windows dengan efek lightbox.

UPD 2014-02-14

Ingat enam bulan lalu saya membagikan skrip untuk melihat foto? Saya juga membual bahwa beratnya kecil, bekerja dengan cepat dan secara umum tampan. Apakah ini benar-benar masalahnya hanya dapat dinilai dari luarnya, tetapi saya akan memberi Anda beberapa alasan lagi yang mendukung naskah tersebut. Hari ini saya memberi perhatian Anda versi yang ditingkatkan - kotak cepat 0.2.

Hampir semua orang menggunakan skrip, yang telah menjadi norma tradisional. Jika ada skrip zoom di suatu tempat, maka ini adalah setengah dari kasus Kotak Ramping atau Kotak Cahaya. Alih-alih 6 file yang diperlukan untuk Kotak Cahaya, skrip saya hanya membutuhkan dua: satu CSS dan satu JS. Ini tidak memerlukan gambar untuk berfungsi, dan memuat foto terlebih dahulu sebelum menampilkannya di layar dan beratnya 6,5 ​​KB.

Berikut ciri-ciri utamanya:

• tidak ada grafik, semuanya dibangun di atas HTML+CSS
• Membutuhkan dua file untuk berfungsi +
• kontrol panah kiri dan kanan serta tombol Esc (berfungsi di Win dan MacOS). Setelah memperbesar foto, Anda dapat berpindah ke foto berikutnya atau sebelumnya dengan menekan kursor pada keyboard, dan untuk menutup jendela, tekan Esc atau tautan “Tutup” di kanan atas.
• pembuatan galeri otomatis: jika ada lebih dari satu foto pada halaman yang ingin Anda buka untuk tampilan yang diperbesar, skrip akan secara otomatis membuat galeri dan menampilkan daftar gambar di kiri atas. Baik LightBox maupun SlimBox tidak dapat melakukan ini.
• Jika atribut judul pada foto diisi, maka secara otomatis akan ditampilkan di bawah setiap foto sebagai deskripsi.
• skrip memeriksa apakah jQuery diaktifkan dan jika tidak, maka muat

Saya akan membuatnya lucu untuk Anda, tetapi tidak ada perbedaan visual dari versi pertama, kecuali gaya membuka jendela. Script di tempat kerja terlihat seperti ini:

Anda dapat melihat skrip beraksi di.

Instalasi membutuhkan waktu 1 menit. Anda perlu mengunggah file ke folder mana pun di hosting Anda melalui ftp.

Unggah isi arsip ke folder root /js/. Di bagian atas dokumen, sebelum tag penutup, tambahkan baris berikut:

Jika Anda belum mengaktifkan jquery, unduh saja dari: /jquery.js. Dan agar script tersebut dapat mengolah foto anda. Anda perlu menambahkan atribut ke dalamnya: class='quickbox'. Sebagai contoh, berikut 4 foto:

Scriptnya gratis, gunakan dan nikmati hidup. Tolong jangan coba-coba menjualnya, jangan melanggar akal sehat :-).

» Skrip PHP untuk galeri gambar

Coppermine adalah galeri gambar web multi-fungsi serbaguna yang ditulis dalam PHP, menggunakan GD atau ImageMagick, serta database MySQL.

| v.1.5.24 | Diunduh: kali

Skrip galeri foto sederhana yang luar biasa. Lihat gambar Ukuran Penuh di jendela baru yang terbuka, buat pratinjau otomatis (thumbnail) dan banyak lagi dalam paket Galeri Maian ini.

| v.2.0 | Diunduh: kali

Galeri Gambar KoschtIT adalah skrip galeri foto PHP sumber terbuka dan gratis. Program ini digunakan untuk menambahkan galeri gambar PHP dengan cepat ke situs web yang ada.

| v.3.1c | Diunduh: kali

Album Foto PHP Max adalah skrip Album Foto PHP yang sederhana dan mudah digunakan. Anda dapat mengunggah gambar ke server Anda, menambahkan judul/judul dan deskripsi ke file foto Anda, melindungi file agar tidak dilihat dengan kata sandi dan fungsi standar lainnya. .

| v.1.0 | Diunduh: kali

Galeri foto sederhana yang ditulis dalam PHP menggunakan database MySQL. Cukup unggah file foto dan langsung disajikan kepada pengunjung situs Anda dengan cara terbaik.

| v.2.0 | Diunduh: kali

Galeri Sederhana adalah sistem manajemen galeri gambar paling ringan yang ditulis dalam PHP yang menggunakan jQuery, MySQL dan GD Library.

| v.1.3 | Diunduh: kali

Plogger adalah skrip galeri gambar PHP generasi baru dengan kode terbuka untuk diedit. Program PHP tidak dipenuhi dengan fitur-fitur yang tidak perlu atau konfigurasi yang rumit.