13.12.14
28
Membuat Album Gambar Klik Zoom - Biasanya efek zoom pada sebuah gambar bekerja dengan sentuhan mouse (HOVER), pertemuan kali ini SAHABAT BLOGGER 77 akan mencoba memberikan beberapa koleksi gallery gambar untuk menyimpan semua kenangan terindah Anda dalam sebuah album gambar dengan efek klik zoom seperti ini:

Album Gambar



Demo Referensi Effect To Performance:
  1. Membuat Efek Figure According Pada Gambar
  2. Efek Zoom Gambar Mode Slide Teks
  3. Membuat Koleksi Gambar Hover Efek Zoom Right
  4. Membuka Gambar Dengan Perintah Fungsi Klik



Untuk desain tampilan saya membuat efek zoom right (membesar pada sisi kanan) dengan perintah transisi-effect untuk menarik salah satu gambar yang sudah Anda simpan pada sebuah album, dan menampilkannya dengan skala membesar pada sisi kanan jika gambar yang akan Anda lihat di KLIK seperti ini:




DEMO SHOW




Tampilan gambar pada album sudah responsive dengan dimensi max-width=370px dan gambar mini default dengan max-width=150px (bisa disesuaikan), jadi Anda tidak akan repot-repot lagi jika harus mengedit dimensi gambar dengan revolusi ukuran pixel yang sama pada masing-masing gambar. Sebagai percobaan Anda bisa gunakan gambar berikut untuk Membuat Album Gambar Klik Zoom dengan URL-Gambar ini:



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGsx1nuHKlC9QE5A7uI5tbQmaslCQ-HuZF4II0i2ViUGR5AJEAAfxiuUJ4CIGWmaHZtslYogtBDHsaK33zjHYnMkeKe0SC3zvVRPcC09gEiR8LQ89hWhQMo9RcxVFnQ1f4AyG9AEphIwU/s1600/motor2.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vc2ZLRF13esh7bC-BQ0fMykyJ8-7wZb37OHj8-lVxrEZ3SEYR-QDMEqMLTEJvrp62Xf2FvUmHopd9K1XvMjToSOKOTAGDC2RF9NAujS27lATyPgl4mA0y12O3q31YG5ppdeLeR2zHLk/s1600/motor6.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx57NCJ7gBxj2lXLd01bs0oX_hHTl5DqNmr20JFLwA3eFUmEWLLbzURCu2jsVa-RMHSO6FAe3J_joxOJan4gZG9UnX-8VNqbnGJnVIKtBL0rB7lAFrJBDTHWMldwSXkL7hK2ZPAnCds6U/s1600/motor5.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBquOi-MUybgKJbmLjAgk4JV9zYbmlyHdDc9zig0-VTLX9mxGOV2TPUqXJZrdRvivMK_LKd_U7ffPtJqR1TElc6PrDWf39DYwtKwy1TIyPu6wNQORQwZwfX2Bj3SsYEwVtHUzqNx4Bf_Y/s1600/motor8.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfbAQ8X8DXW0L8ch_kBjctgLg0onGQ1_XxHSsK1yTTyPIJ4cLLbQrTPgBsEtTMR-w1FzuaL0R9eLoz79V6nh546UnRwF1v2aarZ5wbkqGH9CQMwlFTQENKozLT2-H8tSfGlPfko6sZKiE/s1600/motor4.jpg




PENERAPAN KE BLOG
Pada formulir kosong halaman posting, Anda cukup Copy kode berikut, lalu Pastekan di mode tulis HTML saat Anda akan membuat postingan baru dengan CSS seperti ini:



<style type='text/css'>
.album-sb77 .active img {display:block;width:370px;}
.album-sb77 {position:relative;}
.album-sb77 li {
   position:absolute;display:block;
   list-style-type:none;
   padding:10px 10px 30px 10px;
   background:#9ACD32;
   -webkit-transition: -webkit-transform 0.5s ease;
   -moz-transition: -moz-transform 0.5s ease;
   transition: -moz-transform 0.5s ease;}

.album-sb77 li.active{
   background:#DC143C;
   border-radius:5px;
   -webkit-transform:rotate(0deg) !important;
   -moz-transform:rotate(0deg) !important;
   transform:rotate(0deg) !important;}

.album-sb77 img{
   display:block;width:150px;
   -webkit-transition: width 0.75s;
   -moz-transition: width 0.75s;
   transition: width 0.75s;}
</style>


Saya membuat efek rotate untuk tampilan album gambar Anda. Perhatikan kode yang saya beri warna BIRU, silahkan Anda atur nilainya untuk memberikan efek miring pada gambar. Perintahnya seperti ini:


//hapus kode ini jika Template Anda sudah dilengkapai dengan kode 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/photo-album.js"></script>
<script>
$(function(){
var zIndex= 1, endTop=0, endLeft=365;
function randRotation(el){
var rot = Math.round( Math.random() * 0-0);
return $(el).css({'-webkit-transform':'rotate('+rot+'deg)',
'-moz-transform':'rotate('+rot+'deg)',
'transform':'rotate('+rot+'deg)'
  });
}
</script>


<ul class="album-sb77">
   <li draggable="true"><img src="URL-Gambar Anda.jpg"></li>
   <li draggable="true"><img src="URL-Gambar Anda.jpg"></li>
   <li draggable="true"><img src="URL-Gambar Anda.jpg"></li>
   <li draggable="true"><img src="URL-Gambar Anda.jpg"></li>
   <li draggable="true"><img src="URL-Gambar Anda.jpg"></li>
</ul>


Tinggal beberapa hari lagi kita sudah menyambut bulan dan tahun baru 2015, sudah pasti kenangan tahun lalu akan kita tinggalkan, jadi abadikan kenangan itu dengan Membuat Album Gambar Klik Zoom untuk menyimpan photo-photo kenangan Anda.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Album Gambar Klik Zoom
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 =

28 komentar

  1. Hmm menarik sekali nih.. gambar-gambarnya. Saya pengennya gambarnya terbang, bisa ga ya? Hehe. :)

    BalasHapus
    Balasan
    1. Setelah lihat demo membuat album gambar klik zoom nya Mbak Devy ini saya terinfirasi buat mennyimpan nanti foto liburan tahun baru nih Mbak. ijin ambil script nya terima kasih selamat jelang Tahun baru 2015 (c)

      Hapus
    2. saya lihat demonya nggak pakai pertamax nih

      Hapus
    3. masih ada premium ditangki motornya mas Saud mas, jadi pertamax hari tidak dibahas dulu

      Hapus
  2. Devy lg suka bkin gllery nih...
    bkinin gallry buat sy jg ow....heeee

    BalasHapus
    Balasan
    1. foto-foto devy yang lalu banyak yang hilang, jadi mau disimpan di album ini mas, biar ga bisa dicuri lagi sama mas Fiu, hehe..!!

      Hapus
    2. Kalau saya yang ambil boleh kan Mbak Devy..? :d

      Hapus
    3. Gpp deh klo photo gk bleh ...
      sy curi hatinya devy aja gmn .... xixixixixixi :P

      Hapus
    4. saya menyimak para sahabat yg sedang modus

      Hapus
    5. hmmm..walau apapun itu tetap saja kagak baik mas Fiu kalau mencuri mah, kalau diminta baik-baik pasti Devy kasih kok, ahai dah,,hehe..!!

      Hapus
    6. ciyus mie apha :d
      saya ikutan kang yanto aja dech nyimak cowok-cowok ganteng beraksi :d

      Hapus
    7. Ok.... sy minta aja gmn ? :D heee

      Hapus
  3. Wihhh ajib nihhh tutorialnya :) ijin nyoba :))

    BalasHapus
    Balasan
    1. nggak ada yg nggak ajaib diblog ini mah

      Hapus
    2. semuanya ajaib cz bisa bikin kepala muter-muter :d
      wkwkwkwk.....

      Hapus
  4. Menarik sekali Mbak Devy Album gambar nya bisa say coba buat gallery di blog saya makasih ya Mbak sudah berbagi buat saya *salam ceria :)

    BalasHapus
  5. Saya malah jadi mainin gambar2nya.. habis unik banget sih. tapi kenapa ada garis hijau ya saat gambar berganti?

    BalasHapus
  6. boleh kah mbak saya belajar dari mbak devy... tentang javascript ini.. saya mah tidak bener mbak, masalah javascript seperti ini mbak... :-?

    BalasHapus
    Balasan
    1. belajar sama-sama mas, devy juga masih belajar kok, yang sudah sangat paham tentang hal beginian itu mas saud dengan mas yanto.

      Hapus
    2. Saya malah belajar dari Mbak Devy dehh iya kan. Mbak :)

      Hapus
  7. menarik sekali mbak setelah saya lihat demonya,, trims infonyaaaa

    BalasHapus
  8. keren nih
    tp efek gambar ini valid html 5 nggak mbak?
    soalnya saya sering mencoba tp selalu ada peringatan di html5 dan css3

    BalasHapus
  9. Keren banget mbak, cm saya belum paham css kek gini, takutnya jadi berantakan mbak. heheee

    BalasHapus
  10. bisa dipraktekkan nih sis :) kunjungan perdana nih sis hehe

    BalasHapus
  11. Ok info yang bagus, langsung ke TKP mas Gan...

    BalasHapus
  12. Saya ga ngerti-ngerti yang ginian, ini gambarnya bisa disimpan ga?buat modivikasi motor nih..

    BalasHapus
  13. Gambar yang bisa memperbesar sendiri bisa membuat menarik bagi pengunjung kita.

    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