Help needed..!

Discussion in 'JavaScript' started by pwhitrow, Feb 9, 2006.

  1. #1
    I have created a slideshow for displaying rotating images for a client and they are happy enough with it. However, they would like to be able to have multiple instances of the slide show on one page (for forums or something I guess) and this is a little beyond me at the moment as I never took the time learn object programming (yes yes, I know!). I would be forever in your debt if you could help me out here. Below is the code as I have it now.

    Regards,

    Paul Whitrow

    ----------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    </head>

    <body>
    <script type="text/javaScript">
    <!--
    // create and load image array
    slideShowTitle = 'Human Anatomical Details';
    var imgArray=new Array();
    imgArray[0] = new Image();
    imgArray[0].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/59469498.jpg';
    imgArray[0].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=0';
    imgArray[0].alt = 'Picture of male torso';
    imgArray[1] = new Image();
    imgArray[1].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/4400891.jpg';
    imgArray[1].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=1';
    imgArray[1].alt = 'Picture of nervous system';
    imgArray[2] = new Image();
    imgArray[2].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/89276983.jpg';
    imgArray[2].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=2';
    imgArray[2].alt = 'Picture of Lower Arm and Pelvis Bones';
    imgArray[3] = new Image();
    imgArray[3].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/1.jpg';
    imgArray[3].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=3';
    imgArray[3].alt = 'Picture of Lower Arm and Pelvis Musculature';
    imgArray[4] = new Image();
    imgArray[4].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/86150337.jpg';
    imgArray[4].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=4';
    imgArray[4].alt = 'Picture of Lower Arm and Pelvis Nervous System';
    imgArray[5] = new Image();
    imgArray[5].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/3921139.jpg';
    imgArray[5].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=5';
    imgArray[5].alt = 'Picture of Spinal Column Bones';


    // user variables
    var sliderWidth=300;
    // user variables

    // DO NOT EDIT BELOW THIS LINE!

    var imgSpace=1;
    var sliderHeight=50;
    var imageHeight=sliderHeight;
    var t;
    var x=0;
    var w=0;
    var imgstr='';
    var LBT,LBH,LB,SH,SC;
    var opera=false;
    var moz=false;
    var ie=false;

    if ((navigator.userAgent).indexOf("Opera")!=-1) opera=true;
    if (navigator.appName=="Netscape") moz=true;
    if ((navigator.appName).indexOf("Microsoft")!=-1) ie=true;

    function getObj(cls){
    var grp = document.getElementsByTagName('div');
    for(a=0; a < grp.length; a++){
    if(grp[a].className){
    if(grp[a].className == cls){
    return grp[a];
    }
    }
    }
    }

    function loading(){
    LBT = getObj('loadbartext');
    LBH = getObj('loadbarholder');
    LB = getObj('loadbar');
    SH = getObj('scrollholder');
    SC = getObj('scrollcontent');
    y = imgArray.length;
    if(x < y){
    LBT.innerHTML='Loading image '+(x+1)+' of '+y;
    if(moz || opera){
    if(imgArray[x].width > 0){
    w += imgArray[x].width;
    x += 1;
    }
    }else if(ie){
    if(imgArray[x].complete){
    w += imgArray[x].width;
    x += 1;
    }
    }
    LB.style.width = Math.round(LBH.offsetWidth / y) * x;
    t=setTimeout("loading()",100);
    }else{
    clearTimeout(t);
    w += (imgArray.length * imgSpace);
    loaded();
    }
    }

    function loaded(){
    getObj('loader').style.display = 'none';
    SC.style.width = w;
    SC.style.display = 'block';
    SC.style.left = sliderWidth;
    scroll();
    }

    function scroll(){
    SC.style.left = (SC.offsetLeft)-1;
    if((SC.offsetLeft) <= -((SC.offsetWidth)-sliderWidth)){
    SC.innerHTML = imgstr + imgstr
    }
    if((SC.offsetLeft) == -w){
    SC.style.left = 0
    }
    //window.status=SC.offsetLeft+":"+(-w)
    t=setTimeout("scroll()",20);
    }

    function stopscroll(){
    clearTimeout(t);
    }

    for(a=0; a < imgArray.length; a++){
    imgstr+='<a href="'+imgArray[a].lnk+'"><img src="'+imgArray[a].src+'" alt="'+imgArray[a].alt+'" border="0" \/><\/a>';
    }


    var str='';

    str+='<style type="text\/css">';
    str+='.container{border:1px solid #ccc;width:'+sliderWidth+'px;background-color:#eee;}';
    str+='.box{border-top:1px solid #fff;border-bottom:1px solid #fff;width:'+sliderWidth+'px;}';
    str+='.scrollholder{position:relative;height:'+sliderHeight+'px; width:'+sliderWidth+'px;background-color:#fafafa;overflow:hidden;}';
    str+='.scrollcontent{position:relative; white-space:nowrap; display:none;}';
    str+='.scrollcontent img{ height:'+imageHeight+'px; margin-right:'+imgSpace+'px;}';
    str+='.loader{position:relative;display:block;margin-top:10px;text-align:center;font:600 7pt verdana,sans-serif;color:#666;text-align:center;}';
    str+='.loadbarholder{margin:0 auto;height:10px; width:130px; background-color:#eee; margin-top:3px;text-align:left;}';
    str+='.loadbar{height:10px; background-color:#ccc;}';
    str+='.slidetitle{font-family:verdana;font-size:8pt;line-height:1.4em;margin:0 2px;color:#666;text-transform:uppercase;letter-spacing:-1px;}';
    str+='.slidetext{text-align:right;font-family:verdana;font-size:7pt;line-height:1.5em;margin:0 2px;color:#999;}';
    str+='.slidetext a{color:#777;}';
    str+='<\/style>';


    str+='<div class="container">';
    str+='<div class="slidetitle">'+slideShowTitle+'<\/div>';
    str+='<div class="box">';
    str+='<div class="scrollholder">';

    str+='<div class="loader">';
    str+='<div class="loadbartext"><\/div>';
    str+='<div class="loadbarholder">';
    str+='<div class="loadbar"><\/div>';
    str+='<\/div>';
    str+='<\/div>';

    str+='<div class="scrollcontent" onmouseover="stopscroll()" onmouseout="scroll()">';
    str+=imgstr;
    str+='<\/div>';
    str+='<\/div>';
    str+='<\/div>';
    str+='<div class="slidetext"><a href="http://slide.gr0w.com">Slide</a> by <a href="http://www.gr0w.com" title="Visit The Grow Collective">Grow Collective</a><\/div>';
    str+='<\/div>';

    document.write(str);

    loading();
    //-->
    </script>
    </body>
    </html>
     
    pwhitrow, Feb 9, 2006 IP
  2. liquidboy

    liquidboy Peon

    Messages:
    281
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    i)Do they mean multiple instances of the slide show on the one page (doesnt make sense) or

    ii)multiple different pictures on the same page with a slide show running and the picture in focus is the largest one eg. fashion slideshow
     
    liquidboy, Feb 10, 2006 IP
  3. pwhitrow

    pwhitrow Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    multiple instances of the slide show on the one page... unfortunatley.
     
    pwhitrow, Feb 10, 2006 IP
  4. liquidboy

    liquidboy Peon

    Messages:
    281
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #4
    easiest way to do this is to create a page with a slideshow in it then create another page with x number of iframes each iframe pointing to the slideshow page.

    This aint a very elegant design but it will meet there needs!
     
    liquidboy, Feb 10, 2006 IP
  5. pwhitrow

    pwhitrow Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    hmmm, not good. You sure this can't be done using oop techniques?
     
    pwhitrow, Feb 11, 2006 IP