Pure Software code
 

      Read me ...
 

    

Free Training Programming Courses On Line  -  www.puresoftwarecode.com
 
www.puresoftwarecode.com        
 
           Pictures move horizontal (collection of pictures stored at folder: pictures_move_horizontal_files)
 
 
    Add the following points to web page

Notes    

1.  at HTML Source  of  web page add this Javascript text

<SCRIPT type=text/javascript>

//slide_move Horizontal

function carousel(params){

if(!(params.width>0&&isFinite(params.width)))params.width=100;

if(!(params.height>0&&isFinite(params.height)))params.height=100;

if(!(params.sides>2&&isFinite(params.sides)))params.sides=4;

if(!(params.steps>0&&params.steps<100&&isFinite(params.steps)))params.steps=20;

if(!(params.speed>0&&isFinite(params.speed)))params.speed=8;

if(!(params.image_border_width>=0&&isFinite(params.image_border_width)))params.image_border_width=0;

if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();

document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");

var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))

cdiv.style.width=params.width+'px';

cdiv.style.height=params.height+'px';

cdiv.style.border=params.border;

cdiv.style.position='relative';

cdiv.style.overflow='hidden';

cdiv.title=params.id;

var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;

interval=isNaN(interval)?200:interval;

var img_position=[],images=[],img_dimension=[];

var img_index=params.images.length+1,img_index_cap=2*params.images.length;

var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway;

function init(){

if(params.direction=="left" || params.direction=="right"){

direction=params.direction;

dimension="width";

}

else if(params.direction=="top" || params.direction=="bottom"){

direction=params.direction;

dimension="height";

}

else {

direction="left";

dimension="width";

}

faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';

cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';

var img=new Image();

img.style.position='absolute';

img.style[direction]=faraway;

img.style.width=params.width-2*params.image_border_width+'px';

img.style.height=params.height-2*params.image_border_width+'px';

img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;

for(var i=0;i<params.images.length;i++){

images[i]=img.cloneNode(true);

images[i].src=params.images[i];

if(params.links&&params.links[i]&&params.links[i]!=''){

targ=params.lnk_targets&&params.lnk_targets[i]||params.lnk_base||'new';

if(targ=="_blank"){

attr=(params.lnk_attr&&params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";

images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");

}

else if(targ.substr(0,1)=="_"){

images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'");

}

else{

attr=(params.lnk_attr&&params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";

images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");

}

images[i].style.cursor=document.all?'hand':'pointer';

}

if(params.titles&&params.titles[i]&&params.titles[i]!='')

images[i].title=params.titles[i];

if(document.all)

images[i].alt=images[i].title;

images[i+params.images.length]=images[i];

if(params.images.length==faces)

images[i+2*params.images.length]=images[i];

cdiv.appendChild(images[i]);

}

var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);

var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;

var pi_piece=2*Math.PI/params.steps/params.sides;

for(i=0;i<=params.steps*faces;i++){

img_dimension[i]=face_size*Math.sin(pi_piece*i);

img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway;

img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';

}

}

init();

cdiv.rotate = function(){

setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);

if(!spinning) return;

if(++counter>=params.steps){

counter=0;

if(++img_index>=img_index_cap)

img_index=params.images.length;

}

images[img_index-faces].style[direction]=faraway;

for(var i=faces-1;i>=0;i--){

images[img_index-i].style[direction]=img_position[counter+i*params.steps];

images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];

}

}

cdiv.onmouseover=function(){

spinning=false;

}

cdiv.onmouseout=function(){

spinning=true;

}

setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);

}

</SCRIPT>
 

2.
  • at Normal Source of web page, right click the specific cell, on the shortcut menu click Cell Proprieties, the Cell Proprieties dialog box appears, select the  Horizontal alignement combo box to value Center,  and then click ok

  • at Normal Source, into/to this cell add Table size 1 column and 1 row,  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 into previous cell

  • at Normal Source, right click the Table, on the shortcut menu click Table Proprieties, the Table Proprieties dialog box appears, select  Alignments combo box to value Center, uncheck Specify Width, Border Size = 0 and then click ok

  • at Normal Source, Select this Table created
  • at HTML source, appears the place selected at Normal Source and the following HTML Text corresponding
    <td width="100%">&nbsp;</td>
  • at HTML source, replace the previous HTML test (<td width="100%">&nbsp;</td> by the  HTML test (color of old text - red, color of new text - black )

    <td width="100%">

    <p align="center">

    <IMG height=1 alt="" src="Pictures ... "
    width=0 border=0></TD>
    <DIV class=centerdiv>
    <SCRIPT type=text/javascript>
    //slide_move Horizontal

    carousel({id:'Pictures ...',
    border:'',
    size_mode:'image',
    width:154,
    height:100,
    sides:6,
    steps:40,
    speed:1,
    direction:'left',
    images:['pictures_move_horizontal_files/1075_100a.jpg',
    'pictures_move_horizontal_files/2238_100a.jpg',
    'pictures_move_horizontal_files/374_100a.jpg',
    'pictures_move_horizontal_files/1897_100.jpg',
    'pictures_move_horizontal_files/87_100a.jpg'
    ],


    lnk_base:'pictures ...', //Link target for all ...)
    titles:['','','','','','','','','','','','','',''],

    image_border_width:1,
    image_border_color:'black'
    });
    </SCRIPT>

    </td>
3. info:
   width='154'
  height='100'
  direction: left
  list of pictures :
           'pictures_move_horizontal_files/1075_100a.jpg',
           'pictures_move_horizontal_files/2238_100a.jpg',
           'pictures_move_horizontal_files/374_100a.jpg',
           'pictures_move_horizontal_files/1897_100.jpg',
           'pictures_move_horizontal_files/87_100a.jpg'

 modify these values at the javascript text
 
 
 
  Call web page example, Pictures move Horizontal

  
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