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):
<head>
<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">


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:

<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 thankful for any help.
/broderi