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.
Create an empty div with nothing but an ID
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.
Create a script tag and link it to my framework
Instantiate an object of the framework
var myLightBoxFW = MakeLightBoxFW();
Nothing special about this. Just instantiating an object that can create light boxes.
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.
|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)|
|Function||Input Type||Valid 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…|
|changeDurationTime(newDuration)||integer||any int value (in milliseconds)|
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.
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)”
W3Schools - for CSS animations
StackOverFlow - for help with getting the timer to work