0

I'm trying to make a simple gallery for my website, I need to display an image thumbnail and a table side by side but I've got problems with the next button! I'm working on the image atm, but when I press next button it opens the image in a new windows, like if I clicked on the thumbnail! What's wrong?

<body>
<div id="page"> 
    <div id="header">
        <div class="title">title</div>
     </div>
<div class="menu-wrap" style="position:relative; z-index:9999">    <nav class="menu">
        <ul class="clearfix">
            <li><a href="index.html">Home</a></li>
             <li><a href="link1.html">link1</a></li>
              <li><a href="link2.html">link2</a></li>
        </ul>
    </nav>
    </div>

    <div id="pageContent">
    <div class="articleContent">
      <div class="articleTitle">L'esterno della Cattedrale</div>

         <div class="item-page"  >
         <a href="images/esterno/esterno01.jpg" target="_blank"><img id="immagine" src="images/esterno/esterno01.jpg" height="50" width="50" style="margin-left:15%;margin-top:5%" data-value="A"/></div>
<div id="tabella" style='float:left'><p> prova2</p></div>

    <br><div class='button' onclick="next()">Next</div>

                         </div>
    </div>


    </div>

</div>
    <div id="footer"></div>

    </body>
<script type="text/javascript">
$(window).load(function() {
  $('#slider').nivoSlider({
  effect:'fade',
  pauseTime: 5000
  });
});


function next() {
var text = "";
var image = "";

var image = document.getElementById("immagine").getAttribute('data-value');
   //alert(image);
switch(image) {
case "A":
    text = "2";
    image=' <a href="images/esterno/esterno02.jpg" target="_blank"><img src="images/esterno/esterno02.jpg" height="50" width="50" style="margin-left:15%;margin-top:5%" data-value="B"/>';
    break;
case "B":
    text = "3";
    image=' <a href="images/esterno/esterno03.jpg" target="_blank"><img src="images/esterno/esterno03.jpg" height="50" width="50" style="margin-left:15%;margin-top:5%" data-value="C"/>';
    break;
case "C":
    text = "4";
    image=' <a href="images/esterno/esterno04.jpg" target="_blank"><img src="images/esterno/esterno04.jpg" height="50" width="50" style="margin-left:15%;margin-top:5%" data-value="D"/>';
    break;

default:
    text = "default";
}
document.getElementById("immagine").innerHTML = image;
document.getElementById("tabella").innerHTML = text;
}
</script>

</body>
0

You are missing closing </a> tag. Since it's not closing, it is clicked when you click on "Next".

Change

<div class="item-page"><a href="images/esterno/esterno01.jpg" target="_blank"><img id="immagine" src="images/esterno/esterno01.jpg" height="50" width="50" style="margin-left:15%;margin-top:5%" data-value="A"/></div>

to

<div class="item-page"><a href="images/esterno/esterno01.jpg" target="_blank"><img id="immagine" src="images/esterno/esterno01.jpg" height="50" width="50" style="margin-left:15%;margin-top:5%" data-value="A"/></a></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.