Any idea???

[assure]

On how to do something like this: Link ? Scrolling thumbnails with large image to left like this: Link ? It works in IE but not in FF....go figure...

I asked in the CSS board but they say its JS. But I think its a combo since the Yahoo version uses CSS list to layout the thumbs....any help would be appreciated.

I tried disecting Yahoo's code for a good while before I finally became frustrated enough to seek help.

Thanks,
assure

[assure]

Anyone???

[CommanderZ]

The yahoo thingy is probably ajax with some server-side stuff, the second link is similiar + there is the scrolling. It is not so hard to do that - you just have to adjust margins as the mouse hovers over the arrows.

[assure]

The There are a couple of problems with the second version.

1.) Does not work in FF.
2.) I want the scroll to work when the button is clicked and not rolled over
3.) I want the thumbnails to scroll over a section at a time instead of just scrolling over....

I combined a couple of scripts to come up with this last year trying my best to mimic simpleviewer because CC does not allow Flash because of accessibility issues....

Thanks,
assure

[assure]

Here is the JS:

<!--
// realised by apachejeff
// www.huntingground.freeserve.co.uk

spacerWidth=4 // space between images
defaultSpeed=20
maxSpeed=50

popupLeft= 100 // pixels
popupTop= 100 // pixels

totalWidth=0
displayWidth=0
displayHeight=0
step=defaultSpeed

function initHDS(){
thumbtobig(1);
displayBox=document.getElementById("container")
displayWidth=parseInt(displayBox.style.width)
displayHeight=parseInt(displayBox.style.height)
scrollBox=document.getElementById("scroll_box")
numOfCells=scrollBox.getElementsByTagName("DIV").length

if(document.getElementById&&document.all){
ieBorder=parseInt(displayBox.style.borderWidth)*2
}
else{
ieBorder=0
}

for(var i=0;i<numOfCells;i++){
totalWidth+=(document.getElementById("cell"+i).offsetWidth) // get all div widths
document.getElementById("cell"+i).style.marginRight=spacerWidth+"px" // add spacer

if(document.getElementById("cell"+i).offsetWidth>displayWidth){ // set to largest width
displayWidth=document.getElementById("cell"+i).offsetWidth+ieBorder // include border for IE
displayBox.style.width=displayWidth
}

if(document.getElementById("cell"+i).offsetHeight>displayHeight){ // set to largest image height
displayHeight=document.getElementById("cell"+i).offsetHeight+ieBorder // include border for IE
displayBox.style.height=displayHeight
}

}

for(var i=0;i<numOfCells;i++){ // vertically center divs
document.getElementById("cell"+i).style.marginTop=(displayHeight-document.getElementById("cell"+i).offsetHeight)/2+"px"
document.getElementById("cell"+i).style.marginBottom=(displayHeight-document.getElementById("cell"+i).offsetHeight)/2+"px"
}

document.getElementById("cell0").style.height=displayHeight/2
//document.getElementById("cell0").style.marginRight=0
totalWidth=totalWidth+(numOfCells*spacerWidth)
scrollBox.style.width=totalWidth+"px"
//displayBox.style.clip="rect(0,"+(displayWidth+"px")+","+(displayHeight+"px")+",0)"
}

leftTimer=""
function scrollHDS(n){

clearTimeout(leftTimer)
scrollBoxPos=parseInt(scrollBox.style.left)
if(n==1){
scrollBoxPos-=step
}
else{
scrollBoxPos+=step
}

scrollBox.style.left=scrollBoxPos+"px"
leftTimer=setTimeout("scrollHDS("+n+")",50)

if(n==1&&scrollBoxPos< -(totalWidth-displayWidth)+(spacerWidth)-ieBorder){
scrollBox.style.left=-(totalWidth-displayWidth)+(spacerWidth)-ieBorder+"px"
clearTimeout(leftTimer)
}

if(n==0&&scrollBoxPos> 0-step){
scrollBox.style.left=0
clearTimeout(leftTimer)
}

}

function fast(){
step=maxSpeed
}

function slow(){
step=defaultSpeed
}

function pause(){
clearTimeout(leftTimer)
}


picWin=null

function getBigPic(p){
if(mypic[p]&&mypic[p]!=""){

bigImg=new Image()
bigImg.src=mypic[p]

data="\n<center>\n<img src='"+bigImg.src+"'>\n</center>\n"

if(picWin){picWin.close()} // if window exists close it

var winProps = "left= "+popupLeft+", top = "+popupTop+", width="+(bigImg.width+20)+", height="+(bigImg.height+20)+", scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=no"
picWin=window.open("","win1",winProps)
picWin.document.write("<HTML>\n<HEAD>\n<TITLE></TITLE>\n")
picWin.document.write("</HEAD>\n")
picWin.document.write("<BODY bgcolor='black' topmargin=10px leftmargin=10px>\n")
picWin.document.write("<div id=\"display\">"+data+"</div>")
picWin.document.write("\n</BODY>\n</HTML>")
}
}

