Benar-benar sepi nih resource dari developer. Jadi susah buat update artikel :-s Tema yang tidak akan habis dibahas salah satunya adalah tentang
Original title is stylish image bars jquery plugin. Syarat utama agar trick berjalan mulus, di dalam template sudah tertanam script jQuery inti
Fancy it?
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/
Loading... |
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...