3D FlipBook - Lightbox

@{ var FlipBookContent = Model.Value>("lightBoxContent");

int i = 1;
string BookNo = "BookNo";

<div class="row">
    @foreach(var item in FlipBookContent)
    {

    BookNo = BookNo + i;

    var PDFUrl = item.Value("pDFURL");
    var PDFCover = item.Value("frontPageImg");
    var PDFTitle = item.Value("Title");

      <div class="col-2 thumbnail">
        <img src="@PDFCover.Url" alt="Condo Living - Party in your place" />
        <div class="caption">
          @PDFTitle
        </div>
      </div>
    }
</div>

script type="text/javascript"

    booksOptions = {

    BookNo1: {pdf: '/media/ioxjfqcl/outlook_winter_2018.pdf',}, 
    BookNo11: {pdf: '/media/l4nc1uvm/outlook_spring_summer_2018.pdf',},
    BookNo111: {pdf: '/media/t1dfmcqc/outlook_winter-2017.pdf',},
      template: { html: '/3d-flip-book/templates/default-book-view.html',
      styles: [
            '/3d-flip-book/css/short-black-book-view.css'
          ],
          links: [{
            rel: 'stylesheet',
            href: '/3d-flip-book/css/font-awesome.min.css'
          }],
          script: '/3d-flip-book/js/default-book-view.js',
          sounds: {
            startFlip: '/3d-flip-book/sounds/start-flip.mp3',
            endFlip: '/3d-flip-book/sounds/end-flip.mp3'
          }
        },
    }

    i = i + 1;

}

Normally the script would be in tags but to get the code to show this is how I have had to do it.

This method works, the top part above the script compiles in the CMS and shows 3 different PDFs.

The bottom part is manual, I cannot figure out how to get the bookNo into the book options using the CMS.

Does anyone have any ideas?

Got it to work. Except the flip sound does not work now but I can live with that

Fixed i created a new variable in the Umbraco code to create the JS i needed and then inserted in the javascript which worked :D