repeater and pageFlip help

[Roych]

Hello,

I'm having some problems with repeater and PDF PageFlip. I'm using THIS script.

I have "Files" field (for single PDF) and "image" field (for first cover preview on a shelf) in repeater and all works great, if I add only one PDF to repeater. When I add another repeater item, second one doesn't work.

Not sure what I'm doing wrong. It looks normal on a shelf but does not open a pageflip PDF animation.

My code:

    <div class="bookshelf">
        <div class="covers">
	
			<?php foreach ($item->flipbook_repeater as $book) :?>				
				<?php $link =  $book->pdf_datoteka->first->url;?>
					<script type="text/javascript">
	
						$(document).ready(function () {
							$("#container").flipBook({

								pdfUrl:"<?=$link;?>",
							
								responsiveView: true,
								lightBox:true
							});
						})
					</script>
	
			<div  id="container" class="thumb book-<?=$sanitizer->name($book->single_image->filename);?>"><img src="<?=$book->single_image->url;?>"></div>
			<?php endforeach ;?>
        </div>
      
        <img class="shelf-img" src="https://www.my-site.com/site/templates/assets/plugins/flipquery/deploy/images/shelf_wood.png">
    </div>

I hope you understand what I mean here.

Thank you in adwance

R

[gebeer]

1 hour ago, Roych said:

<div  id="container"

You have this div inside a foreach. Which means that you get multiple div#container in your HTML which will not validate and might cause problems with JS. You can add unique ids to the id with something like

div  id="container-<?= $book->id ?>"

 and see if that helps.

[Gideon So]

Hi @Roych

You add the JS script within the foreach loop. That means the same script include jn the page many times. I think the JS script should reside outside the foreach loop.

Maybe place the script just before the closing body tag </body>.

Gideon

[Roych]

1 hour ago, gebeer said:

<?= $book->id ?>

Exactly what I neded it works great now thanks for helping 😉

 

21 minutes ago, Gideon So said:

You add the JS script within the foreach loop.

yes the url to the file is in js so not sure how to call it outside of the foreach for each link (if u know what I mean). With the changed ID (above) it is now working great. Not sure if it is the best way but, no problems so far.

R

[gebeer]

I think it is totally ok to instantiate the script multiple times within the foreach.