Need help with my code for Book Flip Slideshow

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hi Boomer, Lee or anyone that knows about codes for slideshows in Dynamic Drive. I have about 12 photos loaded in and there is something wrong in my code I believe. The code below is where I fill in my URL's(images). You can also see on my site, fromheretoeden.com. I think all my images are put into the code alright as well as the bottom part re: placeholder width and height. But I didn't know whether or not I was supposed to leave in the URL's for the dynamicdrive.com, javascriptkit.com and the other //this slide isn't linked and //NOTE No comma after last line); So my code with all 12 images is below this first one from (http://www.dynamicdrive.com/dynamicin...:

Book_Image_Sources=new Array(
"","http:Book_Image_Sources=new Array(
"photo1.jpg","http://www.dynamicdrive.com",
"photo2.jpg","http://www.javascriptkit.com",
"photo3.jpg","", //this slide isn't linked
"photo4.jpg","http://www.codingforums.com" // NOTE No comma after last line
);

Here:

Book_Image_Sources=new Array(
"http://fromheretoeden.com/resources/i...,
//this slide isn't
linked"http://fromheretoeden.com/resources/i...
NOTE No comma after last line);

If anyone can see where I messed up I would so appreciate you pointing it out for me, thank you so much, Denise;)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
  • hopeful!!

Posted 9 years ago

  • 1
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Denise,

did you happen to take out the <!-- <script type="text/javascript"> and </script> --> and the start and end of the code?
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hi Connor, thank you and let me go check right quick, denise:)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
It's there Connor. Can you see the code I copied from Dynamic Drive? It has the
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
oh weird, half my message isn't showing, not from my end of the www anyway, LOL! Shoot, what did I write, oh yeah. The <script info is there both opening and closing.
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Sorry Denise, I just have to go to bed. I will look at it in the morning, or is that your nighttime?..Nite!
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
It's funny because I loaded up just 4 pics and it worked except for whatever reason, it only showed 2 pics in the "show". So then, I just decided to put all the images in and now it doen't appear to be working. I am laying off for the evening too as I have to go to dinner. Ty all, I appreciate the help I always find here at Yola;) Denise
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Denise

Sometimes certain codes contain within them several instances of <! -- and ->and that mere fact can make pasting it into the forums a challenge as the code is not complete once viewed. To get around this I recommend pasting it into a text widget on a new page of your website and posting the URL here for us to look at...

Ed
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok Ed, thank you much, lets give it a whirl;) Denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok Ed, here is the URL to my test-page:

http://www.fromheretoeden.com/test-pa...

Hope I did it right and it shows up ok, Denise
thank you much:)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
oh no problem Connor, I hope you sleep well:) I just appreciate you replying;) Denise
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
You know I think that I lived a mere 5 miles from one of those images of the coast. I called Yachats home for 20 years... I think that I recall that view just to the south of the city...
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
I love that area of the coast, actually, I love all of it, lol;) What took you away from there? I hope to live there again soon:) I live inland now and I really miss it;) Denise
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
OK Denise

