8.12.14
41
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:

Comment Form Image



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:


Image Gallery




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 >>
= TERIMA KASIH =

41 komentar

  1. eeh mas saud request ne... :) keren ne mbak request nya mas saud... makasih ya mbak sudah berbagi.... :) galery nya bagus juga mbak...

    BalasHapus
    Balasan
    1. bukan request sih mas, cuma kemarin mas saud kehilangan PACUL, sampai akhirnya tiba dirumah Devy, terus ingin dibutkan gallery fhoto untuk mengabadikan kisahnya sewaktu kerja bakti kemarin, hehe/..

      Hapus
    2. ya elah mbak... masa kehilangan pacul mesti kerumah mbak devy. padahalkan paculnya saya pinjam semalam itu tapi belum di pulangkan... :)
      emm tapi emang bener lah mbak, solusi terbaiki itu ya kesini saja tuk soal source code, karena lebih mudah di terapkan buat yang menggunakan.. cheer

      Hapus
    3. wah...sudah kayak piala bergilir tuh PACUL, kemarin sama devy, terus dari devy dipinjam sama mas Aldino, sekarang sudah beralih tangan lagi ke mas Jai, bertuah jangan-jangan tuh pacul ya mas, hehe..

      seperti yang mas jai katakan, memberikan yang terbaik menurut pengunjung. jika saya suka belum tentu mereka suka, jadi lebih baik mengutamakan mereka dahulu yang suka. bukan begitu mas jai, hehe..!!

      Hapus
    4. Jadi pacul saya diamana nih sebener nya kalau ada di Mas Zhey sama Kakek Aldi, mohon dengan kerendahan hati anterin dong Mas? soalnya berarti sekali pacul itu untuk mata pencaharian saya..? Kalau sudah di Mbak Devy, saya Ikhlas deh di rawatin biar pacul saya bisa imut dan cantik kaya yang nyimpenya hhh :d

      Setelah saya lihat demonya Subbhan Allah Keindahan arrow next pret gallery melebihi keindahan yang saya danba kan dari Mbak Devy ini *salam manis :)

      Hapus
    5. alesan mas saudmah nyari nyari pacul kerumah devyl, padahal mau ketemu devy buat less css hehe

      Hapus
    6. Asiiik mas Saud masuk tipi, saya juga mau mbak masuk tipi :-d

      Hapus
    7. mudah dan gampang kok mas Imron kalau mau, tanpa seleksi cuma melalui audisi saja kok, hehehe..

      Hapus
    8. pada masih bahas pacul ne... sudah saya kasih lagi paculnya sama mbak devy, paculnya keramat banget....

      Hapus
  2. GALLERY NYA CEKEP DAN CERAH ,,, :)

    BalasHapus
    Balasan
    1. biar gak musim hujan terus mas,

      Hapus
    2. Kaya yang membuat artikelnya. selalu cerah dan cakep..lho kok saya kejujuran sih ? terima kasih ya Mbak Devy atas semua kebaikan yang sudah Mbak Berikan. entah dengan apa saya bisa membalas semua ini :))

      Hapus
  3. wah artikel ini dikhususkan buat mas saud ton mbak.sayangnya beliau belum datang nih.
    gimana kalau nanti datang suruh nraktir kita2

    BalasHapus
    Balasan
    1. khusus buat mas Saud, tetapi terspesial buat mas Yan, berhubung mas saud belum hadir, gimana kalau kita kerumahnya saja minta dtraktir es dogerrr..,

      tetapi jangan lama-lama disana, takut disuruh ikutan kerja bakti lagi, heheh..

      Hapus
    2. Saya hadir Mbak Devy... Tarrrrrrammmmmmm...... (f) silahkan Mas Yanto mau jajan apa saja saya traktir tinggal ambila aja sepuasnya jangan lebih dari 1000.ya? :d Yu Mbak Devy kerumah saya nginep juga saya siap dengan senang hati hhehe cheer
      Makasih atas postingan yang saya pesan ini. Mas Yanto jangan ngiri ya..? :o

      Hapus
    3. tuh mas Yan, kurang baik apa coba mas Saud, bebas makan apa saja,yang penting jangan lebih dari 1000, lumayan gede tuh duit.

      Hapus
  4. bagus yg demo nomer 2 menurutku mbak.lebih berkesan

    BalasHapus
    Balasan
    1. semoga aja mas saud suka, dan sesuai dengan jawaban, betul kan mas Yan.?

      Hapus
    2. Sooo pasti saya suka sekali Mbak,, apa lagi Mbak Devy yang menyajikan nya khusu buat saya. kalau Mas Yanto yang menyajikanya sih. mikir mikir dulu deh hhehehe :) *salam anda buat semua Sahabat yang ada disini Ngopi aja yu (c)

      Hapus
    3. hihihi... kasian devy ruang komennya dipake becanda terus, tapi lucu banget ngalahin sule dan andre hehe..

      Hapus
    4. lebih senang komentar yang seperti ini teh, daripada yang hadir cuma nulis "Nice Post" atau "Kunbalnya Gan"

      untung saja gal sampai salah tulis,gimana coba kalau sampai nulis komentar "tumbalnya gan", hehehe..

      Hapus
  5. kira-kira kapan ye requestku langsung di share :d

    BalasHapus
    Balasan
    1. emang kang jum minta apa ma Devy, kalau es doger minta saja sama mas Fiu, kemarin minum berduaan sama OB,

      Hapus
    2. Entar Kang nunggu tahun baru tahun depan.. es doger yu Mbak kalau mau saya traktir deh kebetulan saya masih ada banyak duit tinggal goceng lagi hehhe :)

      Hapus
    3. kalau es doger mah saya maunya berduaan saja sama mbak devy :d

      Hapus
  6. wah kang saud tak hanya komentar tapi rekues juga, sip ditangapin lagi, besok saya mau rekues juga ah

    BalasHapus
    Balasan
    1. Gimana roman nya sih Mas Em..? kata Mas Yanto mah Naga-naga nya saya teh orang baik hati dan jujur sabar dan penyayang semua wanita baik baik. Mungkin Mbak Devy bisa memberikan gallery cantiknya buat saya, kalau gak salah :d

      Hapus
    2. khusus buat mas saud dan terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77, hehe..!!

      Hapus
  7. Salam sore Mbak Devi maaf nih baru bisa datang, gara gara aliran listrik di tempat saya mati hidup terus nih :)) wah pesanan saya di posting juga ya. terima kasih Mbak Devy. salam ceria

    BalasHapus
    Balasan
    1. hanya dirumah mas saud atau rumah tetangga juga neh, soalnya kalau sering terjadi seperti itu, disebabkan pelanggan suka telat bayar tagihan rekeningnya, xixix..

      Terima kasih kembali mas, semoga mas saud suka dengan tampilan gallery ini

      Hapus
  8. nanti kalo minat izin pasang di templatku yah mba.. thank tutorialnya.. :)

    BalasHapus
  9. asiiik bisa begadang nih nyari gambar buat posting, sambil nyari artikel yang tepat dan cocok, saya copas dulu ah buat latihan.. eh gambarnya ukurannya berapa? atau udah auto

    BalasHapus
    Balasan
    1. kalau model yang kedua saya menggunakan width dan height pada gambar secara auto, artinya, seberapa besar gambar yang akan disisipkan tetap saja akan mengikuti area border gambar.

      namaun untuk model pertama Arrow Next - Prev atur dimensi gambar secara manual, tidak perlu mengedit gambar dengan mengecilkan ukurannya, cukup ubah nilai pada URL-gambar yang biasanya terdapat s1600 menjadi s270 disesuaikan

      Hapus
  10. keren ini,,perlu untuk dicoba,,saya otak atik dulu scrip nya :)

    BalasHapus
  11. Ukuran gambarnya rekomendasi berapa mbak Dev?

    BalasHapus
    Balasan
    1. 1. model Arrow next-prev gunakan dimensi 650x300, atau lebih mudahnya ubah nilai kode pada URL gambar s1600 menjadi s270, silahkan disesuaikan.

      2. Model pagination saya menggunakan auto sistem pada gambar, ukuran gambar akan mengikuti lebar area wrapper.

      Hapus
  12. kira-kira boleh ga comment ala pemula :d

    nice artikelnya mbak :d

    BalasHapus
  13. saya hanya bisa menyimak saja, bagus slidenya

    BalasHapus
  14. Jika saya perhatikan di demo nya munculan gambar agak berat,adakah solusinya?saya mau pakai di blog saya
    Outbound Sekolah Murah

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK