...

View Full Version : simple slide show



Gale
02-20-2007, 08:23 PM
following a link somewhere here, I went to
http://vicsjavascripts.org.uk/SimpleSlideShow/SimpleSlideShow.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.:confused:

vwphillips
02-21-2007, 01:36 AM
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.

Gale
02-21-2007, 05:17 AM
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>

vwphillips
02-21-2007, 11:23 AM
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.



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

Gale
02-21-2007, 06:09 PM
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.

vwphillips
02-21-2007, 08:04 PM
eithe post a link to or zip your images and post

Gale
02-21-2007, 09:02 PM
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.

vwphillips
02-21-2007, 09:37 PM
// ***** 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.
//




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



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

Gale
02-21-2007, 10:35 PM
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

vwphillips
02-21-2007, 11:51 PM
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



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

Gale
02-22-2007, 01:46 AM
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

vwphillips
02-22-2007, 11:17 AM
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.



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

Gale
02-23-2007, 09:15 PM
Thank you Vic....... You are the best!

It works in every browser but Netscape. Go figure.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum