3D FlipBook - Lightbox

m***r@xpsplc.com
2021-03-17
2021-03-18

Hello,

I am trying to build your lightbox into an Umbraco solution.

I almost have it work but struggling on the book options Javascript.

I am using a nested element to bring in each book but that causes a loop.

I have a limited skill with Javascript so not sure how else I can do this, any advice is appreciated.

Alternative is there a different way? I am using the example from the free version as there was No version in the paid.

Thanks

Replies

m***r@xpsplc.com
2021-03-17
2021-03-17

@{ 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;

}
m***r@xpsplc.com
2021-03-17
2021-03-17

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?

m***r@xpsplc.com
2021-03-17
2021-03-17

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

m***r@xpsplc.com
2021-03-18
2021-03-18

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

Log In to leave a comment