Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

SlideShow Help

Status
Not open for further replies.

uniopp

Technical User
Oct 7, 2001
152
JP
Hello,
I'm having trouble modifying the following code to suite my needs.
Could someone please help me.
1/ How do I position it in my html using class="floatimgright" ? I want my text to rap around the images. At present the JS code positions the image but I would like my text to wrap around instead.
2/ Why does is generate an "undefined" error after displaying the third image?
Thank you.


Code:
<script language="JavaScript1.2">
var scrollerwidth='215px'
var scrollerheight='150px'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000

var slideimages=new Array()
slideimages[0]='<img src="image_0.jpg">'
slideimages[1]='<img src="image_1.jpg">'
slideimages[2]='<img src="image_2.jpg">'

var ie=document.all
var dom=document.getElementById

if (slideimages.length>2)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.top=parseInt(scrollerheight)
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.top=parseInt(scrollerheight)
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2_obj)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.top=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
tdiv2.style.top=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2_obj)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move4(second2_obj)",50)
}
else{
tdiv2.style.top=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move3(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=parseInt(scrollerheight)+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

</script>


<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>

<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">')
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>
 
I'm not entirely sure what you're asking. what is the
class="floatimgright"

How exactly do you want the text wrapped around? (It is probably best to put the image into a table with surrounding cells full of text)

When I ran this script, in both IE and Firefox, no error occured.
 
As far as I know, there is no way to code irregular shaped table cells using html so I have chosen to use
the class="floatimgright" and class="floatimleft" to position images in my table cell as follows -

Code:
<tr valign="top">
<td colspan="3" align="left">
<img src="[URL unfurl="true"]http://www.mydomain.com/images/image_1.gif"[/URL] width="106" height="150" class="floatimgright">
This is the text that is aligned on the left side of the table cell. When it hits the left side of the image (in the code above)
it wraps to the next line. Once the text clears the bottom of the image it will break to the next line when it hits the right side of the table cell.  
The next image (in the code below) will be aligned further down the page and on the left side of the table cell.
<img src="[URL unfurl="true"]http://www.mydomain.com/images/image_2.gif"[/URL] width="106" height="150" class="floatimgleft">
This text will start on the right side of the image and continue to the right of the table cell where it will break to the next line
and continue starting from the right side of the image and till it clears the bottom. It will then start from the left side of the table cell as usual.
</td>
</tr>

What I want to do is replace the first image (which is positioned on the right side of the cell using the class="floatimgright")
with the slide show as in my first post above.

Does that make more sense?
Any ideas how to do it?
Thank you.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top