Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slide show programming - real novice

    Can any one help me. Apolygises I am a real novice at this! I'm trying to set up my website to sell baby booties. And am trying to set up a slide show of one of my designs that I offer in different colours. But I'm stuck.

    I am using the following code

    [<script language="JavaScript1.2">

    /*
    Left-Right image slideshow Script-
    By Dynamic Drive (www.dynamicdrive.com)
    For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
    */

    ///////configure the below four variables to change the style of the slider///////
    //set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
    var scrollerwidth='864px'
    var scrollerheight='576px'
    var scrollerbgcolor='white'
    //3000 miliseconds=3 seconds
    var pausebetweenimages=3000


    //configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
    var slideimages=new Array()
    slideimages[0]='<a href="http://sitebuilder.123-reg.co.uk/users/13/13b76ae120960a4c6ebcf997f1aad68d"><img src="greenyellow.jpg" border=0"></a>'
    slideimages[1]='<img src="pinkblue.jpg">'
    slideimages[2]='<img src="yellowblue.jpg">'
    slideimages[3]='<img src="yellowpink.jpg">'


    ///////Do not edit pass this line///////////////////////

    var ie=document.all
    var dom=document.getElementById

    if (slideimages.length>1)
    i=2
    else
    i=0

    function move1(whichlayer){
    tlayer=eval(whichlayer)
    if (tlayer.left>0&&tlayer.left<=5){
    tlayer.left=0
    setTimeout("move1(tlayer)",pausebetweenimages)
    setTimeout("move2(document.main.document.second)",pausebetweenimages)
    return
    }
    if (tlayer.left>=tlayer.document.width*-1){
    tlayer.left-=5
    setTimeout("move1(tlayer)",50)
    }
    else{
    tlayer.left=parseInt(scrollerwidth)+5
    tlayer.document.write(slideimages[i])
    tlayer.document.close()
    if (i==slideimages.length-1)
    i=0
    else
    i++
    }
    }

    function move2(whichlayer){
    tlayer2=eval(whichlayer)
    if (tlayer2.left>0&&tlayer2.left<=5){
    tlayer2.left=0
    setTimeout("move2(tlayer2)",pausebetweenimages)
    setTimeout("move1(document.main.document.first)",pausebetweenimages)
    return
    }
    if (tlayer2.left>=tlayer2.document.width*-1){
    tlayer2.left-=5
    setTimeout("move2(tlayer2)",50)
    }
    else{
    tlayer2.left=parseInt(scrollerwidth)+5
    tlayer2.document.write(slideimages[i])
    tlayer2.document.close()
    if (i==slideimages.length-1)
    i=0
    else
    i++
    }
    }

    function move3(whichdiv){
    tdiv=eval(whichdiv)
    if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
    tdiv.style.left=0+"px"
    setTimeout("move3(tdiv)",pausebetweenimages)
    setTimeout("move4(scrollerdiv2)",pausebetweenimages)
    return
    }
    if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
    tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
    setTimeout("move3(tdiv)",50)
    }
    else{
    tdiv.style.left=scrollerwidth
    tdiv.innerHTML=slideimages[i]
    if (i==slideimages.length-1)
    i=0
    else
    i++
    }
    }

    function move4(whichdiv){
    tdiv2=eval(whichdiv)
    if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
    tdiv2.style.left=0+"px"
    setTimeout("move4(tdiv2)",pausebetweenimages)
    setTimeout("move3(scrollerdiv1)",pausebetweenimages)
    return
    }
    if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
    tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
    setTimeout("move4(scrollerdiv2)",50)
    }
    else{
    tdiv2.style.left=scrollerwidth
    tdiv2.innerHTML=slideimages[i]
    if (i==slideimages.length-1)
    i=0
    else
    i++
    }
    }

    function startscroll(){
    if (ie||dom){
    scrollerdiv1=ie? first2 : document.getElementById("first2")
    scrollerdiv2=ie? second2 : document.getElementById("second2")
    move3(scrollerdiv1)
    scrollerdiv2.style.left=scrollerwidth
    }
    else if (document.layers){
    document.main.visibility='show'
    move1(document.main.document.first)
    document.main.document.second.left=parseInt(scrollerwidth)+5
    document.main.document.second.visibility='show'
    }
    }

    window.onload=startscroll

    </script>




    <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
    <layer id="first" left=1 top=0 width=&{scrollerwidth}; >
    <script language="JavaScript1.2">
    if (document.layers)
    document.write(slideimages[0])
    </script>
    </layer>
    <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
    <script language="JavaScript1.2">
    if (document.layers)
    document.write(slideimages[1])
    </script>
    </layer>
    </ilayer>

    <script language="JavaScript1.2">
    if (ie||dom){
    document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;backgroun d-color:'+scrollerbgcolor+'">')
    document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
    document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
    document.write(slideimages[0])
    document.writeln('</div>')
    document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
    document.write(slideimages[1])
    document.writeln('</div>')
    document.writeln('</div>')
    document.writeln('</div>')
    }
    </script>

    <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
    <a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>]

    I've upload my pictures (pinkblue.jgp etc) onto my website. When I view my website now www.thebootielady.co.uk I have a cursor that rolls across the screen. Which I'm guessing is my slideshow. But the pictures aren't in it. What am I doing wrong? I'm using Instant site which is the sitebuilder offered through 123 reg. This doesn't have anythging to do with it?

    Sorry as I said I'm a true novice
    Thanks in advance Gemma.

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    The script is not in your document and the images nowhere to be found.

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry not too sure what you mean. http://www.thebootielady.co.uk/page_1262635071068.html Is the page I'm trying to program. I've put the scipt on there. I'm guessing I need to do something with my images - that I'm not doing. Thanks Gemma.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Into which directory have you saved the target images?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've just uploaded them onto my website. Using the insert image icon on the tool bar. Thanks Gemma.

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    The image path in the script is incorrect, change them to
    Code:
    slideimages[1]='<img src="custom/pinkblue.jpg">'

  • #7
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [<script language="JavaScript1.2">

    /*
    Left-Right image slideshow Script-
    By Dynamic Drive (www.dynamicdrive.com)
    For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
    */

    ///////configure the below four variables to change the style of the slider///////
    //set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
    var scrollerwidth='864px'
    var scrollerheight='576px'
    var scrollerbgcolor='white'
    //3000 miliseconds=3 seconds
    var pausebetweenimages=3000


    //configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
    var slideimages=new Array()
    slideimages[0]='<a href="http://sitebuilder.123-reg.co.uk/users/13/13b76ae120960a4c6ebcf997f1aad68d"><img src="greenyellow.jpg" border=0"></a>'
    slideimages[1]='<img src="custom/pinkblue.jpg">
    slideimages[2]='<img src="custom/yellowblue.jpg">'
    slideimages[3]='<img src="custom/yellowpink.jpg">']

    First part of script now looks like as above. Still no joy though.
    Any more suggestions?
    Thanks
    Gemma

  • #8
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    The online script has not been updated

  • #9
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    816
    Thanks
    43
    Thanked 6 Times in 5 Posts
    You might be better off doing it in Flash.

    You can download this example from:

    http://aapress.com.au/dloads/flashslideshow.zip



    I added a few of your scaled down images so you could get an idea...

    It's only a demo.

    Extract the files to a folder and click on index.html
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

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