Manol Posted May 10, 2013 Share Posted May 10, 2013 I let here some code in an early stage, is a turn page, here is an example <?php include("./head.inc"); ?> <style> /*---------------------------- Styling the magazine -----------------------------*/ #magazine{ width:800px; height:520px; margin:0 auto; position:relative; left:0; opacity:0; -moz-transition:0.3s left; -webkit-transition:0.3s left; transition:0.3s left; } #magazine .page{ width:520px; height:520px; background-color:#ccc; overflow:hidden; } /* Center the magazine when the cover is shown */ #magazine.centerStart{ left:-260px; } /* Center the magazine when the last page is shown */ #magazine.centerEnd{ left:260px; } .page img{ height:520px; width:520px; display:block; } .centerStart .turn-page-wrapper:first-child{ box-shadow:0 0 10px #040404; } /* Page Numbers */ span.pageNum{ background-color: rgba(0, 0, 0, 0.3); bottom: 25px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); color: #FFFFFF; font-size: 11px; height: 24px; line-height: 22px; opacity: 0.9; position: absolute; text-align: center; width: 55px; } span.pageNum.left{ left:0; right:auto; } span.pageNum.right{ left:auto; right:0; } /* Hide the page number on the cover */ #page1 .pageNum{ display:none; } </style> <!-- catalog page flip neccesary files--> <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/turn.js"></script> <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/script.js"></script> <div id="magazine" class="centerStart"> <?php $paginasCatalogo = $page->imagenes_catalogo; $index = 0; foreach ($paginasCatalogo as $pagina){ $index++; echo "<div id='page{$index}' class='page'>". "<div class='img{$index}'>". "<span class='pageNum right'>{$index}</span>". "<img src='$pagina->url' alt='' />". "</div>". "</div>"; } ?> </div> <?php include("./foot.inc"); ?> 1 Link to comment Share on other sites More sharing options...
Manol Posted May 20, 2013 Author Share Posted May 20, 2013 Hello roelof. Check this line of code. $paginasCatalogo = $page->imagenes_catalogo; It will load just images. Imagine you create a page with the name of magazine, there you upload images in my case I choose "imagenes_catalogo" as the images field. Link to comment Share on other sites More sharing options...
roelof Posted May 20, 2013 Share Posted May 20, 2013 Thanks, So if I can these line to my articles I will work. I hope you can help me with another "problem" Can I have a prev - next link for flipping instead of the corner of a page ? Roelof Link to comment Share on other sites More sharing options...
Manol Posted May 20, 2013 Author Share Posted May 20, 2013 Hello Roelof. You can do that for a right arrow: <img id="arrowright" src="/yourfolder/arrowright.png" width="64" height="64" /> and than, $("#arrowright").click(function() { $('#magazine').turn('next'); }); same process for left arrow $("#arrowleft").click(function() { $('#magazine').turn('previous'); }); If you want to use left and right keyboard arrows: $(window).bind('keydown', function(e){ if (e.keyCode==37) $('#magazine').turn('previous'); else if (e.keyCode==39) $('#magazine').turn('next'); }); Hope it helps. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now