بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ
Cara Membuat Gallery Gambar Responsive Efek Scrolling Slide
1. Penerepan Elemen
1.1 Elemen CSS
CSS
<style type='text/css'>
/*----------------------------------------------------
Gallery Gambar Responsive Efek Scrolling Slide
Design by. Devy Indriyani
Input Element: JavaScript-jQuery (gallery.js)
Published On February 04, 2015
Visit Site: http://sahabatblogger77.blogspot.com
---------------------------------------------------- */
#lightwrap img {display: table-cell;max-width: 600px}
.gallery a {color: black}
.gallery img {height: 200px;width: 200px}
.wrap {position: relative;height: 200px;margin: 0 auto}
.gallery {
margin: 40px 0 0 36%;
border: solid 3px #111;
height: 200px;
width: 200px;
padding:2px;
position: absolute;
transition: .3s;
cursor: pointer}
</style>
2. Meringkas Kode Perintah
1.2 Tombol Close dan Loading
Karena ini berbentuk Gallery, sudah pasti Anda akan menempatkan banyak gambar, agar tidak mengganggu saat muat gambar (Loading Lambat), saya menghapus perintah tombol kembali (close) saat Anda berada pada halaman gambar. Untuk kembali, cukup Anda KLIK area luar gambar untuk menutup slide efek, sedangkan script loading tidak saya fungsikan.
1. Penerepan Elemen
1.1 Elemen CSS
CSS
<style type='text/css'>
/*----------------------------------------------------
Gallery Gambar Responsive Efek Scrolling Slide
Design by. Devy Indriyani
Input Element: JavaScript-jQuery (gallery.js)
Published On February 04, 2015
Visit Site: http://sahabatblogger77.blogspot.com
---------------------------------------------------- */
#lightwrap img {display: table-cell;max-width: 600px}
.gallery a {color: black}
.gallery img {height: 200px;width: 200px}
.wrap {position: relative;height: 200px;margin: 0 auto}
.gallery {
margin: 40px 0 0 36%;
border: solid 3px #111;
height: 200px;
width: 200px;
padding:2px;
position: absolute;
transition: .3s;
cursor: pointer}
</style>
2. Meringkas Kode Perintah
1.2 Tombol Close dan Loading
Karena ini berbentuk Gallery, sudah pasti Anda akan menempatkan banyak gambar, agar tidak mengganggu saat muat gambar (Loading Lambat), saya menghapus perintah tombol kembali (close) saat Anda berada pada halaman gambar. Untuk kembali, cukup Anda KLIK area luar gambar untuk menutup slide efek, sedangkan script loading tidak saya fungsikan.
3. HTML, JavaScript Data Input
Perhatikan kode warna MERAH, hapus script itu jika Template Anda sudah menggunakan script-jQuery yang sama, selanjutnya Anda tinggal mengganti URL-Gambar Anda pada kode yang saya beri warna BIRU, tambahkan sebanyak yang Anda mau. Kode lengkapnya seperti ini:
HTML Java Script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/gallery.js"></script>
<link rel="stylesheet" href="http://sahabatblogger77.blogspot.com/resources/demos/style.css">
<div class="wrap">
<div id="picture1" class="deck">
<a href="URL-Gambar (1).jpg">
<img alt="" src="URL-Gambar (1).jpg">
</a>
</div>
<div id="picture2" class="deck">
<a href="URL-Gambar (2).jpg">
<img alt="" src="URL-Gambar (2).jpg">
</a>
</div>
<div id="picture3" class="deck">
<a href="URL-Gambar (3).jpg">
<img alt="" src="URL-Gambar (3).jpg">
</a>
</div>
</div><!..ending class="wrap"..!>
ٱلْحَمْدُ لِلَّهِ رَبِّ
ٱلْعَٰلَمِين
author;
Rachmat Machmud. Flimban
Posting Komentar
Luangkan waktu untuk memberikan Saran atau masukkan atau komentar Anda! Semoga Artikel-artikel yang kami publikasihkan dapat bermanfaat.........
Berkomentarlah dengan bijak dan sopan, marilah kita budayakan bertutur kata yang baik dan saling menghormati, mohon maaf bila komentar anda tidak memenuhi kriteria tersebut akan di hapus. Bila anda ingin memberikan saran, kritik,masukan yang membangun, dan memberi tambahan materi bila ada kekurangan pada artikel yang sedang di bahas dengan senang hati , saya persilahkan. Terimakasih.