Paano Gamitin ang WowBook jQuery Flipbook Plugin
Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)
Kung ikaw ay naghahanap ng madaling gamitin na mga kagamitan na maaring baguhin ang iyong mga larawan at PDF files sa interactive flip books o slide shows,WowBook, isa sa mga pinakasikat CodeCanyon, ay para sa iyo. Ang premium plugin ay nag-aalok ng dalawang makatotohanang epek na paglipat ng pahina, kumpleto na may kasamang tunog ng paglipat ng pahina,at ito ay umaandar ng maayos sa lahat ng makabagong browsers.
Ang Flip books ay nilikha gamit ang WowBook plugin ay tumutugon at magandang tignan sa desktop at mobile devices.At saka, sinusuportahan nila ang karaniwan touch gestures gaya ng pinch at zoom.
Sa pagtuturong ito,Ipapakita ko sa iyo kung paano idagdag ang WowBook sa webpage at gamitin ang lahat ng tampok na iniaalok nito.
1. Pagkuha ng WowBook
Kung wala ka ng Envato Market account, simulan sa pamamagitan ng paglikha ng isa ngayon.Pagkatapos ay mag-sign in sa CodeCanyon at bumili ng lisensya para sa WowBook.



Ngayon ay maari ka nang mag-download ng ZIP file na naglalaman ng lahat ng kinakailangang files at dokumentasyon na may kaugnayan sa plugin. Ang file ay may sanggunian pangalan na wow_book, na naglalaman ng pinaliit na bersyon ng plugin’s source code.Dapat mong kunin ang sanggunian na ito sa iyong development environment upang maaring maggamit ang WowBook.
Sa puntong ito, upang idagdag ang WowBook jQuery plugin sa isang web page, ang kailangan mo lamang gawin ay isama ang mga sumusunod JavaScript at CSS files:
1 |
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> |
2 |
|
3 |
<script src="./wow_book/wow_book.min.js"></script> |
4 |
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script> |
5 |
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" /> |
Tandaan na maari mong tanggalin ang pdf.combined.min.js kung wala kang intensyong gamitin ang WowBook na may PDF files.
Bagaman ang jQuery plugin ay sumusuporta
sa lumang bersyon ng jQuery,sa pagtuturong ito, gagamit tayo ng jQuery v3.3.1
2. Paglikha ng Flip Book
Lahat ng WowBook ay kailangan ng isang
bakanteng <div>
elemento upang mailarawan ang iyong Flip Book.Kaya lumikha ng
isa ngayon gamit ang sumusunod na code:
1 |
<div id="my_flip_book"> |
2 |
</div>
|
Sa iyong JavaScript code, maari mong
piliin ang <div>
elemento at tawagin itong wowBook()
pamamaraan upang paganahin
ang flip book. Bilang paliwanag,ang pamamaraan ay umaasa na ang JavaScript
object na naglalaman ng configuration details tungkol sa flip book.
Nag-aalok ang WowBook ng dose-dosenang pangalan
ng configuration options. Halimbawa, upang mailarawan ang mga pahina ng isang
PDF file sa loob ng flip book, maari mong gamitin ang pdf
opsyon at tukuyin ang
lokasyon ng file.
1 |
<script>
|
2 |
$("#my_flip_book").wowBook({ |
3 |
pdf: 'sample.pdf' |
4 |
});
|
5 |
</script>
|
Bagaman ang nasa itaas na code ay sapat
na upang paganahin ang simpleng flip book, ang sukat nito ay magdedepende sa
sukat ng pahina ng PDF file. Upang magkaroon ng mas mabuting kontrol sa sukat
ng flip book, dapat mong itakda ang container
option sa true
. Pagkatapos mong gawin,maari mong
gamitin containerWidth
at containerHeight
mga pagpipilian upang tukuyin ang iyong nais na sukat sa pixels.
Sa default, ang container ay transparent.Kung
gusto mo,maari mong gamitin ang containerBackground
option upang bigyan ito ng
solidong kulay.
1 |
$("#my_flip_book").wowBook({ |
2 |
container: true, |
3 |
containerHeight: 670, |
4 |
containerWidth: 830, |
5 |
pdf: 'sample.pdf', |
6 |
containerBackground: '#333' |
7 |
});
|
Kapag binuksan mo ang iyong web page sa browser ngayon, dapat kang makakita ng flip book. Kapag inilipat mo ang iyong mouse malapit sa kanto ng libro,makakakita ka ng curl animation. Maari ka nang mag-click on o i-drag ang kanto para ilipat ang pahina.



