Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adjusting a script for simulating pageflips

    Hello,
    I have found a nice script for simulating turning pages (images) on a website. The problem is that I would like to modify it a bit, but can't figure out how to do. I'm not used to programming javascripts, usually I just copy and paste scripts. I'm not working with this commercially.

    The script is called jpageflip
    http://page-flip-book.com/free-jquer...ins-jpageflip/

    I use it like this (I have combined it with the script highslide, to open every new "book" in a new highslide window):

    Code:
    <head>
    <link rel="stylesheet" type="text/css" href="highslide/highslide.css" /> 
    <script type="text/javascript" src="highslide/highslide-with-html.js"></script>
    
      <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jpageflip-0.9.7.js"></script>
     
         <script type="text/javascript">
         window.onload = pageIsLoaded(); 
         function pageIsLoaded() {
        $(document).ready(function(){
             $('#myPageFlip').jPageFlip({
                 width: 486,
                 height: 442,
                 top: 0,
                 left: 0,
                 startPage : 1
               });
             });
       } // pageIsLoaded
    </script>
    
    <div> <a href="#" onclick="return hs.htmlExpand(this)"><img src="thumbs/01.jpg"></a> 
         		<div class="highslide-maincontent" id="myPageFlip" style="width:972px; height:442px; overflow:hidden;">
    
         <img src="images/image11.jpg" class="jPageFlip">
         <img src="images/image12.jpg" class="jPageFlip">
         <img src="images/image13.jpg" class="jPageFlip">
    
    </code>
    
    But I want to have several links to jpageflip "books" on the same page.
    I couldn't see why it would be a problem, but when I tried to do this:
    
    <code>
    
    <head>
         <script type="text/javascript">
         window.onload = pageIsLoaded(); 
         function pageIsLoaded() {
        $(document).ready(function(){
             $('#myPageFlip1').jPageFlip({
                 width: 486,
                 height: 442,
                 top: 0,
                 left: 0,
                 startPage : 1
               });
             });
       } // pageIsLoaded
    </script>
    
         <script type="text/javascript">
         window.onload = pageIsLoaded(); 
         function pageIsLoaded() {
        $(document).ready(function(){
             $('#myPageFlip2').jPageFlip({
                 width: 486,
                 height: 442,
                 top: 0,
                 left: 0,
                 startPage : 1
               });
             });
       } // pageIsLoaded
    </script>
    </head>
    
    <body>
    
    <div> <a href="#" onclick="return hs.htmlExpand(this)"><img src="thumbs/01.jpg"></a> 
         		<div class="highslide-maincontent" id="myPageFlip1" style="width:972px; height:442px; overflow:hidden;">
    
         <img src="images/image11.jpg" class="jPageFlip">
         <img src="images/image12.jpg" class="jPageFlip">
         <img src="images/image13.jpg" class="jPageFlip">
    
    <div> <a href="#" onclick="return hs.htmlExpand(this)"><img src="thumbs/02.jpg"></a> 
         		<div class="highslide-maincontent" id="myPageFlip2" style="width:972px; height:442px; overflow:hidden;">
    
         <img src="images/image21.jpg" class="jPageFlip">
         <img src="images/image22.jpg" class="jPageFlip">
         <img src="images/image23.jpg" class="jPageFlip">
    
    </body>
    it didn't work. Only the first link was working.

    Does anyone see if there is a simple way to adjust the code in <head> or <body> to achieve multiple links working? Or do you think the js-file has to be adjusted?
    Is it possible to replace id="myPageFlip" with some kind of list? I'm not comfortable with writing javascript, and would be very grateful for any help. Thanks!
    /broderi
    Last edited by VIPStephan; 04-23-2013 at 09:41 AM. Reason: corrected code BB tags


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •