Pure Software code
 

      Read me ...
 

    

Free Training Programming Courses On Line  -  www.puresoftwarecode.com
 
www.puresoftwarecode.com        
 
           two Groups of Slides, Move Vertical
 
 
    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:
    1. 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

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

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

    4. at Normal Source, select this table
    5. at HTML source, appears the place selected at the previous point ( Table selected at Normal Source)
       <td width="100%"  align="center">&nbsp;</td>
    6. at HTML source, replace previous HTML text (<td width="100%">&nbsp;</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>

      &nbsp;</td>

        Note:
                    name of  array of pictures: fadeimages
                   

          
  • at Normal Source, into the 2nd  cell:
    1. 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

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

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

    4. at Normal Source, select this table
    5. at HTML source, appears the place selected at the previous point ( Table selected at Normal Source)
       <td width="100%"  align="center">&nbsp;</td>
    6. at HTML source, replace previous HTML text (<td width="100%">&nbsp;</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>

      &nbsp;</td>

        
      Note:
                    name of  array of pictures: fadeimages2

       
   
 
 
  Call web page, two Groups of Slides, Move Vertical

  
Notes:
         Use Microsoft FrontPage software to read or write JavaScript text
, to HTML Source
 
   
 
Author.
       Chucri Simon Zouein , Beirut - Lebanon - Computer engineer
       Tel :         961-01-691436

      
Web:       http://www.puresoftwarecode.com/
       E-mail: 
   info@puresoftwarecode.com