Habang inililipat mo ang pahina ng flip
book, dapat kang makarinig ng tunog na naglilipat ng pahina sa karamihan ng
browsers.
Lumilikha ng Photo Album
Ang WowBook ay higit pa na isa lamang custom PDF viewer.Maari mo itong gamitin upang mabilis na paganahin ang flip books mula sa HTML content din.
Halimbawa, ang sumusunod na code ay lumilikha ng flip book na may apat na mga pahina,bawat isa ay nagpapakita ng solong larawan.
1 |
<div id="my_album"> |
2 |
<div>
|
3 |
<img class="photo" src="photo1.jpg"/> |
4 |
</div>
|
5 |
|
6 |
<div>
|
7 |
<img class="photo" src="photo2.jpg"/> |
8 |
</div>
|
9 |
|
10 |
<div>
|
11 |
<img class="photo" src="photo3.jpg"/> |
12 |
</div>
|
13 |
|
14 |
<div>
|
15 |
<img class="photo" src="photo4.jpg"/> |
16 |
</div>
|
17 |
</div>
|
Sa code na nasa itaas, bawat <div>
element sa loob ng my_flip_book
ay katumbas sa isang pahina ng flip book.
Maaring mapuna mo rin na mayroon class
named photo
associated sa bawat <img>
element. Gamit ang class, mabilis
mong matutukoy kung gaano kalaking larawan ang gusto mo. Halimbawa, kung nais mong sakupin ng
larawan ang kabuuan ng pahina, habang sinisiguro ang ayos ng proporsyon ay
hindi magbabago,maari mong gamitin ang mga sumusunod na CSS rule:
1 |
<style>
|
2 |
.photo { |
3 |
width: 100%; |
4 |
}
|
5 |
</style>
|
Tulad ng natutunan mo sa nakaraang
hakbang, dapat mo nang anyayahan ang wowBook()
pamamaraan para lumikha ng
flipbook. Sa pagkakataon na ito,gayunpaman,hindi mo na kailangan ng pdf
opsyon
dahil ang mga nilalaman ng flip book ay tinukoy na sa iyong HTML code.
1 |
<script>
|
2 |
$("#my_album").wowBook({ |
3 |
container: true, |
4 |
containerHeight: 670, |
5 |
containerWidth: 940 |
6 |
});
|
7 |
</script>
|
Ganito na ngayon ang dapat maging itsura ng flip book:



Kung wala kang kahit anong nakakawiling mga larawan nakahanda, maari kang mag-download ng ilan mula sa PhotoDune o Pexels..
Ang WowBook ay maaring lumikha ng
hardcover flip books din.Kapag itinakda mo ang hardcovers
option sa true
,ang
plugin ay mag-aplay ng alternatibong animation sa una at huling mga pahina,
kung saan ay magmumukhang tila hindi gaanong makulot at mas matigas.



4. Pagdadagdag ng Toolbar
Pinahihintulutan ng WowBook na magdagdag
ka ng toolbar na naglalaman ng iba’t-ibang navigation kontrols sa iyong flip
book. Para likhain ang toolbar, dapat ay gamitin mo ang toolbar
opsyon at
tukuyin ang mga pangalan ng mga kontrol na nais mo,sa kaayusan na gusto mo
silang makita. Opsyonal, maari mong gamitin ang
toolbarPosition
opsyon para tukuyin kung saan mo nais itong makita.Sa ngayon,
ang opsyon na ito ay sumusuporta lamang sa dalawang kahulugan: top
o bottom
.
Halimbawa, ang sumusunod na code ay lumilikha ng toolbar na may apat na kontrol, na ipinakikita sa ibaba ng flip book:
1 |
$("#my_album").wowBook({ |
2 |
container: true, |
3 |
containerHeight: 670, |
4 |
containerWidth: 940, |
5 |
hardcovers: true, |
6 |
toolbar: "back, next, first, last", |
7 |
toolbarPosition: "bottom" |
8 |
});
|
Narito kung paano ang itsura ng toolbar:



