| |
| |
Add the following points to web
page
|
Notes
|
 |
|
| 1. |
Folder
'two_groups_of_slides_move_vertical_files' stores
group of pictures
|
| 2. |
at HTML
Source of web page add this Javascript text
<SCRIPT
type=text/javascript>
//2 groups of slides, move
vertical
var fadeimages=new
Array()
fadeimages[0]=["two_groups_of_slides_move_vertical_files/32_125m.jpg",
"", ""] //plain image
syntax
fadeimages[1]=["two_groups_of_slides_move_vertical_files/2501_125m.jpg",
"", ""] //plain image
syntax
fadeimages[2]=["two_groups_of_slides_move_vertical_files/2470_125m.jpg",
"", ""] //plain image syntax
var fadeimages2=new
Array() //2nd array set example. Remove or add more sets as
needed.
//SET IMAGE PATHS. Extend or contract array as
needed
fadeimages2[0]=["two_groups_of_slides_move_vertical_files/2124_125m.jpg",
"", ""] //plain image
syntax
fadeimages2[1]=["two_groups_of_slides_move_vertical_files/5123_125m.jpg",
"", ""] //plain image
syntax
fadeimages2[2]=["two_groups_of_slides_move_vertical_files/3267_125m.jpg",
"", ""] //plain image syntax
var
fadebgcolor="#f1f0e4"
////NO need to edit beyond
here/////////////
var fadearray=new Array() //array to
cache fadeshow instances
var fadeclear=new Array() //array
to cache corresponding clearinterval pointers
var
dom=(document.getElementById) //modern dom browsers
var
iebrowser=document.all
function fadeshow(theimages,
fadewidth, fadeheight, borderwidth, delay, pause,
displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10
//initial opacity degree
(10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if
(typeof
displayorder!="undefined")
theimages.sort(function()
{return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter)
:)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new
Array() //preload images
for
(p=0;p<theimages.length;p++){
this.postimages[p]=new
Image()
this.postimages[p].src=theimages[p][0]
}
var
fadewidth=fadewidth+this.imageborder*2
var
fadeheight=fadeheight+this.imageborder*2
if
(iebrowser&&dom||dom) //if IE5+ or modern browsers
(ie: Firefox)
document.write('<div
id="master'+this.slideshowid+'"
style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div
id="'+this.canvasbase+'_0"
style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div
id="'+this.canvasbase+'_1"
style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img
name="defaultslide'+this.slideshowid+'"
src="'+this.postimages[0].src+'"></div>')
if
(iebrowser&&dom||dom) //if IE5+ or modern browsers
such as
Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()",
this.delay)
}
}
function fadepic(obj){
if
(obj.degree<100){
obj.degree+=10
if
(obj.tempobj.filters&&obj.tempobj.filters[0]){
if
(typeof obj.tempobj.filters[0].opacity=="number") //if
IE6+
obj.tempobj.filters[0].opacity=obj.degree
else
//else if
IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else
if
(obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else
if
(obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")?
obj.canvasbase+"_0" :
obj.canvasbase+"_1"
obj.tempobj=iebrowser?
iebrowser[obj.nextcanvas] :
document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj,
obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)?
obj.nextimageindex+1 :
0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()",
obj.delay)
}
}
fadeshow.prototype.populateslide=function(picobj,
picindex){
var slideHTML=""
if
(this.theimages[picindex][1]!="") //if associated link exists
for image
slideHTML='<a
href="'+this.theimages[picindex][1]+'?PHPSESSID=cdb9b24aed233347a6ff3c7840a66373"
target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img
src="'+this.postimages[picindex].src+'"
border="'+this.imageborder+'px">'
if
(this.theimages[picindex][1]!="") //if associated link exists
for
image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if
(this.pausecheck==1) //if pause onMouseover enabled, cache
object
var cacheobj=this
if
(this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()},
100)
else if
(iebrowser&&dom||dom){
this.resetit()
var
crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] :
document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")?
this.canvasbase+"_1" :
this.canvasbase+"_0"
}
else{
var
ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)?
this.curimageindex+1 :
0
}
fadeshow.prototype.resetit=function(){
this.degree=10
var
crossobj=iebrowser? iebrowser[this.curcanvas] :
document.getElementById(this.curcanvas)
if
(crossobj.filters&&crossobj.filters[0]){
if (typeof
crossobj.filters[0].opacity=="number") //if
IE6+
crossobj.filters(0).opacity=this.degree
else //else
if
IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else
if
(crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else
if
(crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}
fadeshow.prototype.startit=function(){
var
crossobj=iebrowser? iebrowser[this.curcanvas] :
document.getElementById(this.curcanvas)
this.populateslide(crossobj,
this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW
SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var
crossobjcontainer=iebrowser?
iebrowser["master"+this.slideshowid] :
document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
</SCRIPT>
Note:
name of 1st array of pictures:
fadeimages
name of 2nd array of pictures: fadeimages2
|
| 3. |
- from Table menu, select
Insert and then select Table ... , the Insert Table
dialog box appears, (size coordinates: 1 row and 2
Column) and then click ok. New Table display
- at Normal Source of web page,
right click 1st
cell of this Table created, on the shortcut menu
click Cell Proprieties, the Cell Proprieties
dialog box appears, select the Horizontal
alignment combo box to value
Center, select the Vertical alignment combo box
to value Top,
and then click ok
- at Normal Source, into the
1st cell:
- at Normal Source, into
the 1st cell add Table, from Table
menu, select Insert and then select
Table ... , the Insert Table dialog box
appears, (size coordinates: 1 row and 1 Column) and
then click ok. New Table display
- at Normal Source,
right
click this Table created, on the shortcut
menu click Table Proprieties, the Table
Proprieties dialog box appears, selsct
Alignment combo box to
value Center, type 0 into
Size TextBox, uncheck Specify width
and then click
ok
- at Normal Source,
right
click the cell of this
Table, on the shortcut menu click Cell
Proprieties, the Cell Proprieties dialog
box appears, select the Horizontal alignment
combo box to value
Center, and then click ok
- at Normal Source,
select this table
- at HTML source, appears the
place selected at the previous point ( Table
selected at Normal Source)
<td
width="100%"
align="center"> </td>
- at HTML source, replace
previous HTML text (<td
width="100%"> </td>) by
the following HTML text, (color of
old text - red, color of
new text - black)
<td width="100%"
align="center">
<SCRIPT
type=text/javascript>
//new
fadeshow(IMAGES_ARRAY_NAME, slideshow_width,
slideshow_height, borderwidth, delay, pause
(0=no, 1=yes), optionalRandomOrder)
new
fadeshow(fadeimages, 180,125, 3, 4000, 1,
"R")
</SCRIPT>
</td>
Note:
name of array of pictures:
fadeimages
| |
- at Normal Source, into the
2nd cell:
- at Normal Source, into
the 2nd cell add Table, from Table
menu, select Insert and then select
Table ... , the Insert Table dialog box
appears, (size coordinates: 1 row and 1 Column) and
then click ok. New Table display
- at Normal Source,
right
click this Table created, on the shortcut
menu click Table Proprieties, the Table
Proprieties dialog box appears, selsct
Alignment combo box to
value Center, type 0 into
Size TextBox, uncheck Specify width
and then click
ok
- at Normal Source,
right
click the cell of this
Table, on the shortcut menu click Cell
Proprieties, the Cell Proprieties dialog
box appears, select the Horizontal alignment
combo box to value
Center, and then click ok
- at Normal Source,
select this table
- at HTML source, appears the
place selected at the previous point ( Table
selected at Normal Source)
<td
width="100%"
align="center"> </td>
- at HTML source, replace
previous HTML text (<td
width="100%"> </td>) by
the following HTML text, (color of
old text - red, color of
new text - black)
<td width="100%"
align="center">
<SCRIPT
type=text/javascript>
//new
fadeshow(IMAGES_ARRAY_NAME, slideshow_width,
slideshow_height, borderwidth, delay, pause
(0=no, 1=yes), optionalRandomOrder)
new
fadeshow(fadeimages2, 180, 125,3, 3000,
0,"R")
</SCRIPT>
</td>
Note:
name of array of pictures:
fadeimages2
| | |
| |
| | |
