"fumetto 1.0"
version 1.1 available
...and so now maybe you're wondering what's this
fumetto ??
hello guys!
hi, but who are you??
i am fumetto and i'm a jquery plugin.
All what you see here is without any image!
mmmh... is he joking??
maybe you're wondering if i'm joking...
...anyway all here is done thanks to me
and css3
is he reading my mind??
this empty space and this text are in a panel...
<div class="fumetto">
<div class="page">
<div class="panel">
<div class="text">
message in a panel</div>
</div><!-- .panel -->
</div><!-- .page -->
</div><!-- .fumetto -->
...and all these panels are in a page...
<div class="fumetto">
<div class="page">
<div class="panel">
<div class="text">
message in a panel</div>
</div><!-- .panel -->
</div><!-- .page -->
</div><!-- .fumetto -->
...and these pages are in a container... let's
call it fumetto!
<div class="fumetto">
<div class="page">
<div class="panel">
<div class="text">
message in a panel</div>
</div><!-- .panel -->
</div><!-- .page -->
</div><!-- .fumetto -->
i am the text!!!
<div class="fumetto"> <div class="page"> <div class="panel"> <div class="text">i am the text!!!</div> </div><!-- .panel --> </div><!-- .page --> </div><!-- .fumetto -->
i am speechL
and i am speechR
<div class="fumetto"> <div class="page"> <div class="panel"> <div class="speechL w50">speechL</div> <div class="speechR w50">speechR</div> </div><!-- .panel --> </div><!-- .page --> </div><!-- .fumetto -->
i am thoughtL
and i am thoughtR
<div class="fumetto"> <div class="page"> <div class="panel"> <div class="thoughtL w50">thoughtL</div> <div class="thoughtR w50">thoughtR</div> </div><!-- .panel --> </div><!-- .page --> </div><!-- .fumetto -->
what about size? (i am 100% width)
look at me, i'm 40% width
<!-- inside .panel --> <!-- width in percentage --> <!-- from w1 to w100 --> <div class="speechL w40">w40</div> <div class="speechR w100">w100</div>
position and width are all in percentage (x0 y10)
am i x100 y30?
<!-- inside .panel --> <!-- position in percentage--> <!-- from x0 to x100, from y0 to y100 --> <div class="text x0 y10 w50">x0 y10</div> <div class="thoughtL x100 y30 w40"> x100 y30</div>
we could also have effects for these html tags: em, b,
strong, mark and a
<!-- inside .panel --> <div class="speechL w90"> <em>em</em>, <b>b</b>, <strong>strong</strong>, <mark>mark</mark>, and <a>a</a> </div>
there are a list of customizable parameters as...
width (page), panelWidth, panelHeight, fontSize, autoFitImg
images are automatically fitted to panel dimensions
but what if i don't want that?
just set "autofitimg" to false
wow!
*img must be first in a panel
hi, i'm the guardian
yes, he is the guardian
...and what next???
you can size panels!
double wow!!!
this panel is 63% width, it means it has class w63
but there is an important think to remember
every element in a panel must have a width specified
...and just to remember, you can set width from w0 to w100
<div class="fumetto"> <div class="page"> <div class="panel w63"> <div class="speechL"> <!--NO--> </div> <div class="speechL w100"> <!--YES for w0 to w100--> </div> </div><!-- .panel --> </div><!-- .page --> </div><!-- .fumetto -->
so what do i need?
first you need
jquery
and a browser that supports css3
then if you want paginate you have to
download
paginate
and last you need...