Minggu, 12 Mei 2013

PicStrips jQuery Plugin Strips Effect to Image

Benar-benar sepi nih resource dari developer. Jadi susah buat update artikel :-s Tema yang tidak akan habis dibahas salah satunya adalah tentang 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>ScreenshotPicStripsGambar 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
Itu bumbu stylish image bars jquery plugin. Rekomendasi diletakkan sebelum tagging </body> Script pemanggilnya begini
<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:<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/picstrips
Happy jQuery \m/

Tidak ada komentar:

Posting Komentar