PDA

View Full Version : I need help bad getting this slideshow in


nwcountry
06-02-2011, 06:55 PM
from Fireworks to Dreamweaver. Seems such a simple deal, followed the instructions etc.

Is anybody will to work with me for a bit to see if I can get it operating?

My website is tocatchamiracle.com

I used the "Command" "Create Slideshow" in Fireworks.

d a v e
06-02-2011, 07:45 PM
why not use something like this
http://www.huddletogether.com/projects/lightbox2/
or have look on http://www.dynamicdrive.com/

DWcourse
06-02-2011, 09:00 PM
I'm not help with Fireworks code and my recommendation would be a jquery-based solution like dave recommends. However they can be a bit confusing to implement. I've got a Colorbox (another jquery slideshow) tutorial at http://www.dwcourse.com/dreamweaver/colorbox-jquery-slideshow.php.

nwcountry
06-02-2011, 09:07 PM
Ok thanks you guys, I didn't have my email open so didn't but just now get these. I'll give it a go and look at your info as well JC.

Denise

nwcountry
06-02-2011, 09:09 PM
why not use something like this
http://www.huddletogether.com/projects/lightbox2/
or have look on http://www.dynamicdrive.com/


There's one on Dynamic Drive I want bad but I can't ever get it to work. It's the tiny flip book one. If anyone is here can you talk to me about it? I really love it more than any I've seen and it's nice and small. Denise

nwcountry
06-02-2011, 09:41 PM
http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

My writing is all in red from now on down:)

First I'll say I don't know where to save that little box. Does that go in my website folders, the same place I put images that will be on my site?


You now need to change the width and height of the "placeholder.gif" image above using the preset formula
placeholder width: 2*book image width+4
placeholder height: book image height+2


On the above, does that mean to change the size from 144 to 148 width and the height from 227 to 229? I mean, it's confusing how they write the instruction. Also, they talk about placing the main code in the "body" which is actually the "content" part of my webpage in my index.html.

Then on the below it says place "inside" the <body> tag itself. I thought it was all cut and dry but when I do this it doesn't work. I get a little transparent sort of flipping book with no images and only blue questions marks.
<body onload="ImageBook()">

<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",
"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
);

/***************** DO NOT EDIT BELOW **********************************/
var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_D irection=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.z Index=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Heig ht+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_W idth+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_W idth+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_I mage_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Im age_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_I mage_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Imag e_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.ln k}
function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
</script>
I see below is where I change the width and height
<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">Dynamic Drive</a></font></p>

nwcountry
06-03-2011, 12:16 AM
everytime I put this(<body onload="ImageBook()"> ) part in anywhere between body tags I get this error:

There is a syntax error on Line 130(. code hinting may not work until it is fixed.

Denise, Im toast

DWcourse
06-03-2011, 01:39 AM
<body onload="ImageBook()">

Is supposed to be the opening body tag not between the body tags. I suspect line 130 is near the end of your file where having an unclosed (and extra) body tag gets noticed by the DW built in validation.

Again, you are trying to run before you've learned to walk.

johnMoss
06-03-2011, 02:00 AM
Hi D,
Havin fun yet :) Allright lets get going,
First out, take a break, have a cigarette, and then come back and start reading the script from the reference page.
1) Where to put gif: If you read the script, it just calls for it, but assumptions get made by the people who write this stuff up, and they left the source link empty by default. Right now as it is written, you would put the gif image in the root directory, i.e. the same directory your page is in. That's messy, so yes, go ahead and put it in your images folder, and then rewrite that line of code.

<img src="placeholder.gif" width="144" height="227">

becomes

<img src="images/placeholder.gif" width="144" height="227">

Start with that, back in a sec

johnMoss
06-03-2011, 02:05 AM
What Jim means is you have a <body> tag up topside. Go back and look at your resource page again. It's telling you to insert into the tag. so

<body> becomes <body onload="ImageBook()">