SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Any idea???

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Any idea???

    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

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone???

  3. #3
    SitePoint Addict CommanderZ's Avatar
    Join Date
    Apr 2006
    Location
    Czech Republic
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }
    }

    //-->


Bookmarks

Posting Permissions

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