PDA

View Full Version : Flip Book "Images"... does NOT show up, on "newly" hosted Web Site



ggmoss
01-09-2013, 01:20 AM
1) Script Title: Flipbook Photo display

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

3) Describe problem: I have used the code (from the Script URL above) before, successfully. The code runs correctly on my old site:

http://www.ggmoss.com/showgreetingtableofcontent.html


I tried to copy this same code, into my "new" site at: http://www.ggmoss2.com/showgreetingtableofcontent.html

but NO images show up, or FLIP. My old site (ggmoss.com, without the "2") will disappear on January 10th!

Help! Can anyone help me see what I'm missing? Do I need something on the "new" server (that I missed)?

Thanks,
Gary Moss

jscheuer1
01-09-2013, 04:10 AM
The source code of the page at ggmoss2.com has had all of it's physical line breaks removed. It's just one long continuous unbroken line. With a few usually minor exceptions like spacing, HTML code will render the same regardless of whether or not the line breaks in its source code are preserved or not. But the script will not function like that.

The easiest thing would be to restore the physical line breaks, at least within the script. If that's not possible, then the script can be edited so that it can survive having all of its line breaks removed. That process can be a bit time consuming and can be tedious and generally requires a fair knowledge of javascript as semi-colons often need to be added at the end of many lines, but not all. If they're added to the end of the wrong lines, they will break the script just as much as it will if they're omitted from the end of certain other lines. All of that looks good though, the problem appears to be that the script contains end of line comments. These have to be converted to inline comments, otherwise they break the script. Use this version:


<script type="text/javascript">/*(c) Ger Versluis 2003*/

/********************************************************
Create a div with transparent place holder in your html
<div id="Book" style="position:relative">
<img src="graphics/pixel.gif" width="00" height="00">
</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=175;
var Book_Image_Height=140;
var Book_Border=true;
var Book_Border_Color="gray";
var Book_Speed=10;
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(
"photo01.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo02.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo03.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo04.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo05.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo06.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo07.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo08.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo09.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo10.jpg","http://www.ggmoss2.com/showslideshow.html",

"photo19.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo20.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo21.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo22.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo23.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo24.jpg","http://www.ggmoss2.com/showslideshow.html",

"photo26.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo27.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo28.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo29.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo30.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo31.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo32.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo33.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo34.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo35.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo36.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo37.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo38.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo39.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo40.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo41.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo42.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo43.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo44.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo45.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo46.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo47.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo48.jpg","http://www.ggmoss2.com/showslideshow.html",
"photo49.jpg","http://www.ggmoss2.com/showslideshow.html",


"photo50.jpg","http://www.ggmoss2.com/showslideshow.html" /* 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>

Hopefully that will take care of it. If not, let me know so I can see what happened.

ggmoss
01-10-2013, 01:06 AM
Thank you for your help John.
1. I upgraded my FileZilla FTP ap... but reFTPing didn't fix my site ("viewed" source code from my host's "uploaded" source code, had no line breaks)...
2. My code (on my laptop) was fine (complete, with line breaks in my source code), and ran correctly from my laptop...
but the hosting company wasn't interested in helping me "fix" what viewers (on the WWW) can see...
3. I tried using the hosting company's "clunky" html editing/coding ap, logged on to their site; but that didn't work...
4. Finally, I decided to try the host company's FTP ap, through their portal (not an ap you download, to your laptop)... it worked!
5. Now, I will keep coding on my laptop, and save the HTML; then I will log on to my hosting company's portal, and upload using their FTP "ap" (when needed).
Thank you for helping me come up with this "work around".
óGary Moss