I see firstly that you do not have the placeholder image uploaded to your file manager (see http://www.dynamicdrive.com/dynamicin... to save the little white image)

Secondly your two middle images don't seem to have been uploaded or the incorrect URL's are listed.





I am sure that you will get it sorted out soon...
Ed

You can find me with my head in the honey pot here..

You can find many of my threads here... Just look for the light bulbs
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hi Ed, I do have the placeholder file loaded up under my images, it's just 80B so it must be way tiny. But it is there. the other items I will take care of and thank you sooooooooooo much. Another set of eyes sure can come in handy, not to mention another brain, LOL! Ttys, denise:)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok, gonna call it a night Ed, I did check all, even typed in JPG instead of jpg because some files saved like that and I didn't notice. Thought that might make a diff. Also, I tried placeholder.gif with just resources/images/placeholder.gif, and, with the whole URL http://fromheretoeden.com/resources etc. Still no go. I am going to unload those two files though, the lilacs and the desert because when I had it working earlier today?? Those 2 were not showing, only the other 2 so I think there lies the prob. Ty so much, again, and see you 'round the forums;) Denise
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Denise

I may be able to assist you with this. First of all.. to answer your question:
But I didn't know whether or not I was supposed to leave in the URL's for the dynamicdrive.com, javascriptkit.com


- No.. you do not need to leave those links in. You're supposed to replace those links with your own - BUT, only if you want your images to link to a page. If you don't want the images to link, then just leave as "".

Can you post the url where you have this book flip slideshow? Then, I can see what is going on. Thanks Denise. ~ Littleus
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
ty little, I appreciate the info on those files. The instructions didn't include what to do with those, leave them there or take them out. The rest is pretty much taken care of thanks to Ed. I'll give er a go and see you all tomorrow:) Sweet dreams, denise PS Or, have a great day if you are on the other side of the planet;)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ohhhhhhhhhhh bummer, I just re-read instructions at Dynamic Drive and they want you to put this code, within the actual body "tag". Which if I am understanding it, that means I can't use this Flip Book on Yola because I can't insert code into the tag itself:( There is just one thing about it. I actually had 2 pics uploaded and the book was working?? My sister even viewed it on her puter and she is in another City? Any ideas?? Help! LOL:) Denise

PS fromheretoeden.com

PSS Here is the test-page where I inserted the code from Dynamic Drive into a text
widget. Thank you in advance to anyone that might be able to help me.
http://www.fromheretoeden.com/test-pa...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Denise

Step 1: Place this code in 1 HTML widget:
<script type="text/javascript">

/***********************************************
* Book Flip slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
Create a div with transparent place holder in your html
<div id="Book" style="position:relative">
<img src="placeholder.gif" width="144" height="227">
</div>
width = 2*book image width +4 height = book image height+2

Insert onload in body tag
<body onload="ImageBook()">
*********************************************************/

// 7 variables to control behavior
var Book_Image_Width=140;
var Book_Image_Height=225;
var Book_Border=true;
var Book_Border_Color="gray";
var Book_Speed=15;
var Book_NextPage_Delay=1500; //1 second=1000
var Book_Vertical_Turn=0;

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

Book_Image_Sources=new Array(
"photo1.jpg","http://www.dynamicdrive.com&quot;,
"photo2.jpg","http://www.javascriptkit.com&quot;,
"photo3.jpg","", //this slide isn't linked
"photo4.jpg","http://www.codingforums.com&quot; // NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

function ImageBook(){
if(document.getElementById){
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI);
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages()}}

function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;

setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}

function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}

function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
</script>

<div id="Book" style="position:relative">
<img src="placeholder.gif" width="144" height="227">
</div>

<p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com&quot;&gt;... Drive</a></font></p>

Step 2: Place this into another HTML widget

<body onload="ImageBook()">

Step 3: Change the image path below to your own image urls. This is found in your 1st HTML widget.

Book_Image_Sources=new Array(
"photo1.jpg","http://www.dynamicdrive.com&quot;,
"photo2.jpg","http://www.javascriptkit.com&quot;,
"photo3.jpg","", //this slide isn't linked
"photo4.jpg","http://www.codingforums.com&quot; // NOTE No comma after last line
);

Step 4: Be sure to change the image path to where you have your placeholder image. You'll find this near the top in your 1st HTML widget.

<div id="Book" style="position:relative"> <img src="resources/placeholder.gif" width="144" height="227">

Give that a whirl and see if it works out for you. Be sure to save. Please note that you may not see it working right away. Just hit your refresh button and it should come up.

