.jpg)
Image effect anu bade urang kanggo mangrupa efek zoom kalawan ngamangpaatkeun kadudukan jquery.1.3.2.min.js anu di jerona saleresna ditanam sagala rupa kadudukan anu tiasa dikembangkeun ku pamake na. Kanggo nyiptakeun efek zoom ieu urang peryogi nambahan sakedik javascript sarta kode CSS minangka pembangun sarta pengendali. Anjeun tiasa mengatur sabaraha ageung effek zoom didamel kalawan ngalakukeun parobahan di javascript.
KODE CSS IMAGE EFFECT-1
.epekbadag{
float:left;
list-style:none;
margin:0;
padding:0;
}
.epekbadag li{
margin:0 3px 3px 0;
padding:0;
float:left;
position:relative;
width:118px;
height:158px;
}
.epekbadag li img.zoom{
width:100px;
height:140px;
border:4px solid #ddd;
padding:5px;
background:#666;
position:absolute;
-ms-interpolation-mode:bicubic;
}
.epekbadag 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%', /* pangatur tempat scr vertical keur migawe efek badag */ left: '50%', /* pangatur tempat scr horizontal keur migawe efek badag */ width: '250px', /* ukuran width dina gambar keur migawe efek badag */ height: '350px', /* ukuran height dina gambar keur migawe efek badag */ 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', /* kudu sarua jeung width dina kode css */ height: '140px', /* kudu sarua jeung height dina 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>
- Teangan kode <head>
- Copy jeung paste-kan jQuery sareng javascriptna di handap <head>
- Teangan kode ]]></b:skin>.
- Copy kode CSS sarta letakkan di atas ]]></b:skin>
- Klik "Simpan Template (Save Template)".
- Anggo xhtml wanci posting atawa manfaatkan ngaliwatan penambahan gadget.
CATETAN/KATERANGAN :
- Panduan backup template,cara pilari kode sarta sababaraha cara nunda kode css,javascript sarta xhtml tiasa 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 !
Tidak ada komentar:
Posting Komentar