javascript - Adding double pages to a turnjs "book" -

i have created website visitors can skim through book using turnjs. have pages jpgs of double pages , want them loaded dynamically.

here's code:

var flipbook = $('.flipbook');    flipbook.turn({      elevation: 50,      gradients: true,      autocenter: true,      pages: 118,      when: {        missing: function (e, pages) {          (var = 0; < pages.length; i++) {            var n = pages[i];            if(!$(this).turn('haspage',pages[i])) {              var pagenum = math.floor(pages[i] / 2) + 1,                  src="url(/pages/page_" + pagenum + ".jpg)",                  element = $('<div />',{'class': 'double', css:{backgroundimage:src}});              flipbook.turn('addpage',element,n);            }          }        }      }  });

<div class="flipbook">  <!-- insert content dynamically -->  </div>

unfortunately doesn't work want to, here's what's happening:

the code posted above inserts pages, every double page scaled 50% of width put on 1 page. example, on page 4 have should page 4 & 5 , on left page have same on right neighbor.

i changed last line flipbook.turn('addpage',element); hoping automatically add 2 pages, first page inserted .p113 , not .p1

i changed code

if(0 == n%2 && !$(this).turn('haspage',pages[i])) {   var pagenum = math.floor(pages[i] / 2) + 1,       src="url(/fileadmin/kollektion/2015/pages/page_" + pagenum + ".jpg)",       element = $('<div />',{'class': 'double', css:{backgroundimage:src}});       element.scissor();       flipbook.turn('addpage',element,n);   } } 

but resulted in getting left pages inserted.

so, what's best way dynamically add double pages using addpage? couldn't find in documentation or examples.

i solved it. since images pages put in background of <div>, trick add styles scale background images , position them accordingly:

.double{     background-size:200% 100%; }  .double.even {     background-position: 0% 0%; }  .double.odd {     background-position: 100% 0%; }