If you want to see an example, please go here: http://littleustestsite.yolasite.com/...
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Thank you little, I will follow your instructions and go try this out. Thank you much for your time, denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
oh wowwwwwwwww! it is working perfectly on your testsite! I can't wait to explore how you did it and try it out, yeehaw:)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
I don't know what is happening to my posts here but I did write and thank you for all your time on this little:( I don't see the message though so all I can figure is my internet is just running so slow:( I think that is about 50% of my problem but I am so far out in the country I don't have a better option then what I am already using.

Thank you again though and I am off to try out your instruction;) denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hi Little, in Step 3, I am to put in my own URL's for pics but, I am not sure where "exactly". Do I put it in where it says "photo1.jpg" for example? Or where it says "http://www.dynamicdrive.com"? And also, I don't need to leave in the URL for dynamic drive or javascriptkit right? ty so much, denise
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You got it right the first time! =) It replaces the "photo1.jpg". The link "http://www.dynamicdrive.com" is for you to put your own link in if you want your picture to link to a particular page. You DO NOT have to have this. If you don't want the picture to link, then simply erase the link so that it ends up looking like "" (2 double quotes together).
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
thanks littleus, appreciate that:) I'm keeping notes on all I am learning and that way, next time around I will just have it all ready to refer to in one place;) Denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
nevermind other messages little it shows up. I don't see the forum saving my posts here. I did thank you though and appreciate your efforts so much, Denise:) PS If the other message shows up asking "where" to place my URLS disregard as I looked at your testsite pagesource, duh, LOL! I see how you did it, ty ty, denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hello little, it is working fabulously! I do have to tweak the size and now I am looking at adding the wood border which is part of my page "theme". If you see this and know how I might implement that I would appreciate your guidance. Although I am searching the web on "how to" and the yola forums re: borders on images etc.

I am so pleased and grateful. This site will be my only source of income and I am so praying I get it together soon. I just barter for my little, trailer I live in but no salary for my caretaking. I do love it here and I make it ok but I so want to be a success at affiliate marketing. I will be having ads to do with travel Accessories of all kinds;)

Thank you again for helping me in this enedeavor;) Denise

PS Would you tell me where I had gone wrong in my code little so I will know next time when I will surely want to build another slideshow;)?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Denise

I'm glad that you got the slideshow working. You will find with any slideshows that you may need to tweak it a little to fit your image sizes.

Now.. in regards to your wood border.. I'm not clear on what you're asking. This is what I see so far on your homepage:



Would you mind clarifying what you need assistance with? BTW.. it's looking really good! =D
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hi littleus, I am looking to have the same border as my other boxes around my slideshow, like Boomer has done at www.helderberg.cc. How to build a dropdown menu into that top border section is my next project:) Denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
I don't know why but some days I can view my slideshow, on my published site and others I can't. My sister can't either, like today. I don't know what is wrong but when I pull up Boomers site, it is always working. So it must be our puters here in Oregon, or internet. I really think the world of all of you but i am getting to where I don't want to try anymore. If I disappear you'll know why. I wish all of you the best with your sites:) Denise
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
Hi Denise....I see you are using Amazon for your general store...I had thought of doing a little of that also with them.I am curious to know how you like it.If you add any of their home decor items let me know and then our sites relate enough for linking.When you are ready I also know of places where you can list your products for free and they will link back to your product pages.Some places you can list free and just add your PayPal or Google Check Out info to sell right there on their sites.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Thank you John, I will keep in touch with you on that. I have not made anything on my Amazon store as I have not done any advertising of my site yet. I hope to have someone like Landsend, REI, or other stores that sell a lot of travel-type items to be affiliated with. When my site is done, if ever, I will fill out an application with one of those stores and see if I am accepted as an affiliate. Ttyl, denise;)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
It's been about 3 years ago when I asked here in the forums if anyone knew of a "pageturning" type code or program for our photos. Someone showed me an amazing little code that made a cute, small, magazine-like album for my photos. I have lost 2 computers since then though and I would sure love to find that again. I have a lot of fanicier software but everything seems so complicated or too big. Can anyone tell me about something like what I spoke of or maybe something similar I might try? Thank you so much, Denise

This reply was created from a merged topic originally titled
Flipping Magazine effect.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Wow, thanks, Dynamic Drive, outstanding help, thank you very much. Denise:)