Arrow Next Prev Dan Pagination Pada Gallery Gambar

Arrow Next Prev Dan Pagination Page Pada Gallery Gambar - Mungkin ini yang dikatakan "Desember Romantis", bagaimana tidak.! 3 buah artikel saya termasuk Arrow Next Prev Dan Pagination Page Pada Gallery Gambar yang akan kita bahas pada pertemuan kali ini, semuanya membahas tentang Cara Membuat Gallery Gambar, dan akan saya publikasikan dibulan terakhir Desember untuk menyambut bulan dan Tahun Baru 2015 yang tinggal beberapa hari lagi. Tadinya saya ingin membuat beberapa widget untuk mempercantik penampilan sidebar page, tetapi seperti yang pernah mas Ehwansah Jailani katakan bahwa:

Membuat artikel pada sebuah blog itu sangatlah mudah, hanya tinggal corat-coret maka blog Anda sudah terisi 1 artikel. Yang sulit adalah bagaimana menyusun huruf demi huruf dan merangkainya menjadi sebuah kalimat agar tercipta satu cerita yang enak untuk dibaca oleh pengunjung (Bukan yang menarik buat Anda). Untuk itu beliau meminta maaf kepada seluruh penggemar setia, jika kiranya untuk Update artikel butuh 2-3 hari baru bisa mempublikasikan 1 postingan buat sahabat semua.

Karenanya widget yang sudah saya siapkan untuk dipublikasikan hari ini kepada sahabat semua pecinta SAHABAT BLOGGER 77 Devy tunda dulu, Kali ini saya akan coba membuat 2 model gallery gambar yang direquest oleh sahabat kita mandor kerja bakti mas Saud Karrysta pada sebuah komentar di artikel sebelumnya tentang Desain Gallery Photo Efek Tumpukan, seperti ini:

Sesuai permintaan beliau, saya akan berikan 2 model gallery gambar dengan 2 tampilan fungsi perintah, diantaranya:

1. Icon Arrow Next - Previous
Menggunakan sistem slide effect untuk menggeser setiap gambar yang tersimpan pada sebuah gallery, dan saya hubungkan dengan perintah NEXT - PREV untuk mengganti atau melihat gambar selanjutnya dan sebelumnya, namun teks-nya saya ganti dengan Icon Arrow (Tanda panah arah kiri dan kanan). Umumnya Icon seperti ini letaknya tepat dibawah gambar, namun untuk memberikan tampilan yang berbeda, saya membuatnya berada disisi kanan dan kiri objek gambar, sehingga tampilannya terlihat seperti bingkai Frame seperti ini:

DEMO SHOW


Seperti biasa, saya tidak pernah memberikan kode-kode yang permanen, karena pekerjaan ini bisa Anda lakukan sendiri dengan meng-edit tampilan gallery gambar diatas sesuai warna Template blog Anda pada CSS berikut:

#slider {
  position: relative;overflow:hidden;
  margin: 0 auto;border-radius: 4px;}

#slider ul {
  position: relative;margin: 0;
  padding: 0;height: 400px;list-style: none;}

#slider ul li {
  position: relative;display: block;
  float: left;margin: -45px auto;
  padding: 0;width: 650px;height: 300px;
  text-align: center;line-height: 300px;}

a.prev, a.next {
  position: absolute;z-index: 999;top:0;
  display: block;padding: 4% 3%;width: auto;
  height: 400px;color: #fff;font:bold 18px/250px Calibri;
  opacity: 0.8;cursor: pointer;}

a.prev:hover, a.next:hover {opacity: 1;transition: all 0.2s ease;}
a.prev {border-radius: 0 2px 2px 0;background: linear-gradient(90deg, red, #e06666);}
a.next {right: 0;border-radius: 2px 0 0 2px;background: linear-gradient(90deg, #e06666, red);}

Ada beberapa kode script yang perlu ditambahkan untuk mendukung penampilan gallery gambar Anda, Script ini saya tambahkan hanya untuk membantu kinerja CSS diatas, karena tampilan gambar saya desain berbentuk diagram menu <ul> dan <li>. Jadi jangan takut, script ini tidak akan membuat loading blog Anda menjadi berat, namun efek slide pada gambar hanya akan bekerja jika Template Anda sudah dilengkapai dengan Script-jQuery seperti yang saya beri warna MERAH, seperti ini:

/*! Hapus kode ini, jika sudah menggunakan jQuery yang sama..*/
<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-slider.js"></script>
<script>
jQuery(document).ready(function ($) {
  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
</script>

Peletakan serta penyusunan gambar tidak saya tempatkan pada pengaturan CSS, tujuannya agar mempermudah Anda dalam menambahkan gambar sebanyak yang Anda mau sebagai isi gallery. Perhatikan kode yang saya beri warna BIRU, sebagai contoh saya hanya menampilkan 3 buah gambar saja, jika ingin menambahkan jumlah gambar yang lebih banyak lagi, ganti dengan URL-Gambar Anda dengan kode yang sama pada HTML berikut:

<div id="slider">
<a href="#" class="next">></a>
<a href="#" class="prev"><</a>
     <ul>
         <li><img alt='pic1' src='URL-Gambar Anda.jpg'></li>
         <li><img alt='pic2' src='URL-Gambar Anda.jpg'></li>
         <li><img alt='pic3' src='URL-Gambar Anda.jpg'></li>
     </ul>
</div>

Sampai disini, pekerjaan Anda sudah selesai untuk membuat gallery gambar dengan model Icon Arrow Next - Prev. Tahap selanjutnya, kita membuat model yang kedua dengan efek:


2. Image Gallery With Pagination Page
Pagination page biasanya dibuat untuk melihat halaman berikutnya yang ditampilkan dalam bentuk angka 1,2,3 ... dan seterusnya, yang mana setiap 1 halaman bisa terdapat beberapa daftar muatan didalamnya, seperti 2 Desain Daftar Isi Untuk Blog Bernuansa Hitam pada posting sebelumnya. Namun untuk bentuk pagination kali ini, saya akan coba gunakan untuk menyimpan gambar dalam sebuah gallery (setiap 1 angka akan ditandai dengan 1 gambar).

Agar terlihat keren, saya menggunakan efek berputar dengan pergantian gambar secara halus (tanpa lompatan), dan setiap gambar yang terlihat sudah saya lengkapi dengan teks untuk memberikan nama-nama pada gambar Anda, seperti ini:



DEMO SHOW



Untuk membuat gallery gambar dengan pagination page seperti diatas, Anda bisa rujuk kode lengkapnya di ➟ Perpindahan Slide Gambar Tanpa Lompatan.

Akhir kata saya ucapkan terima kasih, semoga tutorial cara membuat gallery gambar kali ini dapat menyimpan kisah dan kenangan Anda dimasa lalu yang sudah Anda abadikan dalam tampilan gambar. And Happy Blogging..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Arrow Next Prev Dan Pagination Pada Gallery Gambar
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/12/arrow-next-prev-dan-pagination-pada-gallery-gambar.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77