News Ticker

Dev Note – 20170420 – Lesson from Creating a Lightbox

بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ

In the name of Allah, the Most Beneficient, the Most Merciful

So today I just finished one of my portfolio project, creating an image gallery. For a short description, in this project I have to create an interactive photo gallery that will open a lightbox gallery when an image are clicked, and then we can navigate to the previous and next images in the lightbox. I also should create a filtering function that will filter the image shown using the keywords typed in a search box. The project instructions for this project says that I can use an existing lightbox plugin to create the lightbox, but for the sake of learning and understanding, I decided to write the function from scratch. And here are several things that I learned from this project:

1. Write on the paper -> write pseudocode -> start to code

Before I started this project, I have a tendency to just open a text editor and start to code. I even thought that there are only little things that we can do outside of text editor and command line for programming. But now I understand why rough diagram and pseudocode are indispensable tools for programmer. They are used to make the writing process of the program abstraction easier without getting stumble upon the details of a syntax.

For the sake of illustration, let us compare which one is easier to understand:

var searchKeyword = $('#text-input-id').val();
var indexFound = null;

for (var i = 0; i < listName.length; i++){
    if(listName[i] == searchKeyword){
        indexFound = i;



// grab the search keywords from search box and save it to searchKeyword variable
// iterate over the listName
    // if searchKeyword == i-th item of listName
        // save the index to the indexFound variable
// print indexFound

I think the second one is easier to understand. Yes, it is kinda abstract, and it is not even working in the slightest. But our goal in the beginning of program creation is not to make the program works, but to make it easier for us to understand and design the abstraction of our program. Thus make it easier for us to easily add, remove, or modify our program abstraction. Yes, we can arguably say that we can understand the first thing better, but what will happpen when we have a lot of moving part in our programs? It will absolutely make us lost in the sea of code lines. I tried to just hack the program on the get go, but it didn’t end well. It was just getting harder to debug and to add new functionality.

2. There is a very useful data attribute data-* in the html language

When this project start, I was wondering how could I add the image that only have certain attribute to the lightbox. I need that stuff because when I just select the img elements, then there might be an unwanted image that getting included in the gallery, e.g. our page logo, etc. So then I browsed the html documentation and found this. The way it works is simple, just put data-“something” attribute to your html element, and we can treat this data-“something” like a normal html attribute. Hence, if we have:

<img id="first-image" src="img/01.jpg" alt="This is an image of something" data-lightbox="lightbox" />

We can select extract it use it like this:

var galleryItems = $('[data-lightbox="lightbox"]');


var dataLightbox = $('#first-image').attr('data-lightbox');

3. Use display = fixed rather than display = absolute for lightbox

There was a time when I was wondering why the lightbox didn’t show when I select one of the last images on mobile device. It turned out that the light box was shown, but it was shown on the top of the page. I contemplated and found that the reason of this is because I used an absolute positioning for my lightbox overlay. Thus, I change my lightbox overlay’s positioning to fixed and voila it works as intended. The overlay will also follow me whenever I scroll the page when the lightbox is shown. For more information about this, you can read it here.

About wahidyankf (186 Articles)
JavaScript Developer. His life-motto is "Learning, Dreaming, and Enjoying life".

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: