Ændre vertikalscroll visning til at være horisontal
HejsaJeg har fundet frem til et meget godt script, vertical-scroll.js, fra rod.rant-on.net. Scriptet virker meget godt men er, som navnet antyder, kun brugbar til at lave en vertikal scroll. Jeg vil meget gerne have hjælp til at få ændret scroll funktionaliteten til at kunne funger horisontalt istedet, således at der kan placeres billeder ved siden af hinanden og med en scrollbar nedenunder.
Hvis der findes en færdig kode jeg kan bruge, er dette også fint med mig.
Her er koden:
----------------------------------------
scroll.htm
----------------------------------------
<script type="text/javascript" language="javascript" src="vertical-scroll.js"></script>
<script type="text/javascript" language="javascript">
var scrollImageURL = "images/";
var scrollImageThumbURL = "thumbs/";
var scrollImages = new Array(
'1.jpg',
'2.jpg',
'3.jpg',
'4.jpg'
);
</script>
<Style>
#scrollContainer1{position:absolute; overflow:hidden; left:0px; top:0px; height:100%; width:110px; background-color:#C7DFF4;}
#scrollUp1{position:absolute; left:122px; top:0px;}
#scrollDown1{position:absolute; left:122px; bottom:0px;}
#scrollTrack1{position:absolute; left:123px; top:16px; width:10px; height:317px; background-color:#F0F0F0; font-size:1px;}
#scrollBar1{position:absolute; left:0px; top:0px; width:10px; height:0px; background-color:#000000; font-size:1px;}
</STYLE>
<div style="position:absolute; height:350px;" id="ThumbArkiv">
<div id="scrollContainer1">
<div style="position:absolute; left:0px; top:0px; width:100%;" id="scrollContent1">
<script type="text/javascript">
for(i=0; i<scrollImages.length; i++)
{
document.write("<img style='width:120px;' class='bildeArkivThumb' src='" + scrollImageThumbURL + scrollImages[i] + "'");
document.write("onclick='document.mainFoto.src=\"" + scrollImageURL + scrollImages[i] + "\";")
document.write("setImageIndex(" + i + ");'");
document.write("alt='Klik for større billede' style='cursor:pointer;cursor:hand;'>");
}
</script>
</div>
</div>
<div id="scrollUp1" style="cursor:pointer;cursor:hand;">
<img src="Pics/up.gif" alt="Klik for at scrolle op"></div>
<div id="scrollDown1" style="cursor:pointer;cursor:hand;">
<img src="Pics/down.gif" alt="Klik for at scrolle ned"></div>
<div id="scrollTrack1">
<div id="scrollBar1" style="cursor:pointer;cursor:hand;"></div>
</div>
</div>
----------------------------------------
vertical-scroll-js
----------------------------------------
// vertical-scroll.js by rod.rant-on.net | rodmorelos@msn.com
// keep these two lines and you're free to use this code
// object constructor
function createObjectById(id)
{
this.el = document.getElementById ? document.getElementById(id) : null;
if (!this.el)
throw new Error('Element with "' + id + '" id not found.');
this.css = this.el.style;
this.i = createObjectById.registry.length;
createObjectById.registry[this.i] = this;
this.w = this.el.offsetWidth ? this.el.offsetWidth : 0;
this.h = this.el.offsetHeight ? this.el.offsetHeight : 0;
this.x = this.el.offsetLeft ? this.el.offsetLeft : 0;
this.y = this.el.offsetTop ? this.el.offsetTop : 0;
this.o = 100;
}
// global reference to the dhtml object
createObjectById.registry = [];
// update object values
createObjectById.prototype.update = function()
{
this.w = this.el.offsetWidth ? this.el.offsetWidth : 0;
this.h = this.el.offsetHeight ? this.el.offsetHeight : 0;
this.x = this.el.offsetLeft ? this.el.offsetLeft : 0;
this.y = this.el.offsetTop ? this.el.offsetTop : 0;
}
// visibility
createObjectById.prototype.show = function() { this.css.visibility = 'visible'; }
createObjectById.prototype.hide = function() { this.css.visibility = 'hidden'; }
// display
createObjectById.prototype.display = function(d) { this.css.display = d; }
// colors
createObjectById.prototype.fg = function(f) { this.css.color = f; }
createObjectById.prototype.bg = function(b) { this.css.backgroundColor = b; }
// set layer opacity (in percent, between 0 and 100)
createObjectById.prototype.setOpacity = function(o)
{
if (typeof this.css.MozOpacity != 'undefined') { this.css.MozOpacity = (o / 100); this.o = o; }
else if (this.el.filters) { this.css.filter = 'alpha(opacity=' + o + ')'; this.o = o; }
}
// moves a layer to (x, y) pixels
createObjectById.prototype.moveTo = function(x, y)
{
if (x != null && typeof x == 'number')
{
x = Math.round(x);
this.x = x;
this.css.left = x + 'px';
}
if (y != null && typeof y == 'number')
{
y = Math.round(y);
this.y = y;
this.css.top = y + 'px';
}
}
// resize layer to (width, height) pixels
createObjectById.prototype.setSize = function(w, h)
{
if (w != null && typeof w == 'number')
{
if (w < 0) w = 0;
w = Math.round(w);
this.css.width = w + 'px';
}
if (h != null && typeof h == 'number')
{
if (h < 0) h = 0;
h = Math.round(h);
this.css.height = h + 'px';
}
this.update();
}
// clips layer to specific dimensions; (top, right, bottom, left) in pixels
createObjectById.prototype.clipTo = function(t, r, b, l)
{
if (t < 0) t = 0; if (r < 0) r = 0; if (b < 0) b = 0; if (l < 0) l = 0;
this.css.clip = 'rect(' + t + 'px, ' + r + 'px, ' + b + 'px, ' + l + 'px)';
}
// write content to layer
createObjectById.prototype.write = function(text)
{
if (typeof this.el.innerHTML != 'undefined')
{
this.el.innerHTML = text;
this.update();
}
}
/******************** functions rodmorelos@msn.com find useful or are used in his scripts ******************/
// measure page width and height (the viewable canvas area)
function getViewport()
{
if (document.documentElement && document.documentElement.scrollLeft) this.scrollX = document.documentElement.scrollLeft;
else if (document.body && document.body.scrollLeft) this.scrollX = document.body.scrollLeft;
else if (window.scrollX) this.scrollX = window.scrollX;
else if (window.pageXOffset) this.scrollX = window.pageXOffset;
else this.scrollX = 0;
if (document.documentElement && document.documentElement.scrollTop) this.scrollY = document.documentElement.scrollTop;
else if (document.body && document.body.scrollTop) this.scrollY = document.body.scrollTop;
else if (window.scrollY) this.scrollY = window.scrollY;
else if (window.pageYOffset) this.scrollY = window.pageYOffset;
else this.scrollY = 0;
if (document.documentElement && document.documentElement.clientWidth) this.width = document.documentElement.clientWidth;
else if (document.body && document.body.clientWidth) this.width = document.body.clientWidth;
else if (window.innerWidth) this.width = window.innerWidth;
else this.width = 0;
if (document.documentElement && document.documentElement.clientHeight) this.height = document.documentElement.clientHeight;
else if (document.body && document.body.clientHeight) this.height = document.body.clientHeight;
else if (window.innerHeight) this.height = window.innerHeight;
else this.height = 0;
}
// event listeners
// object = the object to attach the event handler to
// eventType = the type of event to listen for
// functionName = the handler function to execute when the event is fired
// capture = use event capture?
function addEvent(object, eventType, functionName, capture)
{
if (object.addEventListener)
{
object.addEventListener(eventType, functionName, capture);
return true;
}
else if (object.attachEvent)
{
var ae = object.attachEvent('on' + eventType, functionName);
return ae;
}
else
{
object['on' + eventType] = functionName;
}
}
function removeEvent(object, eventType, functionName, capture)
{
if (object.removeEventListener)
{
object.removeEventListener(eventType, functionName, capture);
return true;
}
else if (object.detachEvent)
{
var re = object.detachEvent('on' + eventType, functionName);
return re;
}
else { object['on' + eventType] = null; }
}
function fixEvent(e, currentTarget)
{
if (!e) e = event;
if (!e.target) e.target = e.srcElement;
if (!e.currentTarget) e.currentTarget = currentTarget;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
if (typeof e.clientX == 'undefined') e.clientX = e.pageX;
if (typeof e.clientY == 'undefined') e.clientY = e.pageY;
if (!e.stopPropagation) e.stopPropagation = function() { this.cancelBubble = true; }
if (!e.preventDefault)
e.preventDefault = function()
{
this.returnValue = false;
}
return e;
}
// browser check
function browserCheck()
{
this.ua = navigator.userAgent.toLowerCase();
this.dom = document.getElementById ? 1 : 0;
this.op7 = (this.dom && this.ua.indexOf('opera 7') > -1 || this.ua.indexOf('opera/7') > -1) ? 1 : 0;
this.ie = this.ua.indexOf("msie") != -1;
this.ie5 = (this.dom && this.ua.indexOf('msie 5') > -1) ? 1 : 0;
this.ie6 = (this.dom && this.ua.indexOf('msie 6') > -1) ? 1 : 0;
this.moz = (this.dom && this.ua.indexOf('mozilla') > -1 && this.ua.indexOf('gecko') > -1) ? 1 : 0;
this.mac = this.ua.indexOf("mac") != -1;
return this;
}
// returns a random number between x and y (integers)
function rand(x, y)
{
return (Math.round(Math.random() * (y - x)) + x);
}
// browser check variable
var bw = browserCheck();
/************************** vertical-scroller by rod.rant-on.net | rodmorelos@msn.com **********************/
var scroller =
{
scrollables: 1, // set the number of scrollable scrollContent
step: 30, // set the timeout between each scroll
speed: 15, // set the scroll speed
wheelSpeed: 15, // set the scroll speed when using the mouse wheel
wheelScrolled: false,
timer: 0,
contentY: 0,
dragY: 0,
clickY: 0,
mouseDown: function(e)
{
e = fixEvent(e);
var canvas = new getViewport();
var mouseY = e.clientY + canvas.scrollY;
var target = (e.target.nodeType == 3 || e.target.tagName.toLowerCase() == 'img') ? e.target.parentNode : e.target;
scroller.wheelScrolled = false;
for (var i = 1; i <= scroller.scrollables; i++)
{
if (target.id == scroller.bar[i].el.id)
{
//the function e.preventDefault() prevents sitecontent from being marked when cursor is moved away from the scrollbar. But ie on mac does not understand e.preventDefault(). The scrollbar cannot be used on ie for mac but is visible as an indicator.
if(!(bw.mac && bw.ie))
{
scroller.bar[i].grab = true;
scroller.clickY = mouseY - scroller.bar[i].y;
e.preventDefault();
}
}
else if (target.id == scroller.track[i].el.id)
{
if (scroller.content[i].h > scroller.container[i].h)
{
scroller.track[i].grab = true;
scroller.dragY = e.layerY - (scroller.bar[i].h / 2);
if (scroller.dragY < 0)
scroller.dragY = 0;
if (scroller.dragY > scroller.track[i].h - scroller.bar[i].h)
scroller.dragY = scroller.track[i].h - scroller.bar[i].h;
scroller.contentY = 0 - (scroller.dragY * (scroller.content[i].h - scroller.container[i].h) / Math.round(scroller.track[i].h - scroller.bar[i].h));
scroller.content[i].moveTo(0, scroller.contentY);
scroller.bar[i].moveTo(0, scroller.dragY);
if(!(bw.mac && bw.ie)) e.preventDefault(e);
}
}
else if (target.id == scroller.up[i].el.id)
{
scroller.up[i].grab = true;
scroller.scroll(i, scroller.speed);
if(!(bw.mac && bw.ie)) e.preventDefault();
}
else if (target.id == scroller.down[i].el.id)
{
scroller.down[i].grab = true;
scroller.scroll(i, -scroller.speed);
if(!(bw.mac && bw.ie)) e.preventDefault();
}
}
},
mouseUp: function(e)
{
for (var i = 1; i <= scroller.scrollables; i++)
{
scroller.bar[i].grab = false;
scroller.track[i].grab = false;
scroller.up[i].grab = false;
scroller.down[i].grab = false;
}
clearTimeout(scroller.timer);
},
mouseMove: function(e)
{
for (var i = 1; i <= scroller.scrollables; i++)
{
if (scroller.bar[i].grab && scroller.content[i].h > scroller.container[i].h)
{
e = fixEvent(e);
var canvas = new getViewport();
var mouseY = e.clientY + canvas.scrollY;
scroller.dragY = mouseY - scroller.clickY;
if (scroller.dragY < 0)
scroller.dragY = 0;
if (scroller.dragY > scroller.track[i].h - scroller.bar[i].h)
scroller.dragY = scroller.track[i].h - scroller.bar[i].h;
scroller.contentY = 0 - (scroller.dragY * (scroller.content[i].h - scroller.container[i].h) / Math.round(scroller.track[i].h - scroller.bar[i].h));
scroller.content[i].moveTo(0, scroller.contentY);
scroller.bar[i].moveTo(0, scroller.dragY);
if(!(bw.mac && bw.ie)) e.preventDefault();
}
}
},
scroll: function(num, speed)
{
if (scroller.content[num].y < 0 || scroller.content[num].y > -scroller.content[num].h + scroller.container[num].h)
{
scroller.contentY = scroller.content[num].y + speed;
if (scroller.contentY < -(scroller.content[num].h - scroller.container[num].h)) scroller.contentY = -scroller.content[num].h + scroller.container[num].h;
else if (scroller.contentY > 0) scroller.contentY = 0;
scroller.content[num].moveTo(0, scroller.contentY);
scroller.dragY = 0 - (scroller.content[num].y * Math.round(scroller.track[num].h - scroller.bar[num].h) / (scroller.content[num].h - scroller.container[num].h));
scroller.bar[num].moveTo(0, scroller.dragY);
if (!scroller.wheelScrolled) scroller.timer = setTimeout('scroller.scroll(' + num + ', ' + speed + ')', scroller.step);
}
},
wheelScroll: function(e)
{
e = fixEvent(e);
var el = e.target;
if (el.id.slice(0, el.id.length - 1) != 'scrollContent')
{
do el = el.parentNode;
while (el.tagName.toLowerCase() != 'div' || el.id.slice(0, el.id.length - 1) != 'scrollContent')
}
var i = el.id.charAt(el.id.length - 1);
if (window.event.wheelDelta <= -120)
{
scroller.wheelScrolled = true;
scroller.scroll(i, -scroller.wheelSpeed);
}
else if (window.event.wheelDelta >= 120)
{
scroller.wheelScrolled = true;
scroller.scroll(i, scroller.wheelSpeed);
}
if(!(bw.mac && bw.ie)) e.preventDefault();
},
/**********************************************************************************************************/
/*
/* This function is developed by Morten Prom (www.mortenprom.com) @ Moje Art Drector AS (www.mad-design.no)
/* Keep these two lines and you're free to use this code.
/*
/* setHeight() can be used to change the trackheight.
/* id : Scroller number
/* containerHeight : New height of container
/* trackHeight : New height of track
/*
/**********************************************************************************************************/
setHeight: function(id, containerHeight, trackHeight)
{
var containerHeightBeforeReposition = this.container[id].h;
this.container[id].h = containerHeight;
this.track[id].h = trackHeight;
var hiddenContent = this.content[id].h - this.container[id].h;
var hiddenTopContentPercent = (-this.contentY) / hiddenContent;
var visibleScrollTrack = this.track[id].h - this.bar[id].h;
var visibleContentHeight = this.contentY + this.content[id].h;
if(visibleContentHeight < this.container[id].h)
{
this.contentY = this.contentY + (this.container[id].h - visibleContentHeight);
this.content[id].moveTo(0, this.contentY);
this.dragY = visibleScrollTrack;
this.bar[id].moveTo(0, this.dragY);
}
else
{
this.dragY = visibleScrollTrack * hiddenTopContentPercent;
this.bar[id].moveTo(0, this.dragY);
}
},
/**********************************************************************************************************/
/*
/* This function is developed by Morten Prom (www.mortenprom.com) @ Moje Art Drector AS (www.mad-design.no)
/* Keep these two lines and you're free to use this code.
/* moveScrollContent() - If you work with automatic imagechange like in a slideshow, this function can be
/* used to move the content and the slider (bar) up and down. This function works best if all the images
/* in the scroller have the same height, but moveScrollContent() will do the jobb even if you have a good
/* mix of vertical and horizontal images.
/* id : Scroller number
/* numberOfImages : How many images
/* activeImage : What image is being show
/*
/**********************************************************************************************************/
moveScrollContent: function(id, numberOfImages, activeImage)
{
if(activeImage<2)
{
this.dragY = 0;
this.bar[id].moveTo(0, this.dragY);
this.content[id].moveTo(0, 0);
}
else if(activeImage<numberOfImages-3)
{
this.dragY = activeImage*(this.track[id].h - this.bar[id].h)/numberOfImages;
this.bar[id].moveTo(0, this.dragY);
this.content[id].moveTo(0, -((activeImage*this.content[id].h/numberOfImages)-this.content[id].h/numberOfImages));
}
else
{
this.dragY = this.track[id].h - this.bar[id].h;
this.bar[id].moveTo(0, this.dragY);
this.content[id].moveTo(0, -this.content[id].h + this.container[id].h);
}
},
setBarHeight: function(bar, track, container, content)
{
var h = Math.round(track.h*track.h/content.h);
if(track.h < h)
bar.h = 0;
else if(h<35)
bar.h = 35;
else
bar.h = h;
document.getElementById("scrollBar1").style.height = bar.h+"px";
},
init: function()
{
scroller.container = new Array();
scroller.content = new Array();
scroller.bar = new Array();
scroller.up = new Array();
scroller.down = new Array();
scroller.track = new Array();
for (var i = 1; i <= scroller.scrollables; i++)
{
scroller.container[i] = new createObjectById('scrollContainer' + i);
scroller.content[i] = new createObjectById('scrollContent' + i);
scroller.track[i] = new createObjectById('scrollTrack' + i);
scroller.track[i].grab = false;
scroller.bar[i] = new createObjectById('scrollBar' + i);
scroller.bar[i].grab = false;
scroller.up[i] = new createObjectById('scrollUp' + i);
scroller.up[i].grab = false;
scroller.down[i] = new createObjectById('scrollDown' + i);
scroller.down[i].grab = false;
scroller.setBarHeight(scroller.bar[i], scroller.track[i], scroller.container[i], scroller.content[i]);
if (bw.ie6)
addEvent(scroller.content[i].el, 'mousewheel', scroller.wheelScroll, false);
}
addEvent(document, 'mousemove', scroller.mouseMove, false);
addEvent(document, 'mousedown', scroller.mouseDown, false);
addEvent(document, 'mouseup', scroller.mouseUp, false);
loadFoto();
}
}
onload = scroller.init;
