Lightbox Framework Tutorial

By Moe Jalil

This light box framework allows you to create a well formatted container to hold and display images. I decided to make this framework since it could be used in many different websites, including some that I have previously created with a simpler picture slideshow feature. Keeping that in mind, I tried my best to develop the framework with as much flexibility and customization so that it can fit any HTML developer’s needs.


Features


Using the Framework

  1. Create an empty div with nothing but an ID

     <div id="divLB"></div>

    Make sure not to add any CSS rules that modify the div in any way as it may cause unwanted results. There will be tips to customizing the light box at the end.


  2. Create a script tag and link it to my framework

    <script src="lightBoxFW.js"></script>

    Make sure you link to the JavaScript framework correctly depending on where you put it in relation with your HTML page.


  3. Instantiate an object of the framework

    var myLightBoxFW = MakeLightBoxFW();

    Nothing special about this. Just instantiating an object that can create light boxes.


  4. Use the framework to instantiate a light box

    var lb = myLightBoxFW.MakeLightBox();

    When instantiating a light box, the constructor takes some parameters. The only required parameter is the ID. When a light box is created with nothing but an ID, it is given default values for every other property, including the images list. This would be quite useless because if someone is going to use the light box, they most likely want to put their own images in it. So below I discuss the parameters for the constructor as well as some public methods to customize the lightbox after its created.


Constructor Parameters

ParameterDetailTypeDefault
id Element ID string no default(Required)
imagesArray Image sources list array 6 random images urls
bgColor Light box background color string white
highlight Selected image’s highlight string yellow
imageWidth Large image’s width string 200px
imageHeight Large image’s height string 300px
imageBorderRadius Large image’s border radius string 20px
autoChange Auto change image boolean true
changeAscending Change image ascending boolean true (auto change to next image)
changeDuration Auto change duration integer 2500 (milliseconds)

Public Methods

FunctionInput TypeValid Values
changeBgColor(newColor) string any valid CSS color value, hex, rgb, rgba etc…
changeHightlight(newColor) string any valid CSS color value, hex, rgb, rgba etc…
changeImageWidth(newWidth) string any valid CSS width value with unit, px, pt, em, etc…
changeImageHeight(newHeight) string any valid CSS height value with unit, px, pt, em, etc…
changeBorderRadius(newBorderRadius) string string any valid CSS border radius value with unit, px, pt, em, etc…
changeAutoChange(change) boolean true/false
changeDirection(ascending) boolean true/false
changeDurationTime(newDuration) integer any int value (in milliseconds)

JavaScript Walkthrough

I first declare ‘use strict’ so that variables aren’t created by misspelling their name.
After that is the function that creates and returns the frame work object with one public method, ‘MakeLightBox’.When the MakeLightBoxFW function is called, it adds a style sheet at the top of the page which is used to create animations for some of the controls. The make lightbox method takes the parameters passed in and makes sure that at least an ID was passed that references an existing HTML element.

After validating the ID passed in, 8 private variables are created and either set to its corresponding value in the passed in parameters or to the default value if nothing was passed in. Once all private variables are declared, the framework begins setting the properties of the light box in the div passed in by ID. After the div is styled appropriately, the first element created is the large image view.See Example 1 Here➡

Once that is added to the lightbox div, the next element created is the bottom control div. It is what holds the previous image button, the image list and the next image button. After creating all three of the children elements and adding them to the correct parents, we get this functioning snippet of code that changes that on the button clicks.See Example 2 Here➡

After all the code that creates the components of the light box, you will find the public/private methods that are used to update the properties and visual representation of the light box.




Tips

Do not give the light box a black background color because it will ruin the look of the navigation buttons.
You can adjust the size of the light box by containing it in a div that you have set its width property. The lightbox is always 100% of its parents width.
You can also further customize the background of the light box such as adding a background image by containing the light box in a div that has a background image and just give the light box a transparent background color, “rgba(0,0,0,0)”


Sources

W3Schools - for CSS animations

StackOverFlow - for help with getting the timer to work