LiteBokz.js is a modern, clean and minimal JavaScript library for viewing images. You can embed it into any HTML website for instant image previewing.
Designed as an alternative to other popular JavaScript lightbox libraries, LiteBokz.js excels in instant loading speeds, advanced customization & zero setup.
Use it instantly by linking the script, or download it on GitHub.
LiteBokz.js requires no download. Just insert the following code inside the <head> element.
<script src="https://litebokz.github.io/litebokz/litebokz.js"></script>
Just add the "litebokz" class to any image for instant results.
LightBokz has been built with full customization in mind. From creating color themes to organizing the UI, we've achieved maximum flexibility with minimal code.
Perfectly scales to any screen size & layout.
Easily add your own color themes, choose how images should be displayed, and much more.
Litebokz is an open source project built for developers looking for an efficient & minimal way to display their images. Feature suggestions & improvements are open for discussion on our GitHub.
• Organize images using the name data attribute. This prevents users from being able to navigate between separate categories.
<img class="litebokz" data-lb-name="gamedev-category" src="road.png">
<img class="litebokz" data-lb-name="pixel-art" src="sun.png">
<img class="litebokz" data-lb-name="gamedev-category" src="dungeon.png">
• Define your thumbnail & main image in just one line.
<img class="litebokz" src="fish-thumbnail.png" data-lb-image="fish.png">
• LiteBokz.js automatically uses alt text as the image description. Users can write a new description simply by adding the data-lb-alt attribute to the image element.
<img class="litebokz" src="drawing.png" alt="sketch, OC" data-lb-alt="A weird drawing of a sad guy.">
• To customize, simply add a new <script> element called "litebokz" at the very end of your <head> element.
<script class="litebokz">
// content goes here
</script>
You can customize which tools should be displayed & the layout using litebokz.tools. The displayed order matches the order of the array.
You can add as many color themes as you like, using the litebokz.themes array.
You can customize built-in variables using litebokz.settings.
This function is run whenever the color theme is toggled. You can use this function to perform actions on your website.
Zoom out.
Zoom in.
Change the color theme.
Download the image.
Fit image to the screen.
Toggle fullscreen mode.
Close the lightbox window.
Blurs images when closing & opening the lightbox. This may affect performance.
Enables pinch-to-zoom gesture support on touch devices.
Allows swiping to switch between images on desktop devices. For both PC and mobile, use swipeToSwitch.
Allows swiping to switch between images on mobile devices. For both PC and mobile, use swipeToSwitch.
Adjusts swipe sensitivity on desktop devices. For both PC and mobile, use swipeSensitivity.
Adjusts swipe sensitivity on mobile devices. For both PC and mobile, use swipeSensitivity.
Minimum swipe distance required on desktop to trigger a switch. For both PC and mobile, use swipeRange.
Minimum swipe distance required on mobile to trigger a switch. For both PC and mobile, use swipeRange.
Resistance applied to swipes on desktop devices. For both PC and mobile, use swipeResistance.
Resistance applied to swipes on mobile devices. For both PC and mobile, use swipeResistance.
Shows or hides the LiteBokz wordmark in the lightbox.
Toggles UI panels visibility on tap.
Closes the lightbox when tapping outside the image.
Zoom increment when using zoom controls.
Controls the speed of zoom when scrolling.
Maximum zoom level allowed.
Minimum zoom level allowed.
Image threshold below which pixelated rendering is applied.