Home » » jQuery Image Warp script

jQuery Image Warp script

Written By Satriyo Arif on Selasa, 31 Mei 2011 | 00.12



1. Cara membuatnya : 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/AVvXsEh086ZDcdeDa7nonCETnLLq0QJm-urFK3tnuko9yf0cY_DnjbBwXgduiUIHubDzKuLfRqBSVcysgBjnfjf4gVtRfTMd9gV7KP0br-wI9XtGl11TQAZrlIJwuW6wfyZKY6nryVJUX6Iwlqw/s1600/PE02054A.gif" width="74" height="100" class="people" />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuiz294nJBpVLgz9dhi1VTQC-hKt8xs1gBZG02Eo8Z3r6il6YNiEJeg_nsfEOFZpKTS-tq-8re7DzyCffxHgHm55Ld_YYcDR3tVS8FvV9v9ZLuEM4oxc96gi7i61pOFMTD_aZL0_7_RZg/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/AVvXsEim7yr_NUrhTyfyNM3bL9UY2ENo96xy7pP1mILH8lbJKMaTBVWHo-XZ5LsVYoa90idXV584vyDQQalclYpZrJeKq_GAc1As8iA9wwc0H1ywXZWBqJHzMbSCunH14bWbrjPek3jEXX85svE/s1600/pool.jpg" width="250" height="180" class="imagewarp" />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFb4_H4DhEJ-Tm0BMV0L2Lfpa-gD4dNPKjJMgCa7-SZ6KDSeG2nBwvqfxIDUQOtQOxZtgabtXdlsBIPwRdsEMGdYCK9BababfdSb7mxGsj0aruvYwLK0VaEerXVwFkfbIaQ-J5CVJ7YbQ/s1600/cave.jpg" width="250" height="180" class="imagewarp" />
</p>

7. Selesai

Selamat Mencoba...
Kontak Kami:
Jl. pemuda no. 4A (kawasan PKL stempel Kantor Pos Johar Semarang)
Phone : 085641156748
024 40256748
Pin BB : 311DAEE5

0 komentar :

Posting Komentar

Berita Terbaru :

 
Support : Stempel Semarang | Master Trik Blog | Belajar SEO
Copyright © 2013. Blog Tutorial Bojonegoro - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger