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:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="./wow_book/wow_book.min.js"></script>
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
<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:

<div id="my_flip_book">
</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.

<script>
  $("#my_flip_book").wowBook({
    pdf: 'sample.pdf'
  });
</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.

$("#my_flip_book").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 830,
  pdf: 'sample.pdf',
  containerBackground: '#333'
});

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.

<div id="my_album">
  <div>
    <img class="photo" src="photo1.jpg"/>
  </div>

  <div>
    <img class="photo" src="photo2.jpg"/>
  </div>

  <div>
    <img class="photo" src="photo3.jpg"/>
  </div>

  <div>
    <img class="photo" src="photo4.jpg"/>
  </div>
</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:

<style>
  .photo {
    width: 100%;
  }
</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.

<script>
  $("#my_album").wowBook({
    container: true,
    containerHeight: 670,
    containerWidth: 940
  });
</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:

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  hardcovers: true,
  toolbar: "back, next, first, last",
  toolbarPosition: "bottom"
});

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:

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  hardcovers: true,
  toolbar: "back, next, first, last, share",
  toolbarPosition: "bottom",
  share: "twitter, facebook, reddit"
});

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.

var tableOfContents = [
  ["Eiffel Tower", 0],
  ["Breakfast", 1],
  ["Snowy Day", 2],
  ["Mountains", 3],
];

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.

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  hardcovers: true,
  toolbar: "back, next, first, last, toc",
  toolbarPosition: "bottom",
  displayToc: true,
  toc: tableOfContents
});

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:

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  slideShow: true,
  slideShowDelay: 3000,
  slideShowLoop: true
});

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.