CODEWITHSUNDEEP
javascriptslideshow
SecretWalrus
SecretWalrus

Reputation: 99

Images won't show up in javascript slideshow

Images won't show up in javascript slideshow, I've been working on this for three days now and I'm sick of it. I've even started to cheat and just copy other sliders I've seen online (open source) and use those. This is for work, please help me. 

<div id="slideshow" style="width:960px;height:500px;overflow:hidden;">
  <div id="slideshowimage" style="width:960px;height:500px;overflow:hidden;">
  </div>
  <div id="slideshowcontrols" style="width:960px;height:500px;overflow:hidden;">
    <a onClick="alterimage(-1);">Prev</a>
    <a onClick="alterimage(1);">Next</a>
  </div>
</div>

<script type="text/javascript">
    var images = new Array;
    images[1] = "Images/image1.jpg";
    images[2] = "Images/image2.jpg";
    images[3] = "Images/image3.jpg";
    var presentimage = 1;
    function alterimage(alter){
        presentimage += alter;
        document.getElement('slideshow').innerHTML = presentimage;
    }
    alterimage(0);
</script>

Upvotes: 0

Views: 1628

Answers (3)

robertp
robertp

Reputation: 3642

Almost there...

I've found a few things in your code and I have fixed them:

  • There isn't document.getElement but document.getElementById('id')
  • You won't have a slideshow without images, so I added the <img> tag.
  • Use CSS classes for styling instead of inline styling, it is a lot more readable and easier to maintain.

Here is my updated Fiddle: http://jsfiddle.net/robertp/jWLZz/10/

I had to alter the code quite a bit to make it work - and to make it easier to read:

  • I altered the DOM by removing the inline CSS and adding the styling through classes
  • I added the <img> tag, so that you can have images instead of just their names
  • I added proper JavaScript event handlers to both the <a> tags
  • I updated the JavaScript function, so now it swaps the image source of the image tag once you click on the previous or next links.

And just as a suggestion, I would not start filling up my arrays from index 1 but 0 to keep up with the way arrays work in JavaScript.

I also added the code bits to my answer below, I hope it all makes sense.

Updated HTML:

<div id="slideshow" class="slideshow">
    <img id="slideshowimage"/>

    <div id="slideshowcontrols" class="slideshow">
        <a href='#' class='prev-link'>Prev</a>
        <a href='#' class='next-link'>Next</a>
     </div>
</div>

Updated JavaScript:

var images = new Array;
images[0] = "http://placekitten.com/200/100";
images[1] = "http://placekitten.com/300/200";
images[2] = "http://placekitten.com/200/200";
var presentimage = 0;

document.getElementsByClassName('next-link')[0].addEventListener('click', function() {
    alterimage(1);
});
document.getElementsByClassName('prev-link')[0].addEventListener('click', function() {
    alterimage(-1);
});

var alterimage = function alterimage(alter){
    presentimage += alter;
    document.getElementById('slideshowimage').setAttribute('src', images[presentimage]);
}
alterimage(0);

Upvotes: 0

egl
egl

Reputation: 167

Currently you're not accessing the images stored in your array, you just set the innerHTML of the slideshow div to your counter. I added an empty img tag to the slideshowimage div. The src attribute of that img tag is then set to the corresponding image url in the array when you pass and array index through the alterimage function. 

<div id="slideshow" style="width:960px;height:500px;overflow:hidden;">
    <div id="slideshowimage" style="width:960px;height:500px;overflow:hidden;">
         <img src=""/>
    </div>
    <div id="slideshowcontrols" style="width:960px;height:500px;overflow:hidden;">
        <a onClick="alterimage(-1);">Prev</a>
        <a onClick="alterimage(1);">Next</a>
    </div>
</div>

<script type="text/javascript">
    var images = new Array;
    images[0] = "https://www.google.com/images/srpr/logo9w.png";
    images[1] = "https://www.google.com/images/srpr/logo10w.png";
    images[2] = "https://www.google.com/images/srpr/logo11w.png";
    var presentimage = 0;

   function alterimage(alter){
       presentimage += alter;
       document.getElementById('slideshowimage').childNodes[1].setAttribute('src',
       images[presentimage]);
   }
    alterimage(2);
</script>

JSFiddle: http://jsfiddle.net/Lrrpu/

Upvotes: 0

putvande
putvande

Reputation: 15213

There is no such function as getElement, it should be getElementById:

document.getElementById('slideshow').innerHTML = presentimage;

Upvotes: 2

Related Questions