0

I looked up this guide on youtube on how to create a simple slideshow using javascript and it worked flawlessly. However I wanted each image to link to a specific href for the user to navigate.

<div id="slider_news">
    <a href="news1.html" id="slider_link"><imglink><img src="images/img1.jpg" id="image"></imglink></a>
    <div class="left_hold"><img onClick="img(-1)" class="left" src="images/arrow_left.png"></div>
    <div class="right_hold"><img onClick="img(1)" class="right" src="images/arrow_right.png"></div
</div>

This is my HTML, I created a link around the image using the "a" tag and gave it an ID(="slider_link")

var imageCount = 1;
var total = 5;
function img(x) {
    var image = document.getElementById('image');
    imageCount = imageCount + x;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;}
    image.src = "images/img"+ imageCount +".jpg";
    var sliderlink = document.getElementById("slider_link");
    if(imageCount = 2){sliderlink.href = "news2.html";} //img2.jpg link
    else if(imageCount = 3){sliderlink.href = "news3.html";} //img3.jpg link
    else if(imageCount = 4){sliderlink.href = "news4.html";} //img4.jpg link
    else if(imageCount = 5){sliderlink.href = "news5.html";} //img5.jpg link
}

window.setInterval(function imgA() {
    var image = document.getElementById('image');
    imageCount = imageCount + 1;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;} 
    image.src = "images/img"+ imageCount +".jpg";
    var sliderlink = document.getElementById("slider_link");
    if(imageCount = 2){sliderlink.href = "news2.html";} //img2.jpg link
    else if(imageCount = 3){sliderlink.href = "news3.html";} //img3.jpg link
    else if(imageCount = 4){sliderlink.href = "news4.html";} //img4.jpg link
    else if(imageCount = 5){sliderlink.href = "news5.html";} //img5.jpg link
},5000);

This is my javascript code, I make a variable out of the a tag using it's ID, then just add 4 else if statements and add the correct page for the correct image number.I basicly added everything starting from "var sliderlink" to the previously working slider.

The problem I'm having is that the html only changes once through the loop and stays on that page forever (news2.html). And once I click on the image and get directed to the page the whole slide starts acting wierd, not following the image order etc.

I'm sorry if the code seems a bit clunky and unorganized but hopefully you can understand what I'm doing wrong.

nempoBu4
  • 6,521
  • 8
  • 35
  • 40
Frans Bergström
  • 65
  • 2
  • 8
  • what's the `imglink` tag? – Diego Jan 13 '15 at 02:07
  • Ignore that it's just a tag I made to make the images go brighter on hover. `imglink:hover {-webkit-filter: brightness(120%);}`. I think it shoudln't be a problem? – Frans Bergström Jan 13 '15 at 02:14
  • It doesn't seem so. But read on some [reasons why not to do it](http://stackoverflow.com/questions/16867332/html5-why-not-use-my-own-arbitrary-tag-names). – Diego Jan 13 '15 at 02:23

1 Answers1

3

Your ifs use the = operator instead of the == or === ones. Try this:

if(imageCount === 2){sliderlink.href = "news2.html";} //img2.jpg link
else if(imageCount === 3){sliderlink.href = "news3.html";} //img3.jpg link
else if(imageCount === 4){sliderlink.href = "news4.html";} //img4.jpg link
else if(imageCount === 5){sliderlink.href = "news5.html";} //img5.jpg link

Also, in the setInterval call you shouldn't be trying to name the function passed to it. Try:

window.setInterval(function() {

instead of

window.setInterval(function imgA() {
Diego
  • 1,789
  • 10
  • 19
  • Oh man, was it actually the operators lol :P haven't done java/javascript for a few months and I still only know the very basic so I had totally forgot that ..... Thanks alot!!!! In my html dont I need to set `` for it to work and therefore need a name? – Frans Bergström Jan 13 '15 at 02:08
  • No, the `window.setInterval` call needs to be executed on load. Once that is done, the annonymous function you passed will be executed periodically. – Diego Jan 13 '15 at 02:17
  • How do I execute that? Same method and just switch the names? – Frans Bergström Jan 13 '15 at 02:22
  • The code inside script tags gets executed by the browser when the page is loading. Calling `setInterval` there is ok (I think...I'm lacking some knowledge about it :-( ). But other things like accessing the DOM is better done from other events like in [this post](http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) – Diego Jan 13 '15 at 02:56