Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy simple slide show

    following a link somewhere here, I went to
    http://vicsjavascripts.org.uk/Simple...eSlideShow.htm

    I am having a problem...... if I put the <body onload="zxcGalleryScroll('Gallery1',100,20,0,-30,'Scroll Bar','bar',50,'MainImg',MessAry);">

    I lose the scroll bar and the ability to open the thumb in the larger window.
    I can't open the full size one...... so I am stuck

    If I try to do anything, I lose the scrolls..... I have emailed Vic but maybe he prefers this venue for answers as it can reach more newbies like me.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    can you post a link to or the code of your application

    Edit
    I have just tested the 'zxcGalleryScroll' script and It appears OK so I guess you may have some coflict of ID names or similar on your page.
    Last edited by vwphillips; 02-21-2007 at 01:47 AM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have copied the code as you offered it, and when I couldn't get it to work, I went to your page again, and copied the code for the page..... but there was so much text with // before it and I couldn't make heads nor tails of it.

    I could get the thumbnails in the lower scroll bar, get the scrolling done, but when you click on the thumbnail, it opens in the larger window on top and is very pixelized ..... no full size image loading and only some of the names showing.

    I would attach the code but I can't see how, so here it is enclosed, and it's everything after the style:





    <script language="JavaScript" type="text/javascript">
    <!--
    var zxcIFVarAry=new Array('zxcTitleTxt1','zxcFSz1','zxcUpDate','zxcPosted');
    var zxcIFAry=new Array('Image Gallery Scroll','45','21/May/2006','21/May/2004');
    //
    -->
    </script>

    <script language="JavaScript" type="text/javascript">
    <!--


    function TxtAreaToggle(tb,r1,r2){
    if (tb.rows==r1){
    tb.rows=r2;
    }
    else {
    tb.rows=r1;
    }
    }

    function SelectTxtArea(obj){
    document.getElementById(obj).select();
    }

    //
    </script>

    <!--
    <style type="text/css">

    .TxtArea { font-size:12px;background-color:#f8cd76; }
    .Title1 { font-size:24px; }
    .Title2 { font-size:18px; }
    .Link { width:150px;cursor:pointer;cursor:hand;background-Color:#f8cd76;color:blue;text-decoration:underline; }
    .index { width:50px;cursor:pointer;cursor:hand;background-Color:#f8cd76;color:blue;text-decoration:underline; }
    .cursor {
    cursor:hand;
    cursor:pointer;
    }


    .Level0 {
    position:relative;width:100px;left:0px;top:0px;height:30px;background-color:red;border:solid black 1px; }

    .Level1 {
    position:relative;width:100px;left:20px;top:0px;height:30px;background-color:blue;border:solid black 1px; }

    .Level2 {
    position:relative;width:100px;left:40px;top:0px;height:25px;background-color:green;border:solid black 1px; }

    .Level3 {
    position:relative;width:100px;left:60px;top:0px;height:25px;background-color:yellow;border:solid black 1px; }

    .Level0X {
    position:relative;width:100px;left:0px;top:0px;height:100px;background-color:red;border:solid black 1px; }

    .Level1X {
    position:relative;width:100px;left:20px;top:0px;height:100px;background-color:blue;border:solid black 1px; }

    .Level2X {
    position:relative;width:100px;left:40px;top:0px;height:100px;background-color:green;border:solid black 1px; }

    .Level3X {
    position:relative;width:100px;left:60px;top:0px;height:100px;background-color:yellow;border:solid black 1px; }


    </style>
    -->



    <style type="text/css">
    /*<![CDATA[*/
    .bar {
    background-Color:#FFFFCC;
    border:solid black 1px;
    text-align:center;
    }

    .bar1 {
    background-Color:#CCFFFF;
    border-bottom:solid black 0px;
    text-align:center;
    font-size:10px;
    }

    /*]]>*/
    </style>

    <script language="JavaScript" src="../indexMessages.js" type="text/javascript"></script>
    <script language="JavaScript" src="../UpdateArrays.js" type="text/javascript"></script>
    <script language="JavaScript" src="../pnPart1.js" type="text/javascript"></script>
    <script language="JavaScript" src="../pnPart2.js" type="text/javascript"></script>
    <script language="JavaScript" src="../pnPart3.js" type="text/javascript"></script>
    <script language="JavaScript" src="../pnPart4.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/javascript">

    <!--
    function InitScripts(){
    if (self.location.toString().toLowerCase().match('vicsjavascripts')){
    pnInitSearchPanel();
    }
    zxcGalleryScroll('Gallery1','MainImg',MessAry,null,500,20,120,-30,'<<<< | MouseOver this Scroll Bar | >>>>','bar',50);
    zxcGalleryScroll('Gallery2','MainImg',MessAry,null,300,15,0,-0,'<<<< | MouseOver this Scroll Bar | >>>>','bar1',40);
    zxcGalleryScroll('Gallery3','MainImg',MessAry,'Gallery3');
    }

    //
    -->

    </script>


    </head>


    <body onload="InitScripts()" >


    <center>
    <br>


    <img src="images/4cav_rating.gif" width="130" height="21" align="center" border="0" alt="">


    <!-- this is the image that starts in the show -->
    <div style="overflow:hidden;width:400px;height:300px;background-color:#DEDEDE;border:solid black 1px;border-bottom:0px;" >
    <img id="MainImg" src="images/ottawacavaliers.jpg" width="400" height="300"/>
    </div>


    <div id="MessPanel" style="width:400px;height:20px;background-color:#DEDEDE;;border:solid black 1px;" ></div>

    <div id="Gallery1" style="position:relative;margin-left:4%;margin-right:4%;left:0;top:50px;width:740px;height:95px;overflow:hidden;border:solid black 1px;">
    <div style="position:absolute;left:-200px;top:10px;white-space: nowrap;">

    <img src="images/thumbs/barneywithbrother.jpg">
    <img src="images/thumbs/Daphne2006.jpg">
    <img src="images/thumbs/Maggie2006.jpg">
    <img src="images/thumbs/Mocha.jpg">
    <img src="images/thumbs/Woody2006.jpg" title="Image Title 5" >
    <img src="images/thumbs/fall2006Zorro.jpg" title="Image Title 6">
    <img src="images/thumbs/fall2006Jessica.jpg">
    <img src="images/thumbs/mycavfight.jpg" title="Cavs at play" >
    <img src="images/thumbs/barneywithbrother.jpg">
    <img src="images/thumbs/Daphne2006.jpg">
    <img src="images/thumbs/Maggie2006.jpg">
    <img src="images/thumbs/Mocha.jpg">
    <img src="images/thumbs/Woody2006.jpg" title="Image Title 10" >
    <img src="images/thumbs/fall2006Zorro.jpg" title="Image Title 11">
    <img src="images/thumbs/fall2006Jessica.jpg">
    <img src="images/thumbs/mycavfight.jpg" title="Cavs at play2" >
    </div>
    </div>



    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Image Gallery Scroll (21-May-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk


    <!-- NOT NEEDED....... NOT NEEDED

    -->

    // ***** The Scroll Bar
    //
    // *** The Scroll Bar may be specified in the HTML Code
    // e.g.
    // <div id="Bar2" class="bar1" style="position:relative;overflow:hidden;width:400px;height:15px;cursor:e-resize;" >Scroll Bar</div>
    // This element must have a unique ID name.
    // The 'Dispay Area' may be specified as the Scroll Bar.
    //
    // *** The Scroll Bar generated by the application initialisation.
    //
    // The Scroll Bar may produced when the application is intialised.
    // Other attributes are defined in the initialisation function
    // These attributes are:
    // The width,
    // the height,
    // horizontal and vertical offset from the 'Display Area',
    // any text to be displayed in the scroll bar,
    // class name (to define appearance attributes),
    // e.g.
    // .bar {
    // background-Color:#FFFFCC;
    // background-image:url(http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg);
    // border:solid black 0px;
    // text-align:center;
    // }
    // and optional opacity value (.1 to 99)
    //
    // The bar MUST have a background color or image.
    // the minimum requirement is a blank.gif as a background image.


    // ***** Displaying a Larger Image
    //
    // The 'Larger' image element must be defined in the HTML Code
    // and must be assigned a unique ID name.
    // e.g.
    // <img id="MainImg" src="Blank.gif" width="200" height="200" />
    //


    // ***** Displaying Messages
    //
    // The element to display messages must be defined in the HTML Code
    // and must be assigned a unique ID name.
    // e.g.
    // <div id="MessPanel" style="width:200px;height:100px;background-color:#FFFFCC;text-align:center;" ></div>
    //
    // ** The Message Array
    //
    // An array must be assigned to define the messages
    // e.g.
    // var MessAry=[];
    // MessAry[0]=['MessPanel'];
    // MessAry[1]='Image One';
    // MessAry[2]='Image Two';
    // MessAry[3]='Image Three';
    // MessAry[4]='Image Four';
    //
    // The first field is an array
    // first field field 0 = the unique ID name of the message panel (string)
    // first field field 1 = scr text to swap. (string) (see ***** Directory Swapping)
    // first field field 2 = the replacement text. (string) (see ***** Directory Swapping)
    //
    // subsequent fields define the message for each image (from 1 to max number of images)
    //
    // Note:
    // If the message array field matching the Thumb Nail Image is is null the display will be ''
    // or if available the Thumb Nail Image title.
    //
    // This array is specified in the application initalisation call.
    //

    //
    // ***** Directory Swapping
    //
    // By default the 'Large' image will display the same image as the Clicked Thumb Nail.
    // Larger images of the same name may be available in a different directory.
    // Fields 1 and 2 of the Message Array field 0 may specify the directory names if the Thumb Nail and Large Images.
    // The if the directory specified in the src passed to the Click function matches field 1
    // it will be replaced with field 2 when displaying the main image.
    //

    // ***** Initialising the Application
    //
    // Each application would normally be initialised by a <BODY> or window onload event.
    // e.g.
    // <body onload="zxcGalleryScroll('Gallery1',100,20,0,-30,'Scroll Bar','bar',50,'MainImg',MessAry);">
    // where function 'zxcGalleryScroll('
    // parameter 0 = the unique ID name of the 'Display Area' element. (string)
    // parameter 1 = (optional) the unique ID name of the 'Large Image' element. (string)
    // parameter 2 = (optional) the message array. (a global array variable)
    // parameter 3 = (optional) the unique ID name of the 'Bar' element. (string)
    // ** if the bar is to be generated by the code use null and complete parameters 4 to 10
    // parameter 4 = the width of the scroll bar. (digits);
    // parameter 5 = the height of the scroll bar. (digits);
    // parameter 6 = the scroll bar horizontal offset from the 'Display Area'. (digits)
    // parameter 7 = the scroll bar vertical offset from the 'Display Area'. (digits)
    // parameter 8 = any text to be displayed in the scroll bar. (string)
    // parameter 9 = the scroll bar class name (to define appearance attributes). (string)
    // parameter 10 = (optional) the scroll bar opacity value. (digits - 0.1 to 99)


    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
    // These character are easily changed to characters of choice using global find and replace.
    //
    // The Functional Code(about (5.25K) is best as an External JavaScript
    //
    // Tested with IE6 and Mozilla FireFox
    //

    // ***** Example Message Array

    var MessAry=[];
    MessAry[0]=['MessPanel','Thumbs','Main'];
    MessAry[1]='Array Image Message One';
    MessAry[2]='Array Image Message Two';
    MessAry[3]='Array Image Message Three';
    MessAry[4]='Array Image Message Four';
    MessAry[8]='Array Image Message Eight';


    // **** Functional Code - NO NEED to Change

    var zxcEvt=0;
    var zxcOOPCnt=0;
    var zxcCursor=document.all?'hand':'pointer';

    function zxcGalleryScroll(){
    var zxcargs=zxcGalleryScroll.arguments;
    var zxcp=document.getElementById(zxcargs[0]);
    zxcp.gal=zxcp.getElementsByTagName('DIV')[0];
    zxcp.galml=zxcp.offsetWidth-zxcp.gal.offsetWidth;
    zxcp.cen=zxcp.offsetWidth/2;
    zxcp.top=zxcargs[5]||zxcp.gal.offsetHeight;
    zxcp.oop=new zxcOOPGal(zxcp);
    zxcp.bar=document.getElementById(zxcargs[3]);
    if (!zxcp.bar){
    zxcp.bar=zxcStyle('DIV',{position:'absolute',overflow:'hidden',cursor:'e-resize',left:(zxcPos(zxcp)[0]+zxcargs[6]||0)+'px',top:(zxcPos(zxcp)[1]+zxcargs[7]||0)+'px',width:(zxcargs[4]||zxcp.offsetWidth)+'px',height:(zxcargs[5]||0)+'px'},zxcargs[8]);
    zxcp.bar.className=zxcargs[9];
    document.getElementsByTagName('BODY')[0].appendChild(zxcp.bar);
    }
    zxcp.bar.p=zxcp;
    zxcOpacity(zxcp.bar,zxcargs[10]||100);
    zxcAddEvt(zxcp.bar,'zxcMove','mousemove');
    zxcAddEvt(zxcp.bar,'zxcMoveStop','mouseout');
    zxcp.main=document.getElementById(zxcargs[1]);
    if (zxcp.main){ zxcAddEvt(zxcp,'zxcClick','click'); zxcStyle(zxcp,{cursor:zxcCursor}); }
    if (zxcargs[2]){
    zxcp.mp=document.getElementById(zxcargs[2][0][0]);
    zxcp.mpary=zxcargs[2];
    zxcargs[2][0][1]=zxcargs[2][0][1]||'';
    zxcargs[2][0][2]=zxcargs[2][0][2]||'';
    }
    }

    function zxcClick(zxce){
    var zxcimgobj=zxcEventObj(zxce);
    if (this.mp){
    this.main.src=zxcimgobj.src.replace(this.mpary[0][1],this.mpary[0][2]);
    var zxcimgs=this.getElementsByTagName('IMG');
    for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
    if (zxcimgs[zxc0]==zxcimgobj){
    this.mp.innerHTML=this.mpary[zxc0+1]||zxcimgobj.title||'';
    break;
    }
    }
    }
    else { this.main.src=zxcimgobj.src; }
    }

    function zxcEventObj(zxce){
    if (!zxce) var zxce=window.event;
    zxce.cancelBubble=true;
    if (zxce.stopPropagation) zxce.stopPropagation();
    if (zxce.target) zxceobj=zxce.target;
    else if (zxce.srcElement) zxceobj=zxce.srcElement;
    if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
    return zxceobj;
    }


    function zxcMove(zxce){
    var zxcposx=zxcMse(zxce)[0]-zxcPos(this.p)[0];
    var zxcposy=zxcMse(zxce)[1]-zxcPos(this.p)[1];
    if (this.p.rp){ this.p.oop.dir=(1+Math.min(Math.abs(zxcposx-this.p.rp)/10,5)); }
    if (this.p.lp){ this.p.oop.dir=-(1+Math.min(Math.abs(zxcposx-this.p.lp)/10,5)); }
    if (zxcposx<this.p.cen&&this.p.oop.pos<0&&(this.p.oop.dir<=0)){
    this.p.rp=zxcposx;
    this.p.lp=null;
    clearTimeout(this.p.oop.to);
    this.p.oop.dir=1;
    this.p.oop.move();
    }
    else if (zxcposx>this.p.cen&&this.p.oop.pos>this.p.galml&&(this.p.oop.dir>=0)){
    this.p.rp=null;
    this.p.lp=zxcposx;
    clearTimeout(this.p.oop.to);
    this.p.oop.dir=-1;
    this.p.oop.move();
    }
    }

    function zxcMoveStop(){
    clearTimeout(this.p.oop.to);
    this.p.lp=null; this.p.rp=null; this.p.oop.dir=0;
    }

    function zxcOOPGal(zxcobj){
    this.obj=zxcobj;
    this.ref='zxcgal'+zxcOOPCnt++;
    window[this.ref]=this;
    this.dir=0;
    this.pos=zxcobj.gal.offsetLeft;
    this.to=null;
    }

    zxcOOPGal.prototype.move=function(){
    if ((this.dir<0&&this.pos>this.obj.galml)||(this.dir>0&&this.pos<0)){
    this.obj.gal.style.left=(this.pos+=this.dir)+'px';
    this.setTimeOut('move();',20);
    }
    else {
    if (this.dir<0){ this.obj.gal.style.left=this.obj.galml+'px'; }
    else { this.obj.gal.style.left='0px'; }
    }
    }

    zxcOOPGal.prototype.setTimeOut=function(zxcf,zxcd){
    this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }

    function zxcMse(event){
    if(!event) var event=window.event;
    if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
    else { return[event.pageX,zxcMseY=event.pageY]; }
    }

    function zxcDocS(){
    var zxcsx,zxcsy;
    if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
    else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
    return [zxcsx,zxcsy];
    }

    function zxcPos(zxcobj){
    zxclft=zxcobj.offsetLeft;
    zxctop=zxcobj.offsetTop;
    while(zxcobj.offsetParent!=null){
    zxcpar=zxcobj.offsetParent;
    zxclft+=zxcpar.offsetLeft;
    zxctop+=zxcpar.offsetTop;
    zxcobj=zxcpar;
    }
    return [zxclft,zxctop];
    }

    function zxcStyle(zxcele,zxcstyle,zxctxt){
    if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
    for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
    if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
    return zxcele;
    }

    function zxcOpacity(zxcobj,zxcopc){
    if (zxcopc<0||zxcopc>100){ return; }
    if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
    else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
    else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; }
    else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
    }

    function zxcEventAdd(zxco,zxct,zxcf) {
    if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
    else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
    else {
    var zxcPrev=zxco["on" + zxct];
    if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
    else { zxco['on'+zxct]=zxco[zxcf]; }
    }
    }

    function zxcAddEvt(zxc,zxcfun,zxcevt){
    zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
    zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
    zxcEvt++;
    }

    /*]]>*/
    </script>
    <br>
    <br>
    <br>
    <br>


    <hr>
    <hr>



    <br>
    <br>

    <br>
    <br>
    <br>
    <br>
    <br>
    </center>
    </body>

    </html>



    <script language='javascript'>postamble();</script>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Well it works as the Application Notes

    You appeared to have copied and modified the Script Page
    These modifications resulted in a number of HTML errors

    Not knowing the size of your thumbnail images I used some of mine and modified the call parametes to suit the size I used.
    These changes were accordance with the Application Notes.

    I believe the Application Notes are comprehensive and correct.

    Have another go at modifying the call parameters suit your requirements and let me know how you get on.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>Image Gallery Scroll</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=windows-1252">
    <head>
    <style type="text/css">
    /*<![CDATA[*/
    
    .bar {
    background-Color:#FFFFCC;
    border:solid black 1px;
    text-align:center;
    }
    
    
    /*]]>*/
    </style>
    
    
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Image Gallery Scroll (21-May-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // Image Thumb Nails are displayed horizontally
    // in a <DIV> of a specified width.
    // Thumbnails which overflow this width are hidden.
    // MouseOver of a Scroll Bar to the left or right of center
    // will scroll the Thumbnails left or right respectively.
    // The scroll speed is controlled by moving the mouse position.
    //
    // The Scroll Bar may defined in the HTML Code or generated by the Script.
    //
    // Options
    // Clicking a specific Thumb Nail will display the Thumb Nail src as the src of a specified <IMG> element.
    // Any set of characters of the src may be swapped with a specified set of characters,
    // allowing the specified <IMG> element to display a larger image from a different directory.
    
    // There may be as many applications on a page as required.
    
    // ***** Application Notes
    //
    
    // ***** The HTML Code
    //
    // e.g
    // <div id="motioncontainer" style="position:relative;margin-left:4%;margin-right:4%;left:0;top:500px;width:740px;height:100px;overflow:hidden;">
    //  <div style="position:absolute;left:0;top:0;white-space: nowrap;">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg" title="Image Title 5" >
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //   </div>
    //  </div>
    //
    // The 'Display Area' is a <DIV>  and must be assigned a unique ID name.
    // The style position of the 'Display Area' must be 'position:absolute;' or 'position:relative;'
    // and the overflow 'overflow:hidden;'.
    // The first nested <DIV> of the 'Display Area' contains the images
    // and must have a style position of 'position:absolute;'
    
    // ***** The Scroll Bar
    //
    // *** The Scroll Bar may be specified in the HTML Code
    // e.g.
    // <div id="Bar2" class="bar1" style="position:relative;overflow:hidden;width:400px;height:15px;cursor:e-resize;" >Scroll Bar</div>
    // This element must have a unique ID name.
    // The 'Dispay Area' may be specified as the Scroll Bar.
    //
    // *** The Scroll Bar generated by the application initialisation.
    //
    // The Scroll Bar may produced when the application is intialised.
    // Other attributes are defined in the initialisation function
    // These attributes are:
    // The width,
    // the height,
    // horizontal and vertical offset from the 'Display Area',
    // any text to be displayed in the scroll bar,
    // class name (to define appearance attributes),
    // e.g.
    //  .bar {
    //   background-Color:#FFFFCC;
    //   background-image:url(http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg);
    //   border:solid black 0px;
    //   text-align:center;
    //  }
    // and optional opacity value (.1 to 99)
    //
    // The bar MUST have a background color or image.
    // the minimum requirement is a blank.gif as a background image.
    
    
    // ***** Displaying a Larger Image
    //
    // The 'Larger' image element must be defined in the HTML Code
    //  and must be assigned a unique ID name.
    // e.g.
    //  <img id="MainImg" src="Blank.gif" width="200" height="200" />
    //
    
    
    // ***** Displaying Messages
    //
    // The element to display messages must be defined in the HTML Code
    //  and must be assigned a unique ID name.
    // e.g.
    //  <div id="MessPanel" style="width:200px;height:100px;background-color:#FFFFCC;text-align:center;" ></div>
    //
    // ** The Message Array
    //
    // An array must be assigned to define the messages
    // e.g.
    //  var MessAry=[];
    //  MessAry[0]=['MessPanel'];
    //  MessAry[1]='Image One';
    //  MessAry[2]='Image Two';
    //  MessAry[3]='Image Three';
    //  MessAry[4]='Image Four';
    //
    // The first field is an array
    //   first field field 0 = the unique ID name of the message panel (string)
    //   first field field 1 = scr text to swap.     (string) (see ***** Directory Swapping)
    //   first field field 2 = the replacement text. (string) (see ***** Directory Swapping)
    //
    // subsequent fields define the message for each image (from 1 to max number of images)
    //
    // Note:
    // If the message array field matching the Thumb Nail Image is is null the display will be ''
    // or if available the  Thumb Nail Image title.
    //
    // This array is specified in the application initalisation call.
    //
    
    //
    // ***** Directory Swapping
    //
    // By default the 'Large' image will display the same image as the Clicked Thumb Nail.
    // Larger images of the same name may be available in a different directory.
    // Fields 1 and 2 of the Message Array field 0 may specify the directory names if the Thumb Nail and Large Images.
    // The if the directory specified in the src passed to the Click function matches field 1
    // it will be replaced with field 2 when displaying the main image.
    //
    
    // ***** Initialising the Application
    //
    // Each application would normally be initialised by a <BODY> or window onload event.
    // e.g.
    // <body onload="zxcGalleryScroll('Gallery1',100,20,0,-30,'Scroll Bar','bar',50,'MainImg',MessAry);">
    // where function 'zxcGalleryScroll('
    // parameter 0  = the unique ID name of the 'Display Area' element.            (string)
    // parameter 1  = (optional) the unique ID name of the 'Large Image' element.  (string)
    // parameter 2  = (optional) the message array.                                (a global array variable)
    // parameter 3  = (optional) the unique ID name of the 'Bar' element.          (string)
    // ** if the bar is to be generated by the code use null and complete parameters 4 to 10
    // parameter 4  = the width of the scroll bar.                                 (digits);
    // parameter 5  = the height of the scroll bar.                                (digits);
    // parameter 6  = the scroll bar horizontal offset from the 'Display Area'.    (digits)
    // parameter 7  = the scroll bar vertical   offset from the 'Display Area'.    (digits)
    // parameter 8  = any text to be displayed in the scroll bar.                  (string)
    // parameter 9  = the scroll bar class name (to define appearance attributes). (string)
    // parameter 10 = (optional) the scroll bar opacity value.                     (digits - 0.1 to 99)
    
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
    // These character are easily changed to characters of choice using global find and replace.
    //
    // The Functional Code(about (5.25K) is best as an External JavaScript
    //
    // Tested with IE6 and Mozilla FireFox
    //
    
    // ***** Example Message Array
    
    var MessAry=[];
    MessAry[0]=['MessPanel','Thumbs','Main'];
    MessAry[1]='Array Image Message One';
    MessAry[2]='Array Image Message Two';
    MessAry[3]='Array Image Message Three';
    MessAry[4]='Array Image Message Four';
    MessAry[8]='Array Image Message Eight';
    
    
    // **** Functional Code - NO NEED to Change
    
    var zxcEvt=0;
    var zxcOOPCnt=0;
    var zxcCursor=document.all?'hand':'pointer';
    
    function zxcGalleryScroll(){
     var zxcargs=zxcGalleryScroll.arguments;
     var zxcp=document.getElementById(zxcargs[0]);
     zxcp.gal=zxcp.getElementsByTagName('DIV')[0];
     zxcp.galml=zxcp.offsetWidth-zxcp.gal.offsetWidth;
     zxcp.cen=zxcp.offsetWidth/2;
     zxcp.top=zxcargs[5]||zxcp.gal.offsetHeight;
     zxcp.oop=new zxcOOPGal(zxcp);
     zxcp.bar=document.getElementById(zxcargs[3]);
     if (!zxcp.bar){
      zxcp.bar=zxcStyle('DIV',{position:'absolute',overflow:'hidden',cursor:'e-resize',left:(zxcPos(zxcp)[0]+zxcargs[6]||0)+'px',top:(zxcPos(zxcp)[1]+zxcargs[7]||0)+'px',width:(zxcargs[4]||zxcp.offsetWidth)+'px',height:(zxcargs[5]||0)+'px'},zxcargs[8]);
      zxcp.bar.className=zxcargs[9];
      document.getElementsByTagName('BODY')[0].appendChild(zxcp.bar);
     }
     zxcp.bar.p=zxcp;
     zxcOpacity(zxcp.bar,zxcargs[10]||100);
     zxcAddEvt(zxcp.bar,'zxcMove','mousemove');
     zxcAddEvt(zxcp.bar,'zxcMoveStop','mouseout');
     zxcp.main=document.getElementById(zxcargs[1]);
     if (zxcp.main){ zxcAddEvt(zxcp,'zxcClick','click'); zxcStyle(zxcp,{cursor:zxcCursor}); }
     if (zxcargs[2]){
      zxcp.mp=document.getElementById(zxcargs[2][0][0]);
      zxcp.mpary=zxcargs[2];
      zxcargs[2][0][1]=zxcargs[2][0][1]||'';
      zxcargs[2][0][2]=zxcargs[2][0][2]||'';
     }
    }
    
    function zxcClick(zxce){
     var zxcimgobj=zxcEventObj(zxce);
     if (this.mp){
     this.main.src=zxcimgobj.src.replace(this.mpary[0][1],this.mpary[0][2]);
      var zxcimgs=this.getElementsByTagName('IMG');
      for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
       if (zxcimgs[zxc0]==zxcimgobj){
        this.mp.innerHTML=this.mpary[zxc0+1]||zxcimgobj.title||'';
        break;
       }
      }
     }
     else { this.main.src=zxcimgobj.src; }
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    
    function zxcMove(zxce){
     var zxcposx=zxcMse(zxce)[0]-zxcPos(this.p)[0];
     var zxcposy=zxcMse(zxce)[1]-zxcPos(this.p)[1];
     if (this.p.rp){ this.p.oop.dir=(1+Math.min(Math.abs(zxcposx-this.p.rp)/10,5)); }
     if (this.p.lp){ this.p.oop.dir=-(1+Math.min(Math.abs(zxcposx-this.p.lp)/10,5)); }
     if (zxcposx<this.p.cen&&this.p.oop.pos<0&&(this.p.oop.dir<=0)){
      this.p.rp=zxcposx;
      this.p.lp=null;
      clearTimeout(this.p.oop.to);
      this.p.oop.dir=1;
      this.p.oop.move();
     }
     else if (zxcposx>this.p.cen&&this.p.oop.pos>this.p.galml&&(this.p.oop.dir>=0)){
      this.p.rp=null;
      this.p.lp=zxcposx;
      clearTimeout(this.p.oop.to);
      this.p.oop.dir=-1;
      this.p.oop.move();
     }
    }
    
    function zxcMoveStop(){
     clearTimeout(this.p.oop.to);
     this.p.lp=null; this.p.rp=null; this.p.oop.dir=0;
    }
    
    function zxcOOPGal(zxcobj){
     this.obj=zxcobj;
     this.ref='zxcgal'+zxcOOPCnt++;
     window[this.ref]=this;
     this.dir=0;
     this.pos=zxcobj.gal.offsetLeft;
     this.to=null;
    }
    
    zxcOOPGal.prototype.move=function(){
     if ((this.dir<0&&this.pos>this.obj.galml)||(this.dir>0&&this.pos<0)){
      this.obj.gal.style.left=(this.pos+=this.dir)+'px';
      this.setTimeOut('move();',20);
     }
     else {
      if (this.dir<0){ this.obj.gal.style.left=this.obj.galml+'px'; }
      else { this.obj.gal.style.left='0px'; }
     }
    }
    
    zxcOOPGal.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    function zxcMse(event){
     if(!event) var event=window.event;
     if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
     else { return[event.pageX,zxcMseY=event.pageY]; }
    }
    
    function zxcDocS(){
     var zxcsx,zxcsy;
     if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
     else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
     return [zxcsx,zxcsy];
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    function zxcStyle(zxcele,zxcstyle,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100){ return; }
     if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
     else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddEvt(zxc,zxcfun,zxcevt){
     zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    /*]]>*/
    </script>
    
    
    
    <script language="JavaScript" type="text/javascript">
    
    <!--
    function InitScripts(){
     zxcGalleryScroll('Gallery1','MainImg',MessAry,null,400,20,-80,-30,'<<<< | MouseOver this Scroll Bar | >>>>','bar',50);
    }
    
    //
    -->
    
    </script>
    
    
    </head>
    
    
    <body onload="InitScripts()" >
    
    
    <center>
    <br>
    
    
    <img src="images/4cav_rating.gif" width="130" height="21" align="center" border="0" alt="">
    
    
    <!-- this is the image that starts in the show -->
    <div style="overflow:hidden;width:400px;height:300px;background-color:#DEDEDE;border:solid black 1px;border-bottom:0px;" >
     <img id="MainImg" src="images/ottawacavaliers.jpg" width="400" height="300" />
    </div>
    
    
    <div id="MessPanel" style="width:400px;height:20px;background-color:#DEDEDE;;border:solid black 1px;" ></div>
    
    <div id="Gallery1" style="position:relative;left:0;top:50px;width:240px;height:95px;overflow:hidden;border:solid black 1px;">
     <div style="position:absolute;left:0px;top:10px;white-space: nowrap;">
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width="50" height="50" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="50" height="50" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="50" height="50" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" width="50" height="50" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" width="50" height="50" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Eight.gif" width="50" height="50" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Nine.gif" width="50" height="50" >
     </div>
    </div>
    
    
    
    <br>
    <br>
    <br>
    <br>
    
    
    <hr>
    <hr>
    
    
    
    <br>
    <br>
    
    <br>
    <br>
    <br>
    <br>
    <br>
    </center>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it only works if I put the full size image and constrain the size so that it shows full size in the larger window.

    In the original one, you had images in thumbnail size and full size with the same names in different folders and you also had a title show up under the image.

    None of that works with the code you provided above; can that be fixed? I love the way it worked with the side car pictures.... I just can't get it to work with my dog pictures.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    eithe post a link to or zip your images and post
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Feb 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Page with links to all the versions in question

    http://www.tatsall.ca/ottawacavaliers/vic/

    on your code, only some of the image titles come up..... and I can't figure out why.
    I prefer your original code because you can get the title in to identify the dogs in this case.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    // ***** Displaying Messages
    //
    // The element to display messages must be defined in the HTML Code
    // and must be assigned a unique ID name.
    // e.g.
    // <div id="MessPanel" style="width:200px;height:100px;background-color:#FFFFCC;text-align:center;" ></div>
    //
    // ** The Message Array
    //
    // An array must be assigned to define the messages
    // e.g.
    // var MessAry=[];
    // MessAry[0]=['MessPanel'];
    // MessAry[1]='Image One';
    // MessAry[2]='Image Two';
    // MessAry[3]='Image Three';
    // MessAry[4]='Image Four';
    //
    // The first field is an array
    // first field field 0 = the unique ID name of the message panel (string)
    // first field field 1 = scr text to swap. (string) (see ***** Directory Swapping)
    // first field field 2 = the replacement text. (string) (see ***** Directory Swapping)
    //
    // subsequent fields define the message for each image (from 1 to max number of images)
    //
    // Note:
    // If the message array field matching the Thumb Nail Image is is null the display will be ''
    // or if available the Thumb Nail Image title.
    //
    // This array is specified in the application initalisation call.
    //

    //
    // ***** Directory Swapping
    //
    // By default the 'Large' image will display the same image as the Clicked Thumb Nail.
    // Larger images of the same name may be available in a different directory.
    // Fields 1 and 2 of the Message Array field 0 may specify the directory names if the Thumb Nail and Large Images.
    // The if the directory specified in the src passed to the Click function matches field 1
    // it will be replaced with field 2 when displaying the main image.
    //
    Code:
    var MessAry=[];
    MessAry[0]=['MessPanel','Thumbs','Main'];
    MessAry[1]='Array Image Message One';
    MessAry[2]='Array Image Message Two';
    MessAry[3]='Array Image Message Three';
    MessAry[4]='Array Image Message Four';
    MessAry[8]='Array Image Message Eight';
    You must complete the array MessAry ensuring that the directory paths for the thumb and main images iare correct

    2nd problem



    this will display at actual size

    Code:
    <tr>
    <td class="NonPadded" width="450">
    <br><br><br><br>
    <img src="images/ottawacavaliers.jpg" border=0
     id="_ctl0_imgHouse" class="PhotoMain" name="show" onclick="openSlide();" alt="Ottawa Cavaliers">
    <br>
    <br>
    <br>
    Last edited by vwphillips; 02-21-2007 at 09:43 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New Coder
    Join Date
    Feb 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your fix did the last one well. Thanks

    But I still want to use yours because of the title display.

    I have no idea where to put the messary. If I put
    <body onload="zxcGalleryScroll('Gallery1',100,20,0,-30,'Scroll Bar','bar',50,'MainImg',MessAry);">,
    I lose the scrolls that allow you to see all the thumbnail images.

    If I leave it to
    <body bgColor="#f8cd76" onload="InitScripts()" >,
    I don't see the full size images, but I have the scrolls.

    I know almost NOTHING about Java, and I be that is very obvious.

    Gale

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    The application notes identify that you need a set of Main Image size
    images in a separate directory and specify the thumb and Main image directory paths in fields 1 and 2 of the first Message Array field.

    I do not know the directorty path of the main images so cannot do that for you


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>Image Gallery Scroll</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=windows-1252">
    <head>
    <style type="text/css">
    /*<![CDATA[*/
    
    .bar {
    background-Color:#FFFFCC;
    border:solid black 1px;
    text-align:center;
    }
    
    
    /*]]>*/
    </style>
    
    
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Image Gallery Scroll (21-May-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // Image Thumb Nails are displayed horizontally
    // in a <DIV> of a specified width.
    // Thumbnails which overflow this width are hidden.
    // MouseOver of a Scroll Bar to the left or right of center
    // will scroll the Thumbnails left or right respectively.
    // The scroll speed is controlled by moving the mouse position.
    //
    // The Scroll Bar may defined in the HTML Code or generated by the Script.
    //
    // Options
    // Clicking a specific Thumb Nail will display the Thumb Nail src as the src of a specified <IMG> element.
    // Any set of characters of the src may be swapped with a specified set of characters,
    // allowing the specified <IMG> element to display a larger image from a different directory.
    
    // There may be as many applications on a page as required.
    
    // ***** Application Notes
    //
    
    // ***** The HTML Code
    //
    // e.g
    // <div id="motioncontainer" style="position:relative;margin-left:4%;margin-right:4%;left:0;top:500px;width:740px;height:100px;overflow:hidden;">
    //  <div style="position:absolute;left:0;top:0;white-space: nowrap;">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg" title="Image Title 5" >
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
    //    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
    //   </div>
    //  </div>
    //
    // The 'Display Area' is a <DIV>  and must be assigned a unique ID name.
    // The style position of the 'Display Area' must be 'position:absolute;' or 'position:relative;'
    // and the overflow 'overflow:hidden;'.
    // The first nested <DIV> of the 'Display Area' contains the images
    // and must have a style position of 'position:absolute;'
    
    // ***** The Scroll Bar
    //
    // *** The Scroll Bar may be specified in the HTML Code
    // e.g.
    // <div id="Bar2" class="bar1" style="position:relative;overflow:hidden;width:400px;height:15px;cursor:e-resize;" >Scroll Bar</div>
    // This element must have a unique ID name.
    // The 'Dispay Area' may be specified as the Scroll Bar.
    //
    // *** The Scroll Bar generated by the application initialisation.
    //
    // The Scroll Bar may produced when the application is intialised.
    // Other attributes are defined in the initialisation function
    // These attributes are:
    // The width,
    // the height,
    // horizontal and vertical offset from the 'Display Area',
    // any text to be displayed in the scroll bar,
    // class name (to define appearance attributes),
    // e.g.
    //  .bar {
    //   background-Color:#FFFFCC;
    //   background-image:url(http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg);
    //   border:solid black 0px;
    //   text-align:center;
    //  }
    // and optional opacity value (.1 to 99)
    //
    // The bar MUST have a background color or image.
    // the minimum requirement is a blank.gif as a background image.
    
    
    // ***** Displaying a Larger Image
    //
    // The 'Larger' image element must be defined in the HTML Code
    //  and must be assigned a unique ID name.
    // e.g.
    //  <img id="MainImg" src="Blank.gif" width="200" height="200" />
    //
    
    
    // ***** Displaying Messages
    //
    // The element to display messages must be defined in the HTML Code
    //  and must be assigned a unique ID name.
    // e.g.
    //  <div id="MessPanel" style="width:200px;height:100px;background-color:#FFFFCC;text-align:center;" ></div>
    //
    // ** The Message Array
    //
    // An array must be assigned to define the messages
    // e.g.
    //  var MessAry=[];
    //  MessAry[0]=['MessPanel'];
    //  MessAry[1]='Image One';
    //  MessAry[2]='Image Two';
    //  MessAry[3]='Image Three';
    //  MessAry[4]='Image Four';
    //
    // The first field is an array
    //   first field field 0 = the unique ID name of the message panel (string)
    //   first field field 1 = scr text to swap.     (string) (see ***** Directory Swapping)
    //   first field field 2 = the replacement text. (string) (see ***** Directory Swapping)
    //
    // subsequent fields define the message for each image (from 1 to max number of images)
    //
    // Note:
    // If the message array field matching the Thumb Nail Image is is null the display will be ''
    // or if available the  Thumb Nail Image title.
    //
    // This array is specified in the application initalisation call.
    //
    
    //
    // ***** Directory Swapping
    //
    // By default the 'Large' image will display the same image as the Clicked Thumb Nail.
    // Larger images of the same name may be available in a different directory.
    // Fields 1 and 2 of the Message Array field 0 may specify the directory names if the Thumb Nail and Large Images.
    // The if the directory specified in the src passed to the Click function matches field 1
    // it will be replaced with field 2 when displaying the main image.
    //
    
    // ***** Initialising the Application
    //
    // Each application would normally be initialised by a <BODY> or window onload event.
    // e.g.
    // <body onload="zxcGalleryScroll('Gallery1',100,20,0,-30,'Scroll Bar','bar',50,'MainImg',MessAry);">
    // where function 'zxcGalleryScroll('
    // parameter 0  = the unique ID name of the 'Display Area' element.            (string)
    // parameter 1  = (optional) the unique ID name of the 'Large Image' element.  (string)
    // parameter 2  = (optional) the message array.                                (a global array variable)
    // parameter 3  = (optional) the unique ID name of the 'Bar' element.          (string)
    // ** if the bar is to be generated by the code use null and complete parameters 4 to 10
    // parameter 4  = the width of the scroll bar.                                 (digits);
    // parameter 5  = the height of the scroll bar.                                (digits);
    // parameter 6  = the scroll bar horizontal offset from the 'Display Area'.    (digits)
    // parameter 7  = the scroll bar vertical   offset from the 'Display Area'.    (digits)
    // parameter 8  = any text to be displayed in the scroll bar.                  (string)
    // parameter 9  = the scroll bar class name (to define appearance attributes). (string)
    // parameter 10 = (optional) the scroll bar opacity value.                     (digits - 0.1 to 99)
    
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
    // These character are easily changed to characters of choice using global find and replace.
    //
    // The Functional Code(about (5.25K) is best as an External JavaScript
    //
    // Tested with IE6 and Mozilla FireFox
    //
    
    // ***** Example Message Array
    
    var MessAry=[];
    MessAry[0]=['MessPanel','Thumbs','Main'];
    MessAry[1]='Array Image Message One';
    MessAry[2]='Array Image Message Two';
    MessAry[3]='Array Image Message Three';
    MessAry[4]='Array Image Message Four';
    MessAry[8]='Array Image Message Eight';
    
    
    // **** Functional Code - NO NEED to Change
    
    var zxcEvt=0;
    var zxcOOPCnt=0;
    var zxcCursor=document.all?'hand':'pointer';
    
    function zxcGalleryScroll(){
     var zxcargs=zxcGalleryScroll.arguments;
     var zxcp=document.getElementById(zxcargs[0]);
     zxcp.gal=zxcp.getElementsByTagName('DIV')[0];
     zxcp.galml=zxcp.offsetWidth-zxcp.gal.offsetWidth;
     zxcp.cen=zxcp.offsetWidth/2;
     zxcp.top=zxcargs[5]||zxcp.gal.offsetHeight;
     zxcp.oop=new zxcOOPGal(zxcp);
     zxcp.bar=document.getElementById(zxcargs[3]);
     if (!zxcp.bar){
      zxcp.bar=zxcStyle('DIV',{position:'absolute',overflow:'hidden',cursor:'e-resize',left:(zxcPos(zxcp)[0]+zxcargs[6]||0)+'px',top:(zxcPos(zxcp)[1]+zxcargs[7]||0)+'px',width:(zxcargs[4]||zxcp.offsetWidth)+'px',height:(zxcargs[5]||0)+'px'},zxcargs[8]);
      zxcp.bar.className=zxcargs[9];
      document.getElementsByTagName('BODY')[0].appendChild(zxcp.bar);
     }
     zxcp.bar.p=zxcp;
     zxcOpacity(zxcp.bar,zxcargs[10]||100);
     zxcAddEvt(zxcp.bar,'zxcMove','mousemove');
     zxcAddEvt(zxcp.bar,'zxcMoveStop','mouseout');
     zxcp.main=document.getElementById(zxcargs[1]);
     if (zxcp.main){ zxcAddEvt(zxcp,'zxcClick','click'); zxcStyle(zxcp,{cursor:zxcCursor}); }
     if (zxcargs[2]){
      zxcp.mp=document.getElementById(zxcargs[2][0][0]);
      zxcp.mpary=zxcargs[2];
      zxcargs[2][0][1]=zxcargs[2][0][1]||'';
      zxcargs[2][0][2]=zxcargs[2][0][2]||'';
     }
    }
    
    function zxcClick(zxce){
     var zxcimgobj=zxcEventObj(zxce);
     if (this.mp){
     this.main.src=zxcimgobj.src.replace(this.mpary[0][1],this.mpary[0][2]);
      var zxcimgs=this.getElementsByTagName('IMG');
      for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
       if (zxcimgs[zxc0]==zxcimgobj){
        this.mp.innerHTML=this.mpary[zxc0+1]||zxcimgobj.title||'';
        break;
       }
      }
     }
     else { this.main.src=zxcimgobj.src; }
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    
    function zxcMove(zxce){
     var zxcposx=zxcMse(zxce)[0]-zxcPos(this.p)[0];
     var zxcposy=zxcMse(zxce)[1]-zxcPos(this.p)[1];
     if (this.p.rp){ this.p.oop.dir=(1+Math.min(Math.abs(zxcposx-this.p.rp)/10,5)); }
     if (this.p.lp){ this.p.oop.dir=-(1+Math.min(Math.abs(zxcposx-this.p.lp)/10,5)); }
     if (zxcposx<this.p.cen&&this.p.oop.pos<0&&(this.p.oop.dir<=0)){
      this.p.rp=zxcposx;
      this.p.lp=null;
      clearTimeout(this.p.oop.to);
      this.p.oop.dir=1;
      this.p.oop.move();
     }
     else if (zxcposx>this.p.cen&&this.p.oop.pos>this.p.galml&&(this.p.oop.dir>=0)){
      this.p.rp=null;
      this.p.lp=zxcposx;
      clearTimeout(this.p.oop.to);
      this.p.oop.dir=-1;
      this.p.oop.move();
     }
    }
    
    function zxcMoveStop(){
     clearTimeout(this.p.oop.to);
     this.p.lp=null; this.p.rp=null; this.p.oop.dir=0;
    }
    
    function zxcOOPGal(zxcobj){
     this.obj=zxcobj;
     this.ref='zxcgal'+zxcOOPCnt++;
     window[this.ref]=this;
     this.dir=0;
     this.pos=zxcobj.gal.offsetLeft;
     this.to=null;
    }
    
    zxcOOPGal.prototype.move=function(){
     if ((this.dir<0&&this.pos>this.obj.galml)||(this.dir>0&&this.pos<0)){
      this.obj.gal.style.left=(this.pos+=this.dir)+'px';
      this.setTimeOut('move();',20);
     }
     else {
      if (this.dir<0){ this.obj.gal.style.left=this.obj.galml+'px'; }
      else { this.obj.gal.style.left='0px'; }
     }
    }
    
    zxcOOPGal.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    function zxcMse(event){
     if(!event) var event=window.event;
     if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
     else { return[event.pageX,zxcMseY=event.pageY]; }
    }
    
    function zxcDocS(){
     var zxcsx,zxcsy;
     if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
     else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
     return [zxcsx,zxcsy];
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    function zxcStyle(zxcele,zxcstyle,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100){ return; }
     if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
     else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddEvt(zxc,zxcfun,zxcevt){
     zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    /*]]>*/
    </script>
    
    
    
    <script language="JavaScript" type="text/javascript">
    
    <!--
    function InitScripts(){
     zxcGalleryScroll('Gallery1','MainImg',MessAry,null,400,20,170,-30,'<<<< | MouseOver this Scroll Bar | >>>>','bar',50);
    }
    
    //
    -->
    
    </script>
    
    
    </head>
    
    
    <body onload="InitScripts()" >
    
    
    <center>
    <br>
    
    
    <img src="images/4cav_rating.gif" alt="" align="middle" border="0" height="21" width="130">
    
    
    <!-- this is the image that starts in the show -->
    <div style="overflow:hidden;width:400px;height:300px;background-color:#DEDEDE;border:solid black 1px;border-bottom:0px;" >
     <img id="MainImg" src="images/Mocha.jpg" height="300" width="400">
    </div>
    <div id="MessPanel" style="border: 1px solid black; width: 400px; height: 20px; background-color: rgb(222, 222, 222);">Array Image Message Four</div>
    
    
    <div id="Gallery1" style="border: 1px solid black; overflow: hidden; position: relative; margin-left: 4%; margin-right: 4%; left: 0pt; top: 50px; width: 740px; height: 95px; cursor: pointer;">
     <div style="position: absolute; left: -200px; top: 10px; white-space: nowrap;">
    
      <img src="images/thumbs/barneywithbrother.jpg" title="Barney and his brother">
      <img src="images/thumbs/Daphne2006.jpg" title="Daphne, summer of 2006; a hard year for this great lady">
      <img src="images/thumbs/Maggie2006.jpg" title="Maggie, summer of 2006">
      <img src="images/thumbs/Mocha.jpg" title="Mochachu Cookie dough">
      <img src="images/thumbs/Woody2006.jpg" title="Woody, Zorro's twin :-)">
      <img src="images/thumbs/fall2006Zorro.jpg" title="Zorro, Woody's twin">
      <img src="images/thumbs/fall2006Jessica.jpg" title="Jessica, Zorro's sister">
      <img src="images/thumbs/mycavfight.jpg" title="Cavs at play">
      <img src="images/thumbs/barneywithbrother.jpg" title="Image Title 5">
      <img src="images/thumbs/Daphne2006.jpg" title="Image Title 5">
      <img src="images/thumbs/Maggie2006.jpg" title="Image Title 5">
      <img src="images/thumbs/Mocha.jpg" title="Image Title 5">
      <img src="images/thumbs/Woody2006.jpg" title="Image Title 10">
      <img src="images/thumbs/fall2006Zorro.jpg" title="Image Title 11">
      <img src="images/thumbs/fall2006Jessica.jpg" title="Image Title 5">
      <img src="images/thumbs/mycavfight.jpg" title="Cavs at play2">
     </div>
    </div>
    
    
    
    <br>
    <br>
    <br>
    <br>
    
    
    <hr>
    <hr>
    
    
    
    <br>
    <br>
    
    <br>
    <br>
    <br>
    <br>
    <br>
    </center>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #11
    New Coder
    Join Date
    Feb 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok.... I think I have things figured out........ but a couple of final questions.

    Is there a way to have the message array closer to the images? That way it will be easier to put the identifier before I forget. In the original one with the side cars, you had the message in the "title=..." area. Is it still possible to do that?

    the site is setup: one directory with 1 sub-directory called images, and that one has 2 directories, one called thumbs and one called full.

    And is there a way to get rid of all the notes above the html? Can I delete anything with // at the beginning of the line? I will leave info leading back to your wonderful site.

    Gale
    Last edited by Gale; 02-22-2007 at 06:56 AM. Reason: I forgot to put the site setup

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    If the Message Array fields 1 to n are not completed then the thumbnail title is used as the message

    It is essential that field 0 is completed.

    All comments with the exception of the credits may be removed, but keep a copy for future reference.

    Positioning of all elements, with the exception of an automatically generated scroll bar, are defined in the HTML code.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>Image Gallery Scroll</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=windows-1252">
    <head>
    <style type="text/css">
    /*<![CDATA[*/
    
    .bar {
    background-Color:#FFFFCC;
    border:solid black 1px;
    text-align:center;
    }
    
    
    /*]]>*/
    </style>
    
    
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Image Gallery Scroll (21-May-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    
    // ***** Example Message Array
    
    var MessAry=[];
    MessAry[0]=['MessPanel','thumbs','full'];
    
    
    // **** Functional Code - NO NEED to Change
    
    var zxcEvt=0;
    var zxcOOPCnt=0;
    var zxcCursor=document.all?'hand':'pointer';
    
    function zxcGalleryScroll(){
     var zxcargs=zxcGalleryScroll.arguments;
     var zxcp=document.getElementById(zxcargs[0]);
     zxcp.gal=zxcp.getElementsByTagName('DIV')[0];
     zxcp.galml=zxcp.offsetWidth-zxcp.gal.offsetWidth;
     zxcp.cen=zxcp.offsetWidth/2;
     zxcp.top=zxcargs[5]||zxcp.gal.offsetHeight;
     zxcp.oop=new zxcOOPGal(zxcp);
     zxcp.bar=document.getElementById(zxcargs[3]);
     if (!zxcp.bar){
      zxcp.bar=zxcStyle('DIV',{position:'absolute',overflow:'hidden',cursor:'e-resize',left:(zxcPos(zxcp)[0]+zxcargs[6]||0)+'px',top:(zxcPos(zxcp)[1]+zxcargs[7]||0)+'px',width:(zxcargs[4]||zxcp.offsetWidth)+'px',height:(zxcargs[5]||0)+'px'},zxcargs[8]);
      zxcp.bar.className=zxcargs[9];
      document.getElementsByTagName('BODY')[0].appendChild(zxcp.bar);
     }
     zxcp.bar.p=zxcp;
     zxcOpacity(zxcp.bar,zxcargs[10]||100);
     zxcAddEvt(zxcp.bar,'zxcMove','mousemove');
     zxcAddEvt(zxcp.bar,'zxcMoveStop','mouseout');
     zxcp.main=document.getElementById(zxcargs[1]);
     if (zxcp.main){ zxcAddEvt(zxcp,'zxcClick','click'); zxcStyle(zxcp,{cursor:zxcCursor}); }
     if (zxcargs[2]){
      zxcp.mp=document.getElementById(zxcargs[2][0][0]);
      zxcp.mpary=zxcargs[2];
      zxcargs[2][0][1]=zxcargs[2][0][1]||'';
      zxcargs[2][0][2]=zxcargs[2][0][2]||'';
     }
    }
    
    function zxcClick(zxce){
     var zxcimgobj=zxcEventObj(zxce);
     if (this.mp){
     this.main.src=zxcimgobj.src.replace(this.mpary[0][1],this.mpary[0][2]);
      var zxcimgs=this.getElementsByTagName('IMG');
      for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
       if (zxcimgs[zxc0]==zxcimgobj){
        this.mp.innerHTML=this.mpary[zxc0+1]||zxcimgobj.title||'';
        break;
       }
      }
     }
     else { this.main.src=zxcimgobj.src; }
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    
    function zxcMove(zxce){
     var zxcposx=zxcMse(zxce)[0]-zxcPos(this.p)[0];
     var zxcposy=zxcMse(zxce)[1]-zxcPos(this.p)[1];
     if (this.p.rp){ this.p.oop.dir=(1+Math.min(Math.abs(zxcposx-this.p.rp)/10,5)); }
     if (this.p.lp){ this.p.oop.dir=-(1+Math.min(Math.abs(zxcposx-this.p.lp)/10,5)); }
     if (zxcposx<this.p.cen&&this.p.oop.pos<0&&(this.p.oop.dir<=0)){
      this.p.rp=zxcposx;
      this.p.lp=null;
      clearTimeout(this.p.oop.to);
      this.p.oop.dir=1;
      this.p.oop.move();
     }
     else if (zxcposx>this.p.cen&&this.p.oop.pos>this.p.galml&&(this.p.oop.dir>=0)){
      this.p.rp=null;
      this.p.lp=zxcposx;
      clearTimeout(this.p.oop.to);
      this.p.oop.dir=-1;
      this.p.oop.move();
     }
    }
    
    function zxcMoveStop(){
     clearTimeout(this.p.oop.to);
     this.p.lp=null; this.p.rp=null; this.p.oop.dir=0;
    }
    
    function zxcOOPGal(zxcobj){
     this.obj=zxcobj;
     this.ref='zxcgal'+zxcOOPCnt++;
     window[this.ref]=this;
     this.dir=0;
     this.pos=zxcobj.gal.offsetLeft;
     this.to=null;
    }
    
    zxcOOPGal.prototype.move=function(){
     if ((this.dir<0&&this.pos>this.obj.galml)||(this.dir>0&&this.pos<0)){
      this.obj.gal.style.left=(this.pos+=this.dir)+'px';
      this.setTimeOut('move();',20);
     }
     else {
      if (this.dir<0){ this.obj.gal.style.left=this.obj.galml+'px'; }
      else { this.obj.gal.style.left='0px'; }
     }
    }
    
    zxcOOPGal.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    function zxcMse(event){
     if(!event) var event=window.event;
     if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
     else { return[event.pageX,zxcMseY=event.pageY]; }
    }
    
    function zxcDocS(){
     var zxcsx,zxcsy;
     if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
     else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
     return [zxcsx,zxcsy];
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    function zxcStyle(zxcele,zxcstyle,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100){ return; }
     if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
     else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddEvt(zxc,zxcfun,zxcevt){
     zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    /*]]>*/
    </script>
    
    
    
    <script language="JavaScript" type="text/javascript">
    
    <!--
    function InitScripts(){
     zxcGalleryScroll('Gallery1','MainImg',MessAry,null,400,20,170,-30,'<<<< | MouseOver this Scroll Bar | >>>>','bar',50);
    }
    
    //
    -->
    
    </script>
    
    
    </head>
    
    
    <body onload="InitScripts()" >
    
    
    <center>
    <br>
    
    
    <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/4cav_rating.gif" alt="" align="middle" border="0" height="21" width="130">
    
    
    <!-- this is the image that starts in the show -->
    <div style="overflow:hidden;width:400px;height:300px;background-color:#DEDEDE;border:solid black 1px;border-bottom:0px;" >
     <img id="MainImg" src="http://www.tatsall.ca/ottawacavaliers/vic/images/full/Mocha.jpg" height="300" width="400">
    </div>
    <div id="MessPanel" style="border: 1px solid black; width: 400px; height: 20px; background-color: rgb(222, 222, 222);">Array Image Message Four</div>
    
    
    <div id="Gallery1" style="border: 1px solid black; overflow: hidden; position: relative; margin-left: 4%; margin-right: 4%; left: 0pt; top: 50px; width: 740px; height: 95px; cursor: pointer;">
     <div style="position: absolute; left: -200px; top: 10px; white-space: nowrap;">
    
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/barneywithbrother.jpg" title="Barney and his brother">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/Daphne2006.jpg" title="Daphne, summer of 2006; a hard year for this great lady">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/Maggie2006.jpg" title="Maggie, summer of 2006">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/Mocha.jpg" title="Mochachu Cookie dough">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/Woody2006.jpg" title="Woody, Zorro's twin :-)">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/fall2006Zorro.jpg" title="Zorro, Woody's twin">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/fall2006Jessica.jpg" title="Jessica, Zorro's sister">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/mycavfight.jpg" title="Cavs at play">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/barneywithbrother.jpg" title="Image Title 5">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/Daphne2006.jpg" title="Image Title 5">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/Maggie2006.jpg" title="Image Title 5">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/Mocha.jpg" title="Image Title 5">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/Woody2006.jpg" title="Image Title 10">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/fall2006Zorro.jpg" title="Image Title 11">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/fall2006Jessica.jpg" title="Image Title 5">
      <img src="http://www.tatsall.ca/ottawacavaliers/vic/images/thumbs/mycavfight.jpg" title="Cavs at play2">
     </div>
    </div>
    
    
    
    <br>
    <br>
    <br>
    <br>
    
    
    <hr>
    <hr>
    
    
    <br>
    <br>
    
    <br>
    <br>
    <br>
    <br>
    <br>
    </center>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #13
    New Coder
    Join Date
    Feb 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Vic....... You are the best!

    It works in every browser but Netscape. Go figure.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •