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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with javascript code for my clickable slideshow.

    My slideshow links will only open inside my inline frame. I'm sure there's something simple I need to change in the code to make it open full screen. Here is my code. Any help would be so much appreciated! Thank you.

    Shawnel


    <head>
    <style type="text/css">
    .style1 {
    vertical-align: top;
    }
    </style>
    </head>

    <script type="text/javascript">
    <!--
    //preload images
    var image1=new Image()
    image1.src="Images/Picture Box/PictureBox1.jpg"
    var image2=new Image()
    image2.src="Images/Picture Box/PictureBox2.jpg"
    var image3=new Image()
    image3.src="Images/Picture Box/PictureBox3.jpg"
    var image4=new Image()
    image4.src="Images/Picture Box/PictureBox4.jpg"
    var image5=new Image()
    image5.src="Images/Picture Box/PictureBox5.jpg"
    //-->
    </script>

    <body style="margin-top: 0">

    &nbsp;<a href="javascript:slidelink()"><img src="Images/Picture Box/PictureBox1.jpg" name="slide" border="0" width="539" height="314" class="style1" /></a>
    <script type="text/javascript">
    <!--
    var step=1
    var whichimage=1
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    whichimage=step
    if (step<5)
    step++
    else
    step=1
    setTimeout("slideit()",3000)
    }
    slideit()
    function slidelink(){
    if (whichimage==1)
    window.location="learnmore.htm"
    else if (whichimage==2)
    window.location="contactus.htm"
    else if (whichimage==3)
    window.location="hungerheroes.htm"
    else if (whichimage==4)
    window.location="donate.htm"
    else if (whichimage==5)
    window.location="volunteer.htm"
    }
    //-->
    </script>

  • #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
    So *IS* this code you are showing being run inside an <iframe>??

    If so, the answer is simple. Just change
    Code:
       window.location = "...."
    to
    Code:
       top.location = "..."
    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 jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,027
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb Modified suggestion...

    You don't show the <iframe> code and I don't know where your images are located,
    but this example compresses you code a bit.

    Assumes you used 'Old Pedant's suggestion...
    Code:
    <html>
    <head>
    <style type="text/css">
    .style1 { vertical-align: top; }
    </style>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=249176
    
    /*
    var baseURL = 'Images/Picture Box/';
    var imgList = [
        "PictureBox1.jpg","PictureBox2.jpg","PictureBox3.jpg","PictureBox4.jpg","PictureBox5.jpg",
    ];
    */
    // This is test code for above
    var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
    var imgList = [
        "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg",
    ];
     
    var step=0;     // variable that will increment through the images
    
    function slideit(){
    //if browser does not support the image object, exit.
      if (!document.images) { return; }
    
      if (step < imgList.length-1) { step++; } else { step=0; }
      document.images.slide.src = baseURL+imgList[step];
      
    //call function "slideit()" every 3 seconds
      setTimeout("slideit()",3000);
    }
    
    function slidelink() {
      switch (step) {
        case 0 : top.location="learnmore.htm"; break;
        case 1 : top.location="contactus.htm"; break;
        case 2 : top.location="hungerheroes.htm"; break;
        case 3 : top.location="donate.htm"; break;
        case 4 : top.location="volunteer.htm"; break;
      }
    }
      
    window.onload = function() { slideit(); }
    
    </script> 
    </head>
    
    <body style="margin-top: 0">
    &nbsp;<a href="#" onclick="slidelink()">
    <img src="" name="slide" border="0" width="539" height="314" class="style1" /></a>
    </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Thank you!

    Thank you! Thank you! Thank you! Both answers worked great!

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,027
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Thumbs up

    Quote Originally Posted by Lady Shaw Shaw View Post
    Thank you! Thank you! Thank you! Both answers worked great!
    You're most welcome.
    Happy to help, I'm sure, from both of us.
    Good Luck!


  •  

    Posting Permissions

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