Bilang karagdagan sa buttons para sa
navigation,ang iyong toolbar ay maaring magdagdag ng buttons na nagpapahintulot
sa mga users na madaling maibahagi ang iyong flip book sa[], at iba pang sikat
na social networking platforms. Upang ipakita ang mga ganoon
buttons,dapat mong gamitin ang share
opsyon. Bukod pa rito, dapat kang
magdagdag ng “share” string sa toolbar
opsyon. Ang sumusunod na mga code ay
ipinakikita sa iyo kung paano:
1 |
$("#my_album").wowBook({ |
2 |
container: true, |
3 |
containerHeight: 670, |
4 |
containerWidth: 940, |
5 |
hardcovers: true, |
6 |
toolbar: "back, next, first, last, share", |
7 |
toolbarPosition: "bottom", |
8 |
share: "twitter, facebook, reddit" |
9 |
});
|
Ipapakita na ngayon ng toolbar ang icons
ng mga social networks na iyong binanggit sa share
opsyon.



5. Paglikha ng Talaan ng Nilalaman
Kung ikaw ay magpapakita ng flip book na may maraming pahina,maaring naisin mo na ang iyong mga users ay lumundag sa kahit anong pahina na ninanais nila gamit ang panel na nagpapakita ng talaan ng nilalaman. Upang lumikha ng ganoon panel,kakailanganin mo ng JavaScript array,bawat elemento kung saan ay may kaugnay na pamagat na may numero sa pahina.
Narito ang halimbawa ng ayos na nagbibigay ng mga pamagat sa lahat ng apat na pahina ng flip book na ating nilikha ng nauna.
1 |
var tableOfContents = [ |
2 |
["Eiffel Tower", 0], |
3 |
["Breakfast", 1], |
4 |
["Snowy Day", 2], |
5 |
["Mountains", 3], |
6 |
];
|
Gaya ng nakikita mo, bawat bagay na nasa itaas na ayos ay mismong isang ayos,kung saan ang unang elemento ay ang titulo at pangalawang elemento ay ang numero ng pahina.
Upang iugnay ang ayos sa iyong flip
book, dapat mong gamitin ang toc
opsyon. Sa karagdagan, dapat mong tandaan na
itakda alinman ang displaytoc
opsyon sa true
o magdagdag ng string toc
sa
ang toolbar
opsyon. Kung hindi man, ay hindi makikita ng mga users ang talaan ng
nilalaman.
1 |
$("#my_album").wowBook({ |
2 |
container: true, |
3 |
containerHeight: 670, |
4 |
containerWidth: 940, |
5 |
hardcovers: true, |
6 |
toolbar: "back, next, first, last, toc", |
7 |
toolbarPosition: "bottom", |
8 |
displayToc: true, |
9 |
toc: tableOfContents |
10 |
});
|
Narito ang itsura ng panel na nagpapakita ng talaan ng nilalaman:



6. Paglikha ng isang Slide Show
Sa pamamagitan ng pagtakda ng slideshow
opsyon sa true
,maari mo nang palitan ang iyong flip book upang maging animated
slide show. Sa mode na ito,ang WowBook ay awtomatikong maglipat sa lahat ng
pahina ng iyong flip book.Sa default nito,bawat pahina ay ipinakikita sa loob
ng isang Segundo lamang. Para palitan
ang tagal nito, maari kang gumamit ng slideShowDelay
. Sa karagdagan,
kung nais mo na ang plugin ay i-restart ang slide show pagkatapos na ang huling
pahina ay naipakita,itakda ang slideShowLoop
opsyon sa true
.
Ang mga sumusunod na halimbawang code ay lumilikha ng paulit-ulit na slide show kung saan ang bawat pahina ay ipinakikita sa loob ng tatlong segundo:
1 |
$("#my_album").wowBook({ |
2 |
container: true, |
3 |
containerHeight: 670, |
4 |
containerWidth: 940, |
5 |
slideShow: true, |
6 |
slideShowDelay: 3000, |
7 |
slideShowLoop: true |
8 |
});
|
Konklusyon
Ngayon ay alam mo na kung paano lumikha ng animated flip book gamit ang WowBook jQuery plugin. Sa pagtuturong ito,natutunan mo rin kung paano mabilis na bumuo ng talaan ng nilalaman at intuitive toolbar para sa iyong flip book.
Para higit pang matutunan ang tungkol sa plugin,sumangguni sa malawak na dokumentasyon at mga halimbawa na mayroon sa ZIP file na iyong na-download. Dahil ang WowBook ay mayroong anim na buwan na libreng suporta,maari ka rin makipag-ugnayan sa may-akda, maguiar01, para sa karagdagang tulong.