Valentijnsweek

by bluesweater

HTML

<div class="magazineContainer">

	<div class="pagesContainer">
	
		<!-- FRONT COVER -->
  		<!-- Change the url() to your front cover URL -->
  		<div id="page_0" class="pages">
      
      <div align="left"><img src="https://imgur.com/PbyYL7I.gif" alt=""></div>
      
  			<div class="goForth next arrow" style="color: #FFF;"><span class="arrowSize">→</span></div>
 		</div>

		<!-- Below is the first page of the magazine, notice the first line says 'page_1'-->
  		<!-- Your image should be 688px in width and 500px in height -->
  		<!-- You can put the html from your layout and text between 'ARTICLE START' and 'ATICLE END' --> 

  		<!-- PAGE 1 -->
  		<div id="page_1" class="pages">
			<!-- Article Start -->
      <div style="overflow: hidden; width: 688px; height:600px"><iframe style="overflow: hidden; margin-top: -58px; margin-left: -8px;" src="//jsfiddle.net/Kofod/zxbf3se2//embedded/result" frameborder="0" width="700" height="1100"></iframe></div>
        			<!-- Article End -->

<div class="goForth back arrow" style="color: #000;"><span class="arrowSize">←</span></div>
		</div>

	

	</div>



<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">
  $( ".pages" ).hide();
  $( "#page_0" ).show();
  
  $( ".goForth.next" ).click( function goToNextPage() {
    $( this ).parent().hide();
    var parentPage = $( this ).parent().attr( "id" ); 
    var trimmedparentPage = parentPage.substring( 5 ); 
    trimmedparentPage++;
    var nextPage = ( "#page_" + trimmedparentPage ); 
    $( nextPage ).show();
  } );
  
  
  $( ".goForth.back" ).click( function goToPrevPage() {
    $( this ).parent().hide();
    var parentPage = $( this ).parent().attr( "id" ); 
    var trimmedparentPage = parentPage.substring( 5 ); 
    trimmedparentPage--;
    var nextPage = ( "#page_" + trimmedparentPage ); 
    $( nextPage ).show();
  } );
</script>

<script type="text/javascript">
	var css = document.createElement("style");
	css.type =...