|
|
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 | | |
|
| | |