CODEWITHSUNDEEP
javascripthtml
howdydoody
howdydoody

Reputation: 93

How to get the next button to show hidden gallery of thumbnail images using JavaScript

I am trying to navigate to a hidden gallery (div) of thumbnail images using JavaScript onclick event. Any advice would be greatly appreciated. Thanks in advance.

Here is a small clip of the HTML:

<div id="gall1" class="gall">
    <img src="images/Vince1.jpg" height="50px" width="50px" alt="Vince1.jpg" onmouseover="showImage('Vince1.jpg');"/>
    <img src="images/Vince2.jpg" height="50px" width="50px" alt="Vince2.jpg" onmouseover="showImage('Vince2.jpg');"/>
    <img src="images/Vince3.jpg" height="50px" width="50px" alt="Vince3.jpg" onmouseover="showImage('Vince3.jpg');"/>
    <img src="images/Vince4.jpg" height="50px" width="50px" alt="Vince4.jpg" onmouseover="showImage('Vince4.jpg');"/>
    <img src="images/Vince5.jpg" height="50px" width="50px" alt="Vince5.jpg" onmouseover="showImage('Vince5.jpg');"/>
    <img src="images/Vince6.jpg" height="50px" width="50px" alt="Vince6.jpg" onmouseover="showImage('Vince6.jpg');"/>
</div>
<div id="gall2" class="gall">
    <img src="images/Martin1.jpg" height="50px" width="50px" alt="Martin1.jpg" onmouseover="showImage('Martin1.jpg');"/>
    <img src="images/Martin2.jpg" height="50px" width="50px" alt="Martin2.jpg" onmouseover="showImage('Martin2.jpg');"/>
    <img src="images/Martin3.jpg" height="50px" width="50px" alt="Martin3.jpg" onmouseover="showImage('Martin3.jpg');"/>
    <img src="images/Martin4.jpg" height="50px" width="50px" alt="Martin4.jpg" onmouseover="showImage('Martin4.jpg');"/>
    <img src="images/Martin5.jpg" height="50px" width="50px" alt="Martin5.jpg" onmouseover="showImage('Martin5.jpg');"/>
    <img src="images/zach.jpg" height="50px" width="50px" alt="zach.jpg" onmouseover="showImage('zach.jpg');"/>
</div>
<div id="navigate">
    <img src="images/previous.jpg" height="50px" width="50px" alt="previous" onclick="return prevGall();"/>
    <img src="images/next.jpg" height="50px" width="50px" alt="next" onclick="return nextGall();"/>
</div>

and the JavaScript:

function showImage(imgName) 
{

    var largeImg = document.getElementById("large");
    var thePath = "images/";
    var theSource = thePath + imgName;

    largeImg.src = theSource;
    largeImg.alt = imgName;
}

function nextGall()
{
    var next = 0;
    var gallery = new Array();
    gallery = document.getElementByClassName("gall");


    if(next >= gallery.length)
    {
        next = 0;
    }

    next += 1;

    for (var x = 0; x < gallery.length; x++)
    {
        gallery[x].style.display = "none";
    }

    gallery[next].style.dislpay = "block";
    return false;
}

Upvotes: 0

Views: 251

Answers (2)

Cole Lawrence
Cole Lawrence

Reputation: 613

document.getElementByClassName should be document.getElementsByClassName

So:

var next = 0;
function nextGall()
{
    var gallery = document.getElementsByClassName("gall");


    if(next >= gallery.length)
    {
        next = 0;
    }

    next += 1;

    for (var x = 0; x < gallery.length; x++)
    {
        gallery[x].style.display = "none";
    }

    gallery[next].style.display = "block";
    return false;
}

Upvotes: 1

Muhammad Wasim
Muhammad Wasim

Reputation: 82

I think you need this.

var next = 0;
function nextGall()
{

    var gallery = new Array();
    gallery = document.getElementByClassName("gall");


    if(next >= gallery.length)
    {
        next = 0;
    }

    next += 1;

    for (var x = 0; x < gallery.length; x++)
    {
        gallery[x].style.display = "none";
    }

    gallery[next].style.dislpay = "block";
    return false;
}

Upvotes: 0

Related Questions