Membuat Album Gambar Klik Zoom

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:

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/AVvXsEg2DYitLnIAm_HqqjdwOkKSIY9th0woUV-vviqPwLZMU8gX9Enk7FiaJmCjFmf75tMMM3U_tvpPBvSldDebIr2Wtyi6HC5U4HemSYsqYCTW7ZUgYm0bYSgTftQWfqmlAejrdnJjh4L30R4/s1600/motor2.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm58aY0q2U3eMWn3L1mbzLPbtHfH7v43Nn343alklpIZ6jJ2stbqhsKxCgMnFzfHaR9kNDok062ZbVz2QFAZi-TQ-pjdlMT7468TNk74iBx8hqShugc_NsptAhnkf_83Q96AAiWCE9ZBw/s1600/motor6.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHFCT_FG363XNFm3j1go7_6YldPr_ZOAADk8FbwQ2iF17O5MHoh-Oj_1d_I6nk_zYn2kPw8GCDQZxjoEJAVimOalxVI6VucfQyDHQWaRbJ0WswJz_aJE8e2NzzuYXHFFzpWgxDsSy0Waw/s1600/motor5.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeoGK5dzlCgllnL57OY9s0nZdZhg4YGJNYv9d7Px8JKWX4Y92BkEmXc_srArfsXhh841a6nDyGVV-Ifl8dymwsG91uKQ436f3PRhf0VDB0ebA9Imuxcuu2pq-KQjQvh4ZeIZmTGPWlzLM/s1600/motor8.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4wXK0H2j9Nq0R6H_6hv23pGrjY24mCN2gRpzMdZh_hD2WQXF7kyWK-6LbkHavhgTlxbA4_1kfH2uPrFfd-9uhVgaAJ54RYu034oIAVy1BWYcON6NOVEKdFfdpqWfWutrfCzzT1mvErRs/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.