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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Utah
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Beginner Help - Creating a clickable slide show

    I'm very new at this and have very limited HTML/Java Script knowledge, but since my designer is very busy, I thought I'd take a look at some of this coding and see if I can learn how to do certain things myself.

    I'm trying to create a clickable slide show. I read all the instructions given on www.javascriptkit.com and created the following:

    Code:
     Slide Show Code
    
    <script type="text/javascript">// <![CDATA[
    //preload images
    var image1=new Image()
    image1.src="http://www.moxiecouture.com/images/princesspettiset2.jpg"
    var image2=new Image()
    image2.src="http://www.moxiecouture.com/images/princesspettiset2.jpg"
    var image3=new Image()
    image3.src="http://www.moxiecouture.com/images/daddysprincesstutuonesielarge.jpg"
    // ]]></script>
    <p><a href="javascript:slidelink()"><img src="../images/princesspettiset2.jpg" border="0" alt="" width="50" height="75" /></a></p>
    <script type="text/javascript">// <![CDATA[
    var step=1
    var whichimage=1
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    whichimage=step
    if (step<3)
    step++
    else
    step=1
    setTimeout("slideit()",1800)
    }
    slideit()
    function slidelink(){
    if (whichimage==1)
    window.location="http://moxiecouture.com/category_3/Petti-Sets.htm"
    else if (whichimage==2)
    window.location="http://moxiecouture.com/category_3/Petti-Sets.htm"
    else if (whichimage==3)
    window.location="http://moxiecouture.com/category_2/TuTu-One-Pieces.htm"
    }
    // ]]></script>

    My issue with this is that it's not rotating the images. Of course, there is something I'm missing even though I tried to read the instructions carefully. Can anyone help me understand what I'm doing wrong?

    Thanks!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    That's awfully ancient code, you know. Won't produce very pleasing effects.

    But anyway, you are missing one vital point: You don't *HAVE* any <img> tag with a name="slide" so the line
    Code:
    document.images.slide.src=eval("image"+step+".src")
    is getting an error.

    Now add a name to your main <img> tag.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Very basic round robin slide show.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><!--This page generated Mon Aug 10 20:24:09 PDT 2009-->
    <head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>My Minishow: Click image to change</title>
    <style type='text/css'>
    body{margin:0px;background-color:#000;color:#fff}
    #main{width:100%;height:100%}
    #image_container{text-align:center;vertical-align:middle}
    #text {font-size:18px;font-weight:bold}
    img{border:2px solid white;}
    </style>
    </head><body><table id="main"><tbody><tr><td id="image_container"></td></tr></tbody></table>
    <script type='text/javascript'>
    imagelist = Array;imagelist = [
    "myshow-101.jpg",
    "myshow-102.jpg",
    "myshow-103.jpg",
    "myshow-104.jpg",
    "myshow-105.jpg",
    "myshow-106.jpg",
    "myshow-107.jpg",
    "myshow-108.jpg",
    "myshow-109.jpg",
    "myshow-110.jpg"];
    function load_image(count){document.getElementById("image_container").innerHTML=("<p id=\"text\" >Image "+(count+1)+" of "+imagelist.length+"</p><a href=\"#\" onclick='increment(count);'><img src=\""+imagelist[count]+"\"></a><p id=\"text\" >"+imagelist[count]+"</p>");}
    var count = 0;
    function increment(){(count=count+1);count=count%imagelist.length;load_image(count)}
    window.onload=load_image(count);
    </script>
      </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Utah
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I added the name as you advised in my HTML editor, and for some reason, when I hit update, it deletes the name I added. I'm adding it right here:

    Code:
     
    <p><a href="javascript:slidelink()"><img src="../images/princesspettiset2.jpg" border="0" alt="" width="100" height="56" /></a></p>
    So, it reads (after I add the name):

    Code:
    <p><a href="javascript:slidelink()"><img src="../images/princesspettiset2.jpg" name="slide"  border="0" alt="" width="100" height="56" /></a></p>
    And it automatically defaults the code I first posted, after I hit update.

    Do you have any clue why this would be happening. And since you mentioned this code is not that great, what would you suggest ???

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Utah
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    DrDos - Just saw the code you posted. So, if I do this, will it work?

    Code:
    <!--CTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//E--><!--This page generated Mon Aug 10 20:24:09 PDT 2009--><!-- body{margin:0px;background-color:#000;color:#fff} #main{width:100%;height:100%} #image_container{text-align:center;vertical-align:middle} #text {font-size:18px;font-weight:bold} img{border:2px solid white;} -->
    <table id="main">
    <tbody>
    <tr>
    <td id="image_container">&nbsp;</td>
    </tr>
    </tbody>
    </table>
    <script type="text/javascript">// <![CDATA[
    imagelist = Array;imagelist = 
    ["http://www.moxiecouture.com/images/princesspettiset2.jpg",
    "http://www.moxiecouture.com/images/princesspettiset2.jpg",
    "http://www.moxiecouture.com/images/daddysprincesstutuonesielarge.jpg"];
    function load_image(count){document.getElementById("image_container").innerHTML=("<p id="text" >Image "+(count+1)+" of "+imagelist.length+"</p><a href="#" onclick='increment(count);'><img src=""+imagelist[count]+""></a><p id="text" >"+imagelist[count]+"</p>");}
    var count = 0;
    function increment(){(count=count+1);count=count%imagelist.length;load_image(count)}
    window.onload=load_image(count);
    // ]]></script>

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    That should work, you've changed the data in the array correctly, but experiment with the whole file that I gave you first because the style is important too. Then take what you need from it.

  • #7
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Utah
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    That should work, you've changed the data in the array correctly, but experiment with the whole file that I gave you first because the style is important too. Then take what you need from it.
    I tried, and it gives me a blank white box, it's not pulling the images. I think I might have done something wrong. Is there anything else I need to do besides just switching the image names?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    http://www.javascriptkit.com/script/cutindex21.shtml

    If you can't find something usable there, we can find dozens if not hundreds of others.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by Camila View Post
    And it automatically defaults the code I first posted, after I hit update.
    Surely the fault of whatever tool you are using. What is it, DreamWeaver? (Which I not-so-affectionately have dubbed "DreadWhacker".)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    The original code that I pasted works fine with your links. But I noticed that the code you are trying to use has the backslash escape characters missing, so no, that won't work. Just paste the original code into a blank document and change the links.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Of course, if she is using DuckWalker, who knows what it might be doing to her code? If it can remove the name="slide" from her <img>, it's capable of all sorts of evil.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Utah
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Surely the fault of whatever tool you are using. What is it, DreamWeaver? (Which I not-so-affectionately have dubbed "DreadWhacker".)
    I'm just using the HTML editor of my hosting company, which uses OSCommerce.

  • #13
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Utah
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Of course, if she is using DuckWalker, who knows what it might be doing to her code? If it can remove the name="slide" from her <img>, it's capable of all sorts of evil.

    Lol.. you are right about that! I'm going to contact the hosting admin to see why it's doing all these weird things to my codes!

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    When in doubt, revert to using Notepad. It is completely neutral. You can write anything you want and it will leave it alone.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Utah
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I pasted the original code in notepade, made the changes, the copied and pasted it to the HTML editor, and soon as I hit update, I copied the code and pasted it directly under the original I had copied. Well, needless to say, there were a bunch of differences. According to what you are saying, this is not normal, so, I'll just have to figure out with them what is going on.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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