jQuery Simple Image Zoomer:hidup sukses

Yang ini sangat praktis membuatnya. Jquery simple image zoomer hanya menggunakan jQuery-1.3.2.js atau jQuery lain yang fungsinya setara dengan jQuery-1.3.2.js. Jika misalnya ada yang selama ini seudah menggunakan jQuery-1.3.2.js, jQuery-1.3.2.min.js atau bahkan mungkin jQuery-1.4.2.js hingga jQuery-1.7.2.js, maka tinggal tambahkan saja simple-image-zoomer.js kemudian gunakan untuk menampilkan gambar/image di halaman posting.

Sekalipun sebenarnya tanpa bantuan kode CSS simple image zoomer sudah bisa bekerja secara maksimal, namun kita akan coba seddikit menambahkan kode CSS yang digabungkan dengan css3 agar image terlihat lebih cantik.

D E M O

D E M O

D E M O

Javascript Simple Image Zoomer

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://gubhugreyot-simple-zoomer.googlecode.com/files/gubhugreyot-simple-zoomer.pack.js" type="text/javascript"></script>

xHTML Simple Image Zoomer

<img class="gRzoom" src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-001.jpg" width="150" height="225" />

<img class="gRzoom" src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-002.jpg" style="width:200px;height:auto;" />   

<img class="gRzoom" data-gRzoomto="700"    src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-003.jpg" width="150" height="130" />

Cara menggunakan Simple Image Zoomer

Login ke blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
Cari kode <head>. Gunakan Ctrl + F untuk memudahkan pencarian kode. Jika menginginkan panduan cara cepat cari kode html dalam template buka Special Tutorials yang terletak di menu vertikal sebelah kiri.
Copy dan pastekan javascript di bawah kode <head>.
Jika ingin menggunakan tambahan kode CSS agar image terlihat seperti dalam DEMO, Cari kode ]]></b:skin>.
Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
Klik Simpan Template (Save Template).
Gunakan xHTML untuk melakukan posting.
Buka halaman posting untuk melihat hasilnya.

Kode CSS Simple Image Zoomer

.gRzoom{
        border:2px solid #eee;
        margin:6px;
        background:#aaa;
        border-radius:10px;
        padding:10px;
        box-shadow:0 0 8px #000;
}

Keterangan/Catatan

Gunakan image dengan ukuran width dan/atau height lebih dari 300px agar efek zoom lebih terlihat.
Width dan height yang disertakan pada kode html posting sebaiknya berukuran di bawah 250px agar tidak terlalu memenuhi halaman posting.
Ukuran width dan height pada kode HTML menggunakan perbandingan sesuai dengan image sesungguhnya. Jika image berukuran width=800, height=400 maka pada kode html bisa menggunakan ukuran width=200 dan height=100
Jika dalam kode html ditambahkan tag style (seperti contoh kode ke-3), maka bisa dituliskan width="..px; height:auto;
Besaran zoom bisa diatur dengan menambahkan kode data-gRzoomto="700". Nilai 700 dalam satuan pixel (width).
Kode CSS hanya dimaksudkan untuk memperindah image bebas untuk digunakan ataupun tidak.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :