Bagaimana transisi gambar dalam Dreamweaver CS5

Transisi gambar ditangani melalui file Javascript yang ditautkan.

Langkah 1

Unduh file lightbox yang telah ditentukan sebelumnya dari pilihan Anda, dan unzip. Anda akan menemukan serangkaian empat folder dan file index.html. Folder-folder tersebut adalah "css", yang memiliki file-file dengan cascading style sheets, "foto", yang berisi dua salinan dari masing-masing foto yang akan Anda gunakan, satu dengan thumbnail, yang lain dengan resolusi penuh, "gambar", Ini berisi ikon yang digunakan untuk tombol dan kontrol, dan "JS", yang berisi file Javascript yang akan Anda gunakan.

Langkah 2

Salin gambar Anda sendiri dan thumbnail di folder "foto", pastikan bahwa di thumbnail Anda awalan nama gambar dengan "thumb_". Misalnya, "car.jpg" akan memiliki thumbnail "thumb_car.jpg". Pastikan setiap gambar memiliki thumbnail yang sesuai.

Langkah 3

Salin lightbox di direktori kerja untuk membuat salinan lokal situs web Anda, dan buka halaman web Anda di Dreamweaver. Gunakan opsi alat "tautan gambar" untuk menautkan thumbnail halaman web Anda ke tempat yang Anda inginkan.

Langkah 4

Klik setiap gambar thumbnail dan lihat area properti item dari aplikasi Dreamweaver, Anda akan menemukan opsi untuk membuat tautan di sekitar thumbnail tersebut. Di sebelah kotak teks itu ada ikon "langsung ke file". Klik di sana dan seret panah yang membuat gambar lebih besar di gambar thumbnail itu. Ulangi prosedur ini sampai Anda telah mengaitkan thumbnail dari setiap gambar.

Langkah 5

Klik pada jendela kode dari file HTML, dan gulir ke header. Di dalam kepala dan, tulis label yang terlihat seperti ini:

Langkah 6

Tambahkan tag skrip kedua, seperti ini:

Tag skrip yang Anda tambahkan menampilkan bilah alat "jQuery", dan berhenti kode javascript tertentu. Nama kode dapat bervariasi tergantung pada kotak cahaya yang Anda gunakan.

Langkah 7

Setel fungsi "hook" di lightbox Anda dari kode sumber yang diberikan, di dalam fungsi Javascript yang terlihat seperti ini:

Langkah 8

Gulir ke bawah dan temukan setiap label yang mengelilingi label . Masukkan teks berikut di setiap tag:

class = "lightbox"

tepat sebelum penutupan penutup tag. Misalnya, bisa seperti ini:

Langkah 9

Tautkan file CSS yang menyertai lightbox ke header dokumen HTML Anda, Anda dapat melakukan ini dengan fungsi "Lampirkan lembar gaya" dari Dreamweaver di panel File. Temukan file jQuery.css dan hubungkan.