-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

jQuery Image Warp script

Demonya bisa dilihat disini




    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :

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

4. 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>

5. Simpan template
6. 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/AVvXsEjyYj6lBXT2VuAJoGLnnM6gVGjZSi_9Qva5eSwOjLUKHoPO_diZTW_vcy5BtMnpgaDWnIrlj0ME4OBNQnHb_GCs2GIKmwah8PNzD8IXjWyAe3JXd34x7b0S4smuhpNAi4yT9DD4WBnOncA/s1600/PE02054A.gif" width="74" height="100" class="people" />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj26MnD-xWJv6gmqxl4WVfPgcfgdQ8weIVSNx0nXqsqvt_Zktx9F9-c1Nwp1qEkDnA0ovUpkVof4EOY2TMSZdzT59q58a6SNSaEw1lwCdqg558yReri8uh0PoKepUvYnWaV0KGfKtXwkKE/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/AVvXsEjz07kWYsVm765f9b7skd7eGQLVOxUHPAJ2QsXDk4juDvro6NB6NAaU0m4H2FC0lqWzFZ_WL3Hi9l3p9m3jU5IWfi2gy1-TOYN40wgToG7I_WqO7SAcQD00iNbJpxpkTJq68nVsuGexQBo/s1600/pool.jpg" width="250" height="180" class="imagewarp" />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7tOoJfAL1_a9RoO9RT1ekzigPxYc7W0yImjwYDM4mbk91oUJS3omEIk49U69i7Bb6RGzKCNAjZzKLU1K3rMk08SktYwmMkHwW4kNSjawrGbGxQ7-eC5dAVFYyAtcpQn86pA6GsjHps8o/s1600/cave.jpg" width="250" height="180" class="imagewarp" />
</p>

7. Selesai

Leave a Reply