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:

Gallery Gambar




BACA JUGA
Menonaktifkan Fungsi Copy Paste Pada Area Tertentu


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




<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"..!>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Gallery Gambar Responsive Efek Scrolling Slide
Ditulis oleh= Devy Indriyani
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 =

28 komentar

  1. pusing mbake, tak ndelok wae ya :d

    BalasHapus
    Balasan
    1. anak wp nyimak saja mbak :-)
      hehe :d

      Hapus
    2. yo, aku rapopo, hehe..!!

      Hapus
    3. recent comment aku kogk ga bisa tampil kenapa ya mbak (blogspot)

      Hapus
    4. jika sebelumnya bisa tampil, mungkin hal ini karena pihak blogger melakukan pembaharuan terhadap penggunaan script perintah mas, ntar devy ceck dulu ke blognya.

      Hapus
    5. ada pengaruhnya ga kalau comment saya bikin disqus cz kemarin saya ganti ke disqus mbak :-(

      Hapus
    6. hmmm..pantesan kagak tampil kang, scriptnya kan tidak dipanggil dalam perintah elemen, script yang kang jum gunakan adalah blogspot-comment, sementara comment-page pakai yang lain (pihak ke-3), berarti kan perintahnya tidak terpanggil kang,

      sama seperti komentar facebook, kan gak ada recentnya,

      Hapus
    7. karena recent comment ga tampil, makanya saya ganti ke disqus mbak.

      Hapus
    8. nak ngene ki, terus kon piye jal.
      marai mumet tok mbak.
      malah ngelu sirahe nak ngeneki :d

      Hapus
    9. Huuueeeeeee ... ketinggalan kereta ini ....

      Hapus
    10. recent comment biasanya dipanggil dengan perintah js seperti ini kang jum:

      <script>
      //<![CDATA[
      var numcomment = 8,
      cmtext = "Komentar",
      cmsumm = 100;
      //]]>
      </script>


      lau dipanggil dalam bentuk HTML seperti ini, misal pada widget pembangun CSS

      .comment {
      display:block;
      line-height:40px;
      height:40px;
      overflow:hidden;
      margin:0;
      padding:0 15px;
      border-left:1px solid #155F90;
      border-right:1px solid #082E46;
      text-decoration:none;
      text-shadow:0 -1px 0 rgba(0,0,0,.4);
      color:white;
      font-weight:bold
      }
      //pada HTML widget Navigasi seperti ini:....
      .....
      <li><a href='#'>Recent Comment</a>
      <ul class='json-dropdown subcomments'>
      <script src='http://URL-Anda.blogspot.com/feeds/comments/summary?alt=json-in-script&callback=dropdowncomments'></script>
      </ul>
      </li>


      perhatikan script perintah dan script pemanggilnya, barangkali ada yang terhapus.atau kang jum bisa pelajari penempatan tag script yang benar di sini:

      Penempatan Tag Script Yang Benar

      Hapus
    11. langsung menuju tempat mbak, biar ga ketinggalan kereta :d

      Hapus
    12. Kalo recent commentnya, Nama yang punya blog biar gak muncul, edit cssnya gmana tuh mba (o)

      Hapus
    13. duduk di sini sj aaah..!

      Hapus
    14. @Achmat Fazri...
      dalam recent comment teks yang akan ditampilkan adalah pesan komentar yang dituliskan oleh si pemberi komentar, jika nama sipemberi komentar dihilangkan, darimana teks itu ditampilkan, js memanggil dan mengambil data dari link sipemberi komentar. jadi nama itu tidak bisa dihilangkan, tetapi link sipemberi komentar bisa dialihkan agar tidak aktif.

      Hapus
  2. mantap mbak.... gambar satu isinya lima

    BalasHapus
  3. tinggal pasang,mkasih mba :))

    BalasHapus
  4. Efeknya hampir sama dengan bawaan blogger ya mba, hanya saja tampilan gambar depannya cuma 1 (h) saya ngumpulin foto dulu, baru bisa di coba (o)

    BalasHapus
    Balasan
    1. benar sekali mas, karena penasaran sulap apa yang blogger sisipkan disana, sehingga saya membingkar semua elemen kode yang dipakai blogger untuk membuat tampilan gambar seperti biasanya, dan terinspirasi menghubungkannya untuk membuat gallery gambar. dan ternyata hanya menggunakan kode tab-cell yang dihubungkan dengan perintah hash.

      Hapus
    2. Oke nanti saya coba pasang di Page khusus galeri mba, Oya bedanya Jquery/1.10.2, Jquery/1.8.1, Jquery/1.8.0 itu apa ya, kalau saya hapus salah satu apa ngaruh nantinya :-? soalnya banyak .js, jadi bingung [-(

      Hapus
    3. wah bisa pasang sampai 3 script-jQuery begitu mas, hanya diperbolehkan memasang 1 jQuery saja mas dalam 1 Template, tidak boleh lebih, jika ini dibiarkan maka pengaruhnya struktur elemen script pada template akan hancur (tidak berfungsi), akibatnya semua elemen HTML tidak akan terbaca oleh spider.

      jQuery 1.10.2, 1.8.1 atau 1.8.0 sebenarnya tidak begitu ada perbedaan yang spesifisik, hanya update dta yang ada dalam perintahnya itu selalu diperbaharui, sama halnya seperti veri jika pada template. Template v1,v2,v4.3 dan saat ini versi terakhir v5 atau yang sering kita kenal HTML-5

      Hapus
    4. berarti Jquery 1.8.0 yang ada di template blog dan Jquery 1.8.1 yang ada di widget bisa saya ganti dengan jquery 1.10.2 ya? soalnya templete saya jadi agak lambat, karena ada banyak jquerynya mungkin ;(

      Hapus
    5. untuk unpdate jQuery saat ini, ya v-1.10.2, kinerja jQuery ini lebih cepat merespon efek svg,kanvas,tmt dan masih banyak lagi yang tidak bisa dilakukan oleh script-jQuery pada versi-versi sebelumnya, tetapi jQuery ini akan error jika di area lain terdapat jQuery yang sama, walau itu berbeda versi.

      gunakan hanya 1 jQuery saja mas, hapus saja yang ada pada widget, jQuery itu terpasang atau tidak, widget tetap dapat bekerja, karena dalam Template sudah ada jQuery.

      Hapus
    6. Oke sudah saya hapus smua JQuerynya dan diganti ke versi 1.10.2.. Tdnya sempat beberapa widget gak jalan, tapi smuanya pulih kembali.. Tapi masih aja template saya berat mba [-(

      Hapus
  5. Mbak Devy ini ranjin bereksperimen ya.. Keren

    Eh mbak, kenapa tampilan versi mobile-nya masih pakai standar blogspot?

    BalasHapus
    Balasan
    1. justru tampilannya malah banyak saya hapus mas, tujuannya hanya demi kepuasan pelanggan (loading blog menjadi ringan).

      Hapus

  • 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