Membuat Gallery dengan CSS3-JQUERY

Pada artikel ini teman-teman akan membuat sebuah gallery yang menarik menggunakan teknik CSS3 dan JQuery dimana teman-teman dapat melakukan drag dan drop pada photo gallery. Untuk melihat hasilnya teman-teman bisa membuat kode HTML seperti berikut :

jquery-css3-tutorial-gallery

Simpan kode diatas dengan nama demo.php. Buatlah kode style seperti dibawah ini.

css3-style-gallery

Simpan style diatas dengan nama demo.css  dan tambahkan kode php pada file demo.php

php-css3-gallery

php-gallery

Simpan kembali dan buat file script.js dengan kode javascript seperti ini:

javascript-gallery

javascript-css3

javascript-gallery

Simpan, dan coba jalankan di browser . Akan terlihat gambar seperti berikut :

jquery

 

Jika ingin melihat hasilnya silahkan klik demo untuk melihat hasilnya dan download source code-nya disini.

Demikian tutorial ini sampai jumpa kembali di tutorial berikutnya

20 Mei 2014

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat