Tutorial Membuat tampilan gambar dengan menggunakan
JqueryLangkah pertama yang dibutuhkan + Dreamweaver + Xampp +
Tentunya Browser untuk menjalankan hasilnya
Pertama jalankan control panel xampp
Kemudian jalankan aplikasi dreamweaver
Pilih Create New HTML Isikan script dibawah ini :
Tugas Jquery
$(function() { $('#gallery a').lightBox(); });
#gallery { background-color: #00F; padding: 10px; width: 520px;
} #gallery ul { list-style: none; } #gallery ul li { display:
inline; } #gallery ul img { border: 5px solid #3e3e3e;
border-width: 5px 5px 20px; } #gallery ul a:hover img { border: 5px
solid #fff; border-width: 5px 5px 20px;
color: #fff; } #gallery ul a:hover { color: #fff; }
Contoh Penggunaan Jquery pada image.
Kemudian Save dengan nama Index.html Apabila sudah di save
Pilih File New CSS -- Create ( perintah disini dimaksudkan untuk
membuat css yang di butuhkan dalam design html tersebut
Lalu masukan script dibawah ini @charset "utf-8"; /* CSS
Document */
#jquery-overlay { position: absolute; top: 0; left: 0; z-index:
90; width: 100%;
height: 500px; } #jquery-lightbox { position: absolute; top: 0;
left: 0; width: 100%; z-index: 100; text-align: center;
line-height: 0; } #jquery-lightbox a img { border: none; }
#lightbox-container-image-box { position: relative;
background-color: #fff; width: 250px; height: 250px; margin: 0
auto; } #lightbox-container-image { padding: 10px; }
#lightbox-loading { position: absolute; top: 40%; left: 0%; height:
25%; width: 100%; text-align: center; line-height: 0;
} #lightbox-nav { position: absolute; top: 0; left: 0; height:
100%; width: 100%; z-index: 10; } #lightbox-container-image-box
> #lightbox-nav { left: 0; } #lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height:
100%; zoom: 1; display: block; } #lightbox-nav-btnPrev { left: 0;
float: left; } #lightbox-nav-btnNext { right: 0; float: right; }
#lightbox-container-image-data-box { font: 10px Verdana, Helvetica,
sans-serif; background-color: #fff;
margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%;
padding: 0 10px 0; } #lightbox-container-image-data { padding: 0
10px; color: #666; } #lightbox-container-image-data
#lightbox-image-details { width: 70%; float: left; text-align:
left; } #lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber { display: block; clear:
left; padding-bottom: 1.0em; } #lightbox-secNav-btnClose { width:
66px; float: right; padding-bottom: 0.7em; }
# Save dengan nama zoom.css
Untuk pembuatan jss sama seperti tahapan di atas Oke untuk
mempersingkat waktu dari file2 di atas copy atau pindahkan di
C/xampp/htdocs/dengan nama file tugasJquery
Jadikan selalu dalam satu file, kemudian kita buat untuk
tampilan gambarnya dalam script di index tersebut di jelaskan
dengan script
Buat file dengan nama photos lalu simpan Disitu dijelaskan agar
kita membuat 2 foto dengan ukuran yang berbeda 72x72 dan yang satu
bebas Contoh yang sudah jadi
Begitu juga untuk membuat tampilan next/prev/close kita buat
dengan nama file images lalu simpan Ini contohnya
Setelah semua sudah di simpan dengan satu file mari kita coba
jalankan dengan memanggil di browser kita dengan perintah
file:///C:/xampp/htdocs/tugasJquery/index.htm Lihat hasilnya
Untuk melihat animasinya kita bias memilih atom eng klik salah
satu foto yang ada di atas
Maka akan berubah menjadi besar, contoh
Maka akan didapatkan hasil yang seperti ini, terima kasih telah
membaca tutorial yang saya buat semoga ilmu yang saya berikan
bermanfaat buat kalian
