Teochew Thunder: Web Tutorial: The Lightbox Effect (Part 1/2)

The Lightbox Effect is named after a plugin (Lightbox) created by Lokesh Dhakar.

OK, but what does it do?

It's an overlay on the current page, dimming the entire page with displayed content in the middle, with a button to close it. That's it! Nothing fancy. It's a simple and elegant method of housing content in the Lightbox without having to let it take up precious real estate on the parent page.

Other versions may have fancy borders, loading animations and countless nifty little features. We're going to do none of those today, and just focus on the basics.

So why write our own?

It's fun! Always a good reason to do anything.

Also, I want to show you that it's not all that complex at its core. That is, if you just want a Lightbox Effect without any funny stuff, it's possible with just a few lines of code. No clunky JavaScript libraries. Just good old-fashioned JavaScript and HTML, with a bit of CSS3 thrown in for shits and giggles.

So let's start with this bit of code.

<!DOCTYPE html>
<html>
    <head>
        <title>Lightbox test</title>
        <style type="text/css">
            .content_wrapper
            {
                width:80%;
                height:80%;
                border:1px solid #777777;
                overflow:auto;
                margin-left:auto;
                margin-right:auto;
margin-top:5%;
                background-color:#FFFFFF;
            }

            .screen_wrapper
            {
                position:fixed;
                z-index:900;
                background: rgba(0,0,0,0.8);
                left:0px;
                top:0px;
                width:100%;
                height:100%;
            }

            .btn_close
            {
                width:95%;
                margin-left:auto;
                margin-right:auto;
                text-align:right;
                color:#999999;
                cursor:pointer;
            }

            .content_box
            {
                width:95%;
                margin-left:auto;
                margin-right:auto;
            }
        </style>
    </head>

    <body>
        <div id="wrapper" class="screen_wrapper">
            <div id="lb_wrapper" class="content_wrapper">
                <div class="btn_close">
                    x close 
                </div>
                <div id="lb_content" class="content_box">

                </div>
            </div>
        </div>

        <div>
            <div>Photo 1</div>
            <div>Photo 2</div>
            <div>Photo 3</div>
            <div>Photo 4</div>
            <div>Photo 5</div>        </div>
    </body>
</html>

Open it in your browser and you should see a translucent grey film over your page, with a white box in the middle. There's no content at the moment, and there's a "x close" button on the right. It doesn't work either. You need to write script for that!

But first things first - this is what your Lightbox looks like when visible. We're going to turn it invisible. Make the following change to the CSS.

            .screen_wrapper
            {
                position:fixed;
                z-index:900;
                background: rgba(0,0,0,0.8);
                left:0px;
                top:0px;
                width:100%;
                height:100%;
                display:none;
            }

Now when you refresh your browser, your screen is back to its pristine clickable self!

Didn't we just do that two months ago?

Ah, you've been paying attention. Yes, we did pretty much the same thing for LKY's Memorial. So if you went through that one, the first part of this web tutorial should be easier than Britney Spears on crack.

The difference here is that we're going to populate different content here on the fly. And, of course, in here we define proper CSS classes.

The screen_wrapper class is the translucent black overlay on the screen. Look up LKY's Memorial for the explanation regarding this bit of code.

The content_wrapper class sits in the middle of the overlay and has the following properties.

- width:80%, height:80% fills up the screen with a little border around the edges, to show part of the screen beneath this layer.
- border:1px solid #777777; gives the content_wrapper a nice grey border.
- overflow:auto ensures that any content that goes outside this box will be available through the use of (very ugly but functional) scrollbars.
- margin-left:auto, margin-right:auto puts the box dab center of the overlay.

The btn_close class is for the clickable element that closes your Lightbox.
- width:100% makes sure the div occupies the entire width of content_wrapper.
- text-align:right because you want the text to be aligned right, duh.
- cursor:pointer to change the mouse cursor to a pointer when you roll over the area, indicating that this guy can be clicked on.

And the content_box class is for the div we'll be populating with content!
- width:100% makes sure the div occupies the entire width of content_wrapper.
- padding:20px makes sure your content doesn't stray too close to the borders, which would make for some really ugly effects.

Now for some data!

We need some JavaScript for this. Add this code to your head tag.

    <head>
        <title>Lightbox test</title>
        <style type="text/css">
            .content_wrapper
            {
                width:80%;
                height:80%;
                border:1px solid #777777;
                overflow:auto;
                margin-left:auto;
                margin-right:auto;
                margin-top:5%;
                background-color:#FFFFFF;
            }

            .screen_wrapper
            {
                position:fixed;
                z-index:900;
                background: rgba(0,0,0,0.8);
                left:0px;
                top:0px;
                width:100%;
                height:100%;
                display:none;
            }

            .btn_close
            {
                width:100%;
                text-align:right;
                color:#999999;
                cursor:pointer;
            }

            .content_box
            {
                width:100%;
                padding:20px;
            }
        </style>

        <script>
            function open_lb(varid)
            {
                document.getElementById("wrapper").style.display="block";
                document.getElementById("lb_content").innerHTML=content[varid];
            }

            function close_lbt()
            {
                document.getElementById("wrapper").style.display="none";
            }
        </script>
    </head>

The close_lb() function is straightforward - just set the wrapper div's display property to none, thus rendering it - and all content within it - to vanish. For that to happen, you need to add this code in the HTML, like so.

                <div class="btn_close" onclick="close_lb();">
                    x close 
                </div>

The open_lb() function does a wee bit more - it sets the wrapper div's display property to block, thus rendering it - and all content within it - to appear. And then it uses the varid variable which was passed in as an argument, to populate the lb_content div.

So let's create the content array, and fill it with data like so. The images are, of course, to be saved to the same folder as your HTML file.

Yep, I'm going to use this opportunity to plug pictures of my nephew Paul. Do I hear a collective groan from the audience? Well, fuck you. If you guys can post your bimbotic selfies and pics of your cats and your lunch all over Facebook and Instagram, I am damn well going to post pics of my baby nephew. Deal with it!

For the purposes of brevity, the actual HTML code for the content array is listed here.

Now adjust your HTML so that clicking on the labels "Photo 1" to "Photo 5" brings up the Lightbox.

        <div>
            <div><a href="#" onclick="open_lb(0);">Photo 1</a></div>
            <div><a href="#" onclick="open_lb(1);">Photo 2</a></div>
            <div><a href="#" onclick="open_lb(2);">Photo 3</a></div>
            <div><a href="#" onclick="open_lb(3);">Photo 4</a></div>
            <div><a href="#" onclick="open_lb(4);">Photo 5</a></div>
        </div>

Now refresh your browser. Click on the links. Do the individual photos pop up in the Lightbox? And can you close the Lightbox by clicking on "x close"? Well, congratulations then! You've just made your first Lightbox!

It's a boring Lightbox, truth be told. Let's jazz it up a little with some good old CSS3!

Teochew Thunder

Pages

Friday, 15 May 2015

Web Tutorial: The Lightbox Effect (Part 1/2)

OK, but what does it do?

So why write our own?

Didn't we just do that two months ago?

Now for some data!

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews