www.webdeveloper.com
Results 1 to 3 of 3

Thread: Javascript slideshow

  1. #1
    Join Date
    Jul 2013
    Posts
    32

    Javascript slideshow

    Hi all,

    I have a demo slideshow code here that wont seem to work, i drew this up with no testing and was trying to test myself to see if i could do it. many, many hours down the line im stumped. I cannot see any problems with the code but evidently there is.

    Could someone please write back with either reasons why its not working or a fix.

    Please also be aware im still a young programmer and therefore please explain any posts that you submt back to me.
    Code:
    <html>
    <meta charset="utf-8">
    <head>
    <style>
    #picture
    {
    width:255px;
    height:200px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:0px;
    }
    
    input.css
    {
    color:#00248F;
    font-weight:bold;
    text-size:84%;
    border:1px solid #00248F;
    filter:progid:DXImageTransform.Microsoft.Gradient  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#B2BDDD');
    }
    
    input.css2
    {
    color:#4D66B1;
    font-weight:bold;
    text-size:84%;
    border:1px solid #00248F;
    filter:progid:DXImageTransform.Microsoft.Gradient  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#C1CAE4');
    </style>
    
    <script type="text/javascript">
    var counter= 1;
    var istrue = false;
    var timedelay=4000;
    var images =
    	[
    	"image1",
    	"image2",
    	"image3"
    	]
    ;
    var running;
    
    document.slideshow.src=images[counter-1]; <!--starts the slideshow at the first image-->
    
    function start()
    {
    	if(!istrue) 
    	{
    	istrue ==true;
    	counter = counter++;
    	document.slideshow.src=images[counter-1];  <!--Changes to the next image when called-->
    	}
    
    
    	if(counter==images.length)  <!--goes back to the starting image when at the end-->
    	{
    	counter==1
    	}
    }
    
    function pauseandplay()
    {
    	if(istrue)
    	{
    	istrue==false;
    	running= setIntervals(start(),timedelay); <!--starts the slideshow and changes the boolean ready for when clicked again-->
            }
    	else if(!istrue)
    	{
    	window.clearInterval(running);  <!--pauses the slideshow and changes the boolean to be ready for when clicked again, this time to start the slideshow-->
    	istrue==true;
    	}
    }
    
    function direct(direction)
    {
    
    var imagenumber = counter + direction;
    
    	if(imagenumber=images.length) <!--if the function is called when the last image is being displayed resets the counter to show the first image in the array-->
    	{
    	imagenumber==0
    	}
    	
    	if(imagenumber <0)
    	{
    	imagenumber==images.length -1; <!--if the function is called when the first image is being displayed with a minus direction, resets the counter to show the last image in the array-->
    	}
    
    	if(istrue)
    	{
    	istrue ==false;
    	document.slideshow.src=images[imagenumber]; <!--shows the selected image and clears the loop if not paused-->
    	window.clearInterval(running);
    	}
    
    	
    }
    </script>
    </head>
    
    <bod>
    <img src="http://media.gdgt.com/img/product/15/brs/google-chrome-os-od0-800.jpg" name="slideshow" id="picture">
    <div id="wrapping" style="margin-left:auto;margin-right:auto;background-color:silver;">
    <input type="button" value="Last" class="css" onclick="direct(-1)" onmouseout="this.className='css'" onmouseover="this.className='css2'";>
     <input type="button" value="Pause/Play" class="css" onclick="pauseandplay()" onmouseout="this.className='css'" onmouseover="this.className='css2'";>
    <input type="button" value="Next" class="css" onclick="direct(1)" onmouseout="this.className='css'" onmouseover="this.className='css2'";>
    </div>
    </body>
    </html>
    Thanks for all and any help.


  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443

    Lightbulb

    You have a number of errors in the CSS definitions as well as the syntax of your script.

    For example: FF browser does not recognize these lines...
    Code:
    /* filter:progid:DXImageTransform.Microsoft.Gradient  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#B2BDDD'); */
    
    or
    
    /* filter:progid:DXImageTransform.Microsoft.Gradient  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#C1CAE4'); */
    You can not reference an element before it is defined.
    For example:
    Code:
      document.slideshow.src=images[counter-1]; <!--starts the slideshow at the first image-->
    At the least it should be:
    Code:
    window.onload = function() {
      document.slideshow.src=images[counter-1]; <!--starts the slideshow at the first image-->
    }
    I cannot test the logic for the display as you have not provided a pathway to the images.
    You will need to test that portion yourself.

    I am a bit suspicious of this function...
    Code:
    function pauseandplay() {
      if(istrue) {
        istrue==false;
        running= setIntervals(start(),timedelay);  <!--starts the slideshow and changes the boolean ready for when clicked again-->
      } else {
        if(!istrue) {
          window.clearInterval(running);  <!--pauses the slideshow and changes the boolean to be ready for when clicked again, this time to start the slideshow-->
          istrue==true;
        }
      }
    }
    If you test for the 'istrue' to be true, and it is really false, why do you immediately test the 'istrue' to be false
    in the else portion of the logic? If it is false to get to the else, then why test it to be false again???
    Note: You could find all of the above errors in FF or Chrome browsers if you juse use the error console.
    It tells you a lot about why your code is not running because of typographical errors.
    Logic errors take a bit longer.

    The following runs without any error console errors, but it does not display anything because it has no image references.
    Code:
    <html>
    <meta charset="utf-8">
    <head>
    <style>
    #picture {
      width:255px;
      height:200px;
      margin-left:auto;
      margin-right:auto;
      margin-top:0px;
      padding-top:0px;
    }
    
    input.css {
      color:#00248F;
      font-weight:bold;
      font-size:84%;
      border:1px solid #00248F;
    /* filter:progid:DXImageTransform.Microsoft.Gradient  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#B2BDDD'); */
    }
    
    input.css2 {
      color:#4D66B1;
      font-weight:bold;
      font-size:84%;
      border:1px solid #00248F;
    /* filter:progid:DXImageTransform.Microsoft.Gradient  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#C1CAE4'); */
    }
    </style>
    
    <script type="text/javascript">
    var counter= 1;
    var istrue = false;
    var timedelay=4000;
    var images = [
    	"image1",
    	"image2",
    	"image3"
    ];
    var running;
    
    window.onload = function() {
      document.slideshow.src=images[counter-1]; <!--starts the slideshow at the first image-->
    }
    
    function start() {
      if(!istrue) {
        istrue ==true;
        counter = counter++;
        document.slideshow.src=images[counter-1];  <!--Changes to the next image when called-->
      }
      if(counter==images.length) { <!--goes back to the starting image when at the end-->
        counter==1
      }
    }
    
    function pauseandplay() {
      if(istrue) {
        istrue==false;
        running= setIntervals(start(),timedelay);  <!--starts the slideshow and changes the boolean ready for when clicked again-->
      } else {
        if(!istrue) {
          window.clearInterval(running);  <!--pauses the slideshow and changes the boolean to be ready for when clicked again, this time to start the slideshow-->
          istrue==true;
        }
      }
    }
    
    function direct(direction) {
      var imagenumber = counter + direction;
      if(imagenumber=images.length) { <!--if the function is called when the last image is being displayed resets the counter to show the first image in the array-->
        imagenumber==0
      }
      if(imagenumber <0) {
        imagenumber==images.length -1; }
    <!--if the function is called when the first image is being displayed with a minus direction, resets the counter to show the last image in the array-->
      if(istrue) {
        istrue ==false;
        document.slideshow.src=images[imagenumber]; <!--shows the selected image and clears the loop if not paused-->
        window.clearInterval(running);
      }
    }
    </script>
    </head>
    
    <bod>
    <img src="http://media.gdgt.com/img/product/15/brs/google-chrome-os-od0-800.jpg" name="slideshow" id="picture">
    <div id="wrapping" style="margin-left:auto;margin-right:auto;background-color:silver;">
     <input type="button" value="Last" class="css" onclick="direct(-1)" onmouseout="this.className='css'" onmouseover="this.className='css2'";>
     <input type="button" value="Pause/Play" class="css" onclick="pauseandplay()" onmouseout="this.className='css'" onmouseover="this.className='css2'";>
     <input type="button" value="Next" class="css" onclick="direct(1)" onmouseout="this.className='css'" onmouseover="this.className='css2'";>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Jul 2013
    Posts
    32

    Working code

    Hi JMRKER,

    Thanks for your help, i fiddlered about with your reviewed version of the code and have now have the final copy in which im using on our site. Unfortunatly, i cannot supple the images used, but by all means shove some images in an have a look

    Code:
    <html>
    <meta charset="utf-8">
    <head>
    <style>
    #picture {
      width:255px;
      height:200px;
      margin-left:auto;
      margin-right:auto;
      margin-top:0px;
      padding-top:0px;
    }
    
    
    #container2
    {
    float:left;
    border:thin ridge silver;
    magin-bottom:5px;
    margin-left:-5px;
    background-image:url("https://mycampus.petroc.ac.uk/MarketingandSchoolLiaison/Marketing_Images/_w/Sharepoint%20Tab%20Image%20copy_jpg.jpg");
    background-size:contain;
    }
    
    .bordered
    {
    float:left;
    cursor:pointer;
    padding:0px;
    margin:0px;
    border:0xp;
    }
    
    #wrapping
    {
    margin-left:63px;
    margin-right:63px;
    }
    
    </style>
    
    <script type="text/javascript">
    var clickcounts = 0;
    var counter= 0;
    var istrue = false;
    var timedelay=3000;
    var images = [
    	"image1",
    	"image2",
    	"image3",
    	"image4"
    ];
    var running;
    
    
    function play() {
    
    	if(istrue ==false)
    	{
    	istrue = true;
     	running= setInterval("direct(1)",timedelay); 
    	}
    
    	
    	else if (istrue == true)
    	{
    	istrue = false;
    	window.clearInterval(running);
    	}
    
    }
    
    
    function direct(direction) {
    
      var imagenumber = counter + direction;
      var imglength = images.length-1;
      counter = counter + direction;
     
    	if (imagenumber>imglength) 
    	{
    	imagenumber = 0;
    	counter = 0;
    	}
    
    	if (imagenumber < 0) {
    	imagenumber = imglength;
    	counter =imglength
    	}
    
      document.slideshow.src=images[imagenumber]; 
    }
    
    function clicked() <!-- just a function to change the play and pause button around -->
    {
      clickcounts++;
    
    	if(clickcounts == 1)
    	{
    	document.pauseplay.src="play image";
    	}
    	else if(clickcounts>1)
    	{
    	clickcounts = 0;
    	document.pauseplay.src="backwards image";
    	}
    }
    
    window.onload=play();
    
    </script>
    </head>
    
    <body>
    <div id="allcontainer" style="width:260px;">
    <img src="image1" name="slideshow" id="picture">
    <div id="wrapping">
    <a  class="bordered"  onclick="direct(-1)"><img src="backwards button"></a>
    <a  class="bordered"  onclick="play();clicked()"><img src="pause button"  name="pauseplay"></a>
    <a  class="bordered"  onclick="direct(1)"><img src="forward button"></a>
    </div>
    </div>
    
    </body>
    </html>
    The fact that you couldn't figger out my istrue boolean was because i wasn't that sure myself.
    Moreover, the css that would not work in FF only works in IE to my knowledge but i have re-done how the button works anyway.

    Thanks again.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles