Gallery Gambar Responsive Efek Scrolling Slide - Pertemuan kali ini kita akan coba melakukan eksperimen untuk mendesain sebuah tampilan Gallery Gambar Responsive Efek Scrolling Slide. Dimana jika sebuah gambar pada postingan di KLIK, maka gambar tersebut akan dialihkan kehalaman baru, namun tampilan gambar masih dalam satu area wilayah yang biasanya ditandai dengan background blur (color='black-transparent').
Seperti tampilan gambar berikut, coba Anda KLIK gambar dibawah ini atau KLIK salah satu gambar dipostingan Anda, maka gambar yang Anda KLIK akan dialihkan pada tab baru tetapi masih dalam 1 area wilayah posting, hanya saja halaman posting tidak dapat diakses karena telah tertutup oleh background gambar seperti ini:
Penasaran kenapa gambar tersebut bisa dialihkan seperti itu, seperti tertanam sebuah sulap agar membawa gambar tersebut untuk ditampilkan dalam area posting, dan menon-aktifkan semua fungsi halaman posting agar tidak dapat diakses. Ter-Inspirasi dari event ini, saya coba membongkar elemen apa yang digunakan blogger untuk mengalihkan gambar tersebut. Dan alhasil saya menemukan penggunaan elemen CSS display:table-cell, yang dihubungkan dengan perintah script-jQuery untuk memanggil hash (lompatan objek), dan ternyata efek ini hanya menggunakan elemen CSS-target (Baca: Pengenalan Elemen CSS Target). Dan hasilnya saya berhasil merancang sebuah tampilan gallery gambar responsive yang saya desain menggunakan 3 perintah efek slide seperti:
1. Scrolling Slide Effect
Efek slide untuk melihat gambar selanjutnya yang saya hubungkan dengan perintah MOUSE, cukup letakkan panah mouse Anda diluar objek gambar, lalu lukukan scroll, maka gambar akan berpindah slide sesuai dengan scrolling efek.
2. Pagination Image Page
Pagination page biasanya berbentuk angka, efek seperti ini umumnya digunakan untuk menampilkan halaman 1 jika nomor 1 diKLIK, halaman 2 jika nomor 2 diKLIK dan seterusnya, tetapi untuk tampilan gallery gambar kali ini, saya mengganti angka tersebut dengan gambar mini (gambar kecil), yang jika gambar kecil tersebut diKLIK, maka gambar akan ditampilkan dalam skala besar dengan sistem pergeseran menggunakan toggle-effect.
3. Arrow Tab Keyboard
Icon panah yang ada pada keyboard PC Anda, panah atas, kanan, bawah dan kiri. Efek ini saya fungsikan buat Anda pengguna PC-Laptop, penggunaan MOUSE pada laptop jarang sekali, lebih sering menggunakan touch pad. Jadi, untuk melihat gambar selanjutnya Anda bisa gunakan icon Arrow (Tanda Panah) pada papan keyboard Anda.
Bagaimana, apakah sahabat semua pecinta SAHABAT BLOGGER 77 sudah menyiapkan beberapa gambar untuk efek kali ini?. Buat sahabat yang suka selfie-selfie, jangan tampilkan semua koleksi gambar Anda dalam 1 halaman penuh, akan lebih indah dan keren jika kita balut dalam tampilan Gallery Gambar Responsive Efek Scrolling Slide seperti ini:
DEMO SHOW
Cara Membuat Gallery Gambar Responsive Efek Scrolling Slide
1. Penerepan Elemen
1.1 Elemen CSS
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:
Seperti tampilan gambar berikut, coba Anda KLIK gambar dibawah ini atau KLIK salah satu gambar dipostingan Anda, maka gambar yang Anda KLIK akan dialihkan pada tab baru tetapi masih dalam 1 area wilayah posting, hanya saja halaman posting tidak dapat diakses karena telah tertutup oleh background gambar seperti ini:
BACA JUGA
Menonaktifkan Fungsi Copy Paste Pada Area TertentuPenasaran kenapa gambar tersebut bisa dialihkan seperti itu, seperti tertanam sebuah sulap agar membawa gambar tersebut untuk ditampilkan dalam area posting, dan menon-aktifkan semua fungsi halaman posting agar tidak dapat diakses. Ter-Inspirasi dari event ini, saya coba membongkar elemen apa yang digunakan blogger untuk mengalihkan gambar tersebut. Dan alhasil saya menemukan penggunaan elemen CSS display:table-cell, yang dihubungkan dengan perintah script-jQuery untuk memanggil hash (lompatan objek), dan ternyata efek ini hanya menggunakan elemen CSS-target (Baca: Pengenalan Elemen CSS Target). Dan hasilnya saya berhasil merancang sebuah tampilan gallery gambar responsive yang saya desain menggunakan 3 perintah efek slide seperti:
1. Scrolling Slide Effect
Efek slide untuk melihat gambar selanjutnya yang saya hubungkan dengan perintah MOUSE, cukup letakkan panah mouse Anda diluar objek gambar, lalu lukukan scroll, maka gambar akan berpindah slide sesuai dengan scrolling efek.
2. Pagination Image Page
Pagination page biasanya berbentuk angka, efek seperti ini umumnya digunakan untuk menampilkan halaman 1 jika nomor 1 diKLIK, halaman 2 jika nomor 2 diKLIK dan seterusnya, tetapi untuk tampilan gallery gambar kali ini, saya mengganti angka tersebut dengan gambar mini (gambar kecil), yang jika gambar kecil tersebut diKLIK, maka gambar akan ditampilkan dalam skala besar dengan sistem pergeseran menggunakan toggle-effect.
3. Arrow Tab Keyboard
Icon panah yang ada pada keyboard PC Anda, panah atas, kanan, bawah dan kiri. Efek ini saya fungsikan buat Anda pengguna PC-Laptop, penggunaan MOUSE pada laptop jarang sekali, lebih sering menggunakan touch pad. Jadi, untuk melihat gambar selanjutnya Anda bisa gunakan icon Arrow (Tanda Panah) pada papan keyboard Anda.
Bagaimana, apakah sahabat semua pecinta SAHABAT BLOGGER 77 sudah menyiapkan beberapa gambar untuk efek kali ini?. Buat sahabat yang suka selfie-selfie, jangan tampilkan semua koleksi gambar Anda dalam 1 halaman penuh, akan lebih indah dan keren jika kita balut dalam tampilan Gallery Gambar Responsive Efek Scrolling Slide seperti ini:
Cara Membuat Gallery Gambar Responsive Efek Scrolling Slide
1. Penerepan Elemen
1.1 Elemen 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:
<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"..!>Demikian artikel tentang Gallery Gambar Responsive Efek Scrolling Slide ini dapat kami sampaikan, semoga artikel atau info tentang Gallery Gambar Responsive Efek Scrolling Slide ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