//add onload="initHDS()" to the opening BODY tag

// -->

<!--

//thumbnail script
thumb=new Image(65,65);
thumb2=new Image(65,65);
thumb3=new Image(65,65);
thumb4=new Image(65,65);
thumb5=new Image(65,65);
thumb6=new Image(65,65);
thumb7=new Image(65,65);
thumb8=new Image(65,65);
thumb9=new Image(65,65);
thumb10=new Image(65,65);
thumb11=new Image(65,65);
thumb12=new Image(65,65);
thumb13=new Image(65,65);
thumb14=new Image(65,65);
thumb15=new Image(65,65);
thumb16=new Image(65,65);
thumb17=new Image(65,65);
thumb18=new Image(65,65);
thumb19=new Image(65,65);
thumb20=new Image(65,65);
thumb21=new Image(65,65);
thumb22=new Image(65,65);
thumb23=new Image(65,65);
thumb24=new Image(65,65);
thumb25=new Image(65,65);
thumb26=new Image(65,65);
thumb27=new Image(65,65);
thumb28=new Image(65,65);


thumb.src ="images/IMG_0001.jpg"
thumb2.src="images/IMG_0002.jpg"
thumb3.src="images/IMG_0003.jpg"
thumb4.src="images/IMG_0004.jpg"
thumb5.src="images/IMG_0005.jpg"
thumb6.src="images/IMG_0006.jpg"
thumb7.src="images/IMG_0007.jpg"
thumb8.src="images/IMG_0008.jpg"
thumb9.src="images/IMG_0009.jpg"
thumb10.src="images/IMG_0010.jpg"
thumb11.src="images/IMG_0011.jpg"
thumb12.src="images/IMG_0012.jpg"
thumb13.src="images/IMG_0013.jpg"
thumb14.src="images/IMG_0014.jpg"
thumb15.src="images/IMG_0015.jpg"
thumb16.src="images/IMG_0016.jpg"
thumb17.src="images/IMG_0017.jpg"
thumb18.src="images/IMG_0018.jpg"
thumb19.src="images/IMG_0019.jpg"
thumb20.src="images/IMG_0020.jpg"
thumb21.src="images/IMG_0021.jpg"
thumb22.src="images/IMG_0022.jpg"
thumb23.src="images/IMG_0023.jpg"
thumb24.src="images/IMG_0024.jpg"
thumb25.src="images/IMG_0025.jpg"
thumb26.src="images/IMG_0026.jpg"
thumb27.src="images/IMG_0027.jpg"
thumb28.src="images/IMG_0028.jpg"

function thumbtobig(thumbs){
fadeInit();
if(thumbs==1){document.getElementById("large").src=thumb.src;ins_text="1";}
else if(thumbs==2){document.getElementById("large").src=thumb2.src;ins_text="2";}
else if(thumbs==3){document.getElementById("large").src=thumb3.src;ins_text="3";}
else if(thumbs==4){document.getElementById("large").src=thumb4.src;ins_text="4";}
else if(thumbs==5){document.getElementById("large").src=thumb5.src;ins_text="5";}
else if(thumbs==6){document.getElementById("large").src=thumb6.src;ins_text="6";}
else if(thumbs==7){document.getElementById("large").src=thumb7.src;ins_text="7";}
else if(thumbs==8){document.getElementById("large").src=thumb8.src;ins_text="8";}
else if(thumbs==9){document.getElementById("large").src=thumb9.src;ins_text="9";}
else if(thumbs==10){document.getElementById("large").src=thumb10.src;ins_text="10";}
else if(thumbs==11){document.getElementById("large").src=thumb11.src;ins_text="11";}
else if(thumbs==12){document.getElementById("large").src=thumb12.src;ins_text="12";}
else if(thumbs==13){document.getElementById("large").src=thumb13.src;ins_text="13";}
else if(thumbs==14){document.getElementById("large").src=thumb14.src;ins_text="14";}
else if(thumbs==15){document.getElementById("large").src=thumb15.src;ins_text="15";}
else if(thumbs==16){document.getElementById("large").src=thumb16.src;ins_text="16";}
else if(thumbs==17){document.getElementById("large").src=thumb17.src;ins_text="17";}
else if(thumbs==18){document.getElementById("large").src=thumb18.src;ins_text="18";}
else if(thumbs==19){document.getElementById("large").src=thumb19.src;ins_text="19";}
else if(thumbs==20){document.getElementById("large").src=thumb20.src;ins_text="20";}
else if(thumbs==21){document.getElementById("large").src=thumb21.src;ins_text="21";}
else if(thumbs==22){document.getElementById("large").src=thumb22.src;ins_text="22";}
else if(thumbs==23){document.getElementById("large").src=thumb23.src;ins_text="23";}
else if(thumbs==24){document.getElementById("large").src=thumb24.src;ins_text="24";}
else if(thumbs==25){document.getElementById("large").src=thumb25.src;ins_text="25";}
else if(thumbs==26){document.getElementById("large").src=thumb26.src;ins_text="26";}
else if(thumbs==27){document.getElementById("large").src=thumb27.src;ins_text="27";}
else if(thumbs==28){document.getElementById("large").src=thumb28.src;ins_text="28";}

document.getElementById("caption").replaceChild(document.createTextNode(ins_text), document.getElementById("caption").firstChild);

return false;}

