jQuery;)) Kumpulan trik jquery plugin mungkin sesuatu yg bisa mempertahankan eksistensi dalam aktifitas blogging. Kendalanya ya cuma satu, yaitu susahnya menemukan plugin jQuery yg unik untuk ditemukan :p Koben mau berbagi tutorial plugin jQuery seputar menghias image menjadi putus-putus (PicStrips)
Original title is stylish image bars jquery plugin. Syarat utama agar trick berjalan mulus, di dalam template sudah tertanam script jQuery inti
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
ScreenshotGambar akan terlihat terpotong-potong (strips) ujung-ujung image zig-zag dikarenakan penambahan bg color sesuai dengan bg yg ada, strips dapat di customize, tinggi strips ujung gambar dapat di customize dll.Fancy it?
- unminified, 1.7kb
- http://www.moreofless.co.uk/downloads/picstrips/picstrips-1.0.js minified, 1.1kb
- http://www.moreofless.co.uk/downloads/picstrips/picstrips-1.0-min.js
<script type='text/javascript'>//<![CDATA[
$(document).ready( function() {
$(".strips").picstrips( {splits : 17,hgutter : '5px',vgutter : '5px',bgcolor : 'rgba(0,0,0,.7)'} );
});
//]]></script>
Keterangan:
.strips = Unique ID.
<->splits : 17 = Jumlah strips.
<->hgutter : '5px' = Jarak strips.
<->vgutter : '5px' = Tinggi ujung strips (zig-zag effect) pada image.
<->bgcolor : 'rgba(0,0,0,.7)' = Warna latar belakang vgutter
Sobat dapat menambahkan varian strips dengan memasukan ke dalam script pemanggilnya! Contoh:
Happy jQuery \m/
.strips = Unique ID.
<->
<->
<->
<->
Sobat dapat menambahkan varian strips dengan memasukan ke dalam script pemanggilnya! Contoh:
<script type='text/javascript'>//<![CDATA[
$(document).ready( function() {
$(".strips").picstrips( {splits : 17,hgutter : '5px',vgutter : '5px',bgcolor : 'rgba(0,0,0,.7)'} );
$("#strips2").picstrips( {splits: 3,hgutter: '10px',vgutter: '40px'} );
$("#strips3").picstrips( {splits: 18,hgutter: '2px',vgutter: '10px', bgcolor: '#fff'} );
});
//]]></script>
Demo & resource by: www.moreofless.co.uk/picstripsHappy jQuery \m/
Tidak ada komentar:
Posting Komentar