jQuery Image Warp script

 

Cara Membuatnya :

• Login Blogger :
• Rancangan, Edit Html, Cari Code ]]></b:skin> :
• Dan Simpan Code Berikut Di Atasnya :

.imagewarp, .people{
margin-right:45px;
}

• Simpan kode berikut diatas kode </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/imagewarp.js">
/***********************************************
* jQuery imageWarp script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){
    $('img.people').imageWarp({warpfactor:2}) //apply warp effect to images with CSS class "imagewarp"
    $('img.imagewarp').imageWarp() //apply warp effect to images with CSS class "imagewarp"
})

</script>

• Simpan template

• Cara pemanggilannya pada html :

Non hyperlinked images, warp factor=2.5, duration=1 second:
<p align="left">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEginLkOq7fpXbS42puQ-e30jWjPp16-Jp0C-cwWkJ-Er3-vsZKBUd1x2iKKO4JeoaesTIvUO3XclANsg6NBIi9OVtpVbnKJMHss7qu_cVbL2JdZQ-Blx6MPgkMujBeNwsat5LRZ2ajzYr8/s1600/PE02054A.gif" width="74" height="100" class="people" />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj34FQd2vBhYJ3pKx6w9RR5zcfvv6RoNznKwkzRvbUJrRMnR0CjY6Wo0gdNaXMh-Mjjqhzl5-RahK274iHO79wZTIfPJB69kXdaIbAvQh1pqE05v10dU98Oq3ZeUWL0PoJt-uQeko_KsH4/s1600/PE01805A.gif" width="100" height="94" class="people" />
</p>


Non hyperlinked images (except last one), warp
factor=1.5, duration=1 second:
<p align="left">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxsgVtvS76yfKsNJ9WODV_9Vt7twXAupWV64CZnYVJgr-rrPObHGkhrO2RuSUze41vx4dOqFUXC4o6TsGq4TQed08LtzA3R77v0FQYp6Teb1YfDzCNV430_RvlVTOSm9wZuOwmXFF8168/s1600/pool.jpg" width="250" height="180" class="imagewarp" />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH6VgICKfJNTIs_Sf5XHArSo8ntdlAIA9d_pndmJHZcVQzzYQJO09m5o4B2pvD5Ixkeqg4BnTBa-Fi1dA2vIpC2F6t8iWIaeeGWyMYKx4swEm_smrOIJqjb1DoDrzjwvGqpNhdSlHrE7w/s1600/cave.jpg" width="250" height="180" class="imagewarp" />
</p>

• Selesai