Question

I want to create a lightbox with javascript at minimum level (and no external .js file). I’m very new to JS so I don’t know how to solve some problems properly.

I have a set of links in a gallery-style format. Like this one:

<a href = "javascript:void(0)" onclick = "document.getElementById('overlay').style.display='block';document.getElementById('popUpContainer').style.display='block';document.getElementById('post03').style.display='block'" class="box col3" id="pan03"></a>

It loads a “panel” in lightbox style. Like these ones:

 <div id="popUpContainer">
  <div id="popUp">
    <div class="bigPan" id="post01"></div>
    <div class="bigPan" id="post02"></div>
    <div class="bigPan" id="post03"></div>
    <div class="bigPan" id="post04"></div>
    <div class="bigPan" id="post05"></div>
    <div class="bigPan" id="post06"></div>
    <div class="bigPan" id="post07"></div>
    <div class="bigPan" id="post08"></div>
    <div class="bigPan" id="post09"></div>
    <div class="bigPan" id="post10"></div>
    <div class="bigPan" id="post11"></div>
    <div class="bigPan" id="post12"></div>          
  </div>
 </div>

The css is this:

#overlay {
            width: 100%;
            height: 100%;
            display: none;
            position: fixed;
            background-color: #FFD365;
            z-index: 300;
            opacity: 0.7;

    }

    #close {
            width: 100%;
            height: 100%;
            z-index: 301;
            background-color: black;
    }

    #popUpContainer {
            position: absolute;
            display: none;
            left: 50%;
            top: 135px;
            padding: 0px;
    }

    #popUp {
            width: 800px;
            height: 520px;
            padding: 0px;
            position: relative;
            left: -50%;
            z-index: 400;
    }

    .bigPan {
            margin:0px;
            width: 100%;
            height: 100%;
            border-radius: 5px;
    }

    #post01 {background-color: #F47A44; display: none;}
    #post02 {background-color: #558F26; display: none;}
    #post03 {background-color: #E30613; display: none;}
    #post04 {background-color: #0E84B4; display: none;}
    #post05 {background-color: #4E2583; display: none;}
    #post06 {background-color: #95C11F; display: none;}
    #post07 {background-color: #009FE3; display: none;}
    #post08 {background-color: #D7007F; display: none;}
    #post09 {background-color: #E6332A; display: none;}
    #post10 {background-color: #E29924; display: none;}
    #post11 {background-color: #008D36; display: none;}
    #post12 {background-color: #EB5B93; display: none;}

Ok. Everything is working fine, except when I click another link to show another panel, it loads the last panel loaded before. This is the screenshot of the problem:

So I’d like to fix this problem and, if possible, I would like you to help me clean the code with the use of the <script> tag and arrays, I think.

Thank you in advance.

Here’s a jsFiddle

Answer 1

Maybe try something like this?:

<script type="text/javascript">
    function showPopup(anchor) {
        console.clear();
        var target = anchor.getAttribute("href").replace("#", "");
        console.log("Anchor clicked to show div with id: " + target);

        document.getElementById("overlay").style.display = "block";
        document.getElementById("popUpContainer").style.display = "block";

        var popup = document.getElementById("popUp");
        var posts = popup.getElementsByTagName("div");

        for (var i = 0; i < posts.length; i++) {
            var post = posts[i];
            if (post.id == target) {
                console.log("div with id: " + post.id + " is being shown");
                post.style.display = "block";
            } else {
                console.log("div with id: " + post.id + " is being hidden");
                post.style.display = "none";
            }
        }
    }
</script>

<a id="pan03" href="#post03" onclick="showPopup(this);return false;">post03</a>

I’ll try and get a jsFiddle up

UPDATE:

Here’s the jsFiddle:

http://jsfiddle.net/3jB9p/1/

UPDATE:

Code for the overlay to close itself:

<a id="overlay" href="#" onclick="closeOverlay(this);return false;"></a>

function closeOverlay(overlay) {
    overlay.style.display = "none";
    document.getElementById("popUpContainer").style.display = "none";
    document.getElementById("bigPan").style.display = "none";
}

UPDATE:

Here is a fiddle that fixes a few of my problems from previous things and cleaned up the code: http://jsfiddle.net/eqhRG/2/