function newWindow(sportjpg){
sportWindow=window.open(sportjpg,"sportWin", "width=1024,height=768")
sportWindow.focus()
}



var message="All images copyrighted. You do not have permission to copy.";
function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
//document.onmousedown=click;



function setClipBoardData(){
setInterval("window.clipboardData.setData('text','')",20);
}
function blockError(){
window.location.reload(true);
return true;
}
window.onerror = blockError;

/*
Better(?) Image fader (C)2004 Patrick H. Lauke aka redux
Inspired by Richard Rutter / Clagnut http://www.clagnut.com/blog/1299/
Original concept and code adapted from Couloir http://www.couloir.org/
preInit "Scheduler" idea by Cameron Adams aka The Man in Blue
http://www.themaninblue.com/writing/...ve/2004/09/29/
*/
/* general variables */
var fadeTargetId = 'large'; /* change this to the ID of the fadeable object */
var fadeTarget;
var preInitTimer;
preInit();
/* functions */
function preInit() {
/* an inspired kludge that - in most cases - manages to initially hide the image
before even onload is triggered (at which point it's normally too late, and a nasty flash
occurs with non-cached images) */
if ((document.getElementById)&&(fadeTarget=document.getElementById(fadeTargetId))) {
fadeTarget.style.visibility = "hidden";
if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer); /* thanks to Steve Clay http://mrclay.org/ for this small Opera fix */
} else {
preInitTimer = setTimeout("preInit()",2);
}
}
function fadeInit() {
if (document.getElementById) {
/* get a handle on the fadeable object, to make code later more manageable */
preInit(); /* shouldn't be necessary, but IE can sometimes get ahead of itself and trigger fadeInit first */
/* set the initial opacity in a (hopefully) cross browser way
notice that because of the way the image is in front, and not obfuscated
by another object we need to "fade out", i don't need a fallback mechanism
to show/hide the covering object...the image is just there, full stop */
if (fadeTarget.style.MozOpacity!=null) {
/* Mozilla's pre-CSS3 proprietary rule */
fadeTarget.style.MozOpacity = 0;
} else if (fadeTarget.style.opacity!=null) {
/* CSS3 compatible */
fadeTarget.style.opacity = 0;
} else if (fadeTarget.style.filter!=null) {
/* IE's proprietary filter */
fadeTarget.style.filter = "alpha(opacity=0)";
}
/* make the object visible again */
fadeTarget.style.visibility = 'visible';
window.setTimeout("fadeIn(0)", 500);
}
}
function fadeIn(opacity) {
if (fadeTarget) {
if (opacity <= 100) {
if (fadeTarget.style.MozOpacity!=null) {
/* Mozilla's pre-CSS3 proprietary rule */
fadeTarget.style.MozOpacity = (opacity/100)-.001;
/* the .001 fixes a glitch in the opacity calculation which normally results in a flash when reaching 1 */
} else if (fadeTarget.style.opacity!=null) {
/* CSS3 compatible */
fadeTarget.style.opacity = (opacity/100)-.001;
} else if (fadeTarget.style.filter!=null) {
/* IE's proprietary filter */
fadeTarget.style.filter = "alpha(opacity="+opacity+")";
/* worth noting: IE's opacity needs values in a range of 0-100, not 0.0 - 1.0 */
}
opacity += 10;
window.setTimeout("fadeIn("+opacity+")", 30);
}
}
}
/* initialise fader by hiding image object first */
/*addEvent (window,'load',fadeInit)*/


/* 3rd party helper functions */
/* addEvent handler for IE and other browsers */
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
}
}

//-->