Image effect yang akan kita buat merupakan efek zoom dengan memanfaatkan fungsi jQuery.1.3.2.min.js yang di dalamnya memang ditanam berbagai fungsi yang dapat dikembangkan oleh penggunanya.
Untuk menciptakan efek zoom ini kita perlu menambahkan sedikit javascript dan kode CSS sebagai pembangun dan pengendali.
Anda dapat mengatur seberapa besar effek zoom bekerja dengan melakukan perubahan di javascript.
Terimakasih Atas kunjungan Anda. Semoga Bermanfaat
Kode CSS Image Effect-1
.epek{
float:left;
list-style:none;
margin:0;
padding:0;
}
.epek li{
margin:0 3px 3px 0;
padding:0;
float:left;
position:relative;
width:118px;
height:158px;
}
.epek li img.zoom{
width:100px;
height:140px;
border:4px solid #ddd;
padding:5px;
background:#666;
position:absolute;
-ms-interpolation-mode:bicubic;
}
.epek li img.zoom:hover{
background:#999;
border:4px double #333;
}
Javascript - Image Effect-1 :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { $(".epek li").hover(function () { $(this).css({ 'z-index': '10' }); $(this).find('img').addClass("hover").stop().animate({ marginTop: '-110px', marginLeft: '-110px', top: '10%', /* pengatur posisi scr vertical saat zoom bekerja */ left: '50%', /* pengatur posisi scr horizontal saat zoom bekerja */ width: '250px', /* ukuran width pada image saat zoo bekerja */ height: '350px', /* ukuran height pada image saat zoo bekerja */ padding: '10px' }, 1500); }, function () { $(this).css({ 'z-index': '0' }); $(this).find('img').removeClass("hover").stop().animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', /* harus sama dengan width pada kode css */ height: '140px', /* harus sama dengan height pada kode css */ padding: '5px' }, 1000); }); $(".epek li a").click(function () { var mainImage = $(this).attr("href"); $("#main_view img").attr({ src: mainImage }); return false; }); }); //]]> </script>
XHTML :
<ul class="epek">
<li><a id="main_view" href="image-01.jpg"><img class="zoom" src="image-zoom-01.jpg" /></a></li>
<li><a id="main_view" href="image-02.jpg"><img class="zoom" src="image-zoom-02.jpg" /></a></li>
<li><a id="main_view" href="image-03.jpg"><img class="zoom" src="image-zoom-03.jpg" /></a></li>
<li><a id="main_view" href="image-04.jpg"><img class="zoom" src="image-zoom-04.jpg" /></a></li>
</ul>
- Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- klik "Sign in"
- Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
klik "Rancangan (Design)". - Kembali halaman baru akan terbuka, klik "Edit HTML".
- Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
- Backup/Restore Template » berisi fitur untuk melakukan backup template.
Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template". - Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
- Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
- Backup/Restore Template » berisi fitur untuk melakukan backup template.
- Cari kode <head>
- Copy dan paste-kan jQuery dan javascript di bawah <head>
- Cari kode ]]></b:skin>.
- Copy kode CSS dan letakkan di atas ]]></b:skin>
- klik "Simpan Template (Save Template)".
- Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.
- Panduan backup template, cara mencari kode dan beberapa cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials pada vertical menu sebelah kiri halaman.
- Beberapa pengaturan/setting sudah tertulis di javascript. Silahkan dicermati.
- image-zoom-01.jpg s/d image-zoom-04.jpg adalah image yang akan bekerja dengan zoom effect.
- image-01.jpg s/d image-04.jpg akan ditampilkan ketika " klik" dilakukan pada image-zoom-01.jpg s/d image-zoom-04.jpg.
- Untuk merubah kecepatan efek zoom-nya silahkan rubah variable kecepatan pada javascript berhuruf tebal warna kuning. Semakin besar maka akan semakin lambat.
- Untuk merubah ukuran image harus dilakukan perubahan secara bersama-sama antara variable width dan height pada javascript dan yang terdapat pada kode CSS. Perubahan dilakukan dengan memperhatikan selisih nilai ukuran yang sudah disediakan sebagai perbandingan.
- Variable width:'250px' dan height:'320px' (pada javascript) merupaka ukuran image dengan efek zoom. Bila diperlukan lakukanlah perubahan !
Posted in: EFEK IMAGE.jpg)
