Lytebox Tutorial

←← Take me back to the writings directory!

Lytebox was an alternative to the more popular Lightbox, intended to be easy to use and mobile friendly. Because Lightbox might be intimidating to newer webmasters, Lytebox is cool for people looking for a relatively simple usage experience at the cost of less customization. The things I’ll be covering in this article will likely be a regurgitation of what is found in archived versions of the Lytebox site, but my hope with having this information on my site is that new webmasters will be able to find this information easier. There is also some unique information on this site which will discuss Lytebox quirks not mentioned in the original versions of the Lytebox site.

At the time of writing, there are several versions of Lytebox floating around. I will be covering the most recent version that I know of: version 5.5. This version is no longer on the regular internet and instead must be downloaded through the Internet Archive.

Table of Contents

Getting Lytebox onto your site

There are a few ways to implement Lytebox onto your site, but before you do all of that you need to upload the Lytebox Javascript and CSS files to your website. Lytebox comes with an image folder for menu elements, but uploading the images is not 100% necessary. If you plan to use Lytebox a lot, be sure to save the two files in a place that’s easy to remember.

Once that’s done, go onto the page where you want Lytebox to work and import the Lytebox and CSS file. If you don’t know how to do that, you can copy the code below and adjust the file paths to your configuration, then paste them between the <head> tags of your HTML document.

<script type="text/javascript" language="javascript" src="[JS file path]"></script>
<link rel="stylesheet" href="[CSS file path]" type="text/css" media="screen" />

If you’re concerned about having multiple JS or CSS files, don’t worry. You can have multiple.


Using Lytebox for images

<a href="[image]" class="lytebox">[link item]</a>

When using Lytebox for displaying images, the code needed to do so will look like the snippet above with some variations. [Image] will be the image you want Lytebox to display, while [link item] is the item with the viewer has to click in order to view [image]. This can be another image, a piece of text, or anything you can attach an attribute to.

The format above is valid for single Lytebox images.

Grouped images

If you have something like an image gallery you’d like people to easily navigate through instead of having to repeatedly back out and click another image, you should use grouped images. The standard format of an image group looks like this:

<a href="[image1]" class="lytebox" data-lyte-options="group:[group name]">[link item1]</a>
<a href="[image2]" class="lytebox" data-lyte-options="group:[group name]">[link item2]</a>

You can have as many Lytebox images you want in a group so long as the [group name] is the same. The [group name] also cannot contain any spaces. While it’s probably commonplace to have images within the same group be close together in the code itself, with the way Lytebox groups work it is possible to have a group of images be placed in wildly different areas of your site, if that’s your kind of style.

Putting a div around your Lytebox groups isn’t required, but it is handy for keeping your code readable since in most text editors you can collapse an element’s content (and Lytebox images tend to get lengthy if you plan on adding titles/descriptions).

Working example and code

Below is a working example as well as the code used to create it. Tap/click on the right/left side of the image, or use your arrow keys to navigate.

If you're eyeing that 'data-title', don't worry! I'll visit those later on in this article!
<div align="center">
<a href="https://i.imgur.com/IR0X9d4.png" class="lytebox" data-lyte-options="group:ac" data-description="Image credit: Jaroslaw Slodkiewicz via Unsplash"><img src="https://i.imgur.com/IR0X9d4.png" height="100px"></a>

<a href="https://i.imgur.com/OssKgnk.png" class="lytebox" data-lyte-options="group:ac" data-description="Image credit: Jiří Suchý via Unsplash"><img src="https://i.imgur.com/OssKgnk.png" height="100px"></a>

<a href="https://i.imgur.com/lPxtUfg.png" class="lytebox" data-lyte-options="group:ac" data-description="Image credit: Amjith S via Unsplash"><img src="https://i.imgur.com/lPxtUfg.png" height="100px"></a>

<a href="https://i.imgur.com/ZWHHDtE.jpg" class="lytebox" data-lyte-options="group:ac" data-description="Image credit: Nils Schirmer via Unsplash"><img src="https://i.imgur.com/ZWHHDtE.jpg" height="100px"></a>
</div>

Slideshow

To create a slideshow with Lytebox, it’s very similar to creating a set of grouped images except with one extra step (which is adding 'slide: true' to the data-lyte-options).

<a href=“[image1]” class="lytebox” data-lyte-options=“slide:true group:[group name]”>[link item1]</a>
<a href=“[image2]” class="lytebox” data-late-options=“slide:true group:[group name]”>[link item2]</a>

Slideshow options

By default, the slideshow will slide through the images at a certain rate, the viewer will not be able to click through the slides on their own, and the slideshow will not loop. Luckily, there are many options to configure a slideshow to your liking. All of the below are added by adding to data-lyte-options, like how you did for adding groups or the toggle to make a group a slideshow.

A tip before you delve into the options: Many of the options below can be individually set on an image-by-image basis. If you want the settings of one image to be applied to the rest of the images in a slideshow, your best bet is copy-and-pasting the data-lyte-options. Not doing so could create unexpected behaviors in your slideshow.

Variable Name Variable Type What It Does
slideInterval Integer Determines how long Lytebox should wait before moving onto the next slide. Setting slideInterval to '4000' will make it so that the slideshow waits 4 seconds until proceeding to the next slide, and so on. You can individually set how long you want Lytebox to wait for each image, but if you want them to have the same wait duration, you will have to copy and paste the slide interval
showNavigation Boolean This is another piece of information you will have to copy and paste for each image if you'd like for things to be consistent. If this variable is set to true, this will make it so the user is able to click through the slideshow, instead of having to wait for the slideshow to progress on its own. If this is not properly repeated for all images in a slideshow group, the user will suddenly find themself unable to click through the images themself.

If you happened to include the image folder that came with Lytebox, if things still link properly, this will also show arrow buttons on either side of your Lytebox slideshow.
showClose Boolean This variable will only work if the image folder included with Lytebox is properly linked. When set to true, this will display a button to close out the slideshow. If set to true without the Lytebox images imported, there will be no discernable change (there will be a small area somewhere that causes the slideshow to close, but it will be practically invisible).
showDetails Boolean Controls whether or not details such as an image's description or number within a slideshow are displayed. If set to false, it will hide those details. This is one of those options you can apply individually.
showPlayPause Boolean Requires that the image folder included with Lytebox is properly linked. When set to true, this will display a button to pause or play the slideshow. If set to true without the Lytebox images imported, there will be no discernable change (there will be a small area somewhere that causes the slideshow to play/pause, but it will be practically invisible).
autoEnd Boolean Determines whether or not the slideshow is automatically closed when the slideshow reaches the last slide. If set to false, the viewer will have to close out of the slideshow manually once reaching the last slide. This variable can be applied to just the last image in your slideshow group.
pauseOnNextClick Boolean This variable only applies if showNavigation is set to true. If this variable is set to true, this will make it so the slideshow will pause when the user decides to click for the next image.
pauseOnPrevClick Boolean Similar to pauseOnNextClick, except it pauses if the user clicks for the previous image in a slideshow.
loopSlideshow Boolean Determines whether or not the slideshow loops once reaching the last slide. If set to true, the slideshow will loop.

Working example and code


This slideshow is meant to progress at the default rate, allowing the user to click through the images. Once it reaches the final slide, it pauses.
<div align="center">
<a href="https://i.imgur.com/IR0X9d4.png" class="lytebox" data-lyte-options="group:b slide:true showNavigation:true" data-description="Image credit: Jaroslaw Slodkiewicz via Unsplash"><img src="https://i.imgur.com/IR0X9d4.png" height="100px"></a>

<a href="https://i.imgur.com/OssKgnk.png" class="lytebox" data-lyte-options="group:b slide:true showNavigation:true" data-description="Image credit: Jiří Suchý via Unsplash"><img src="https://i.imgur.com/OssKgnk.png" height="100px"></a>

<a href="https://i.imgur.com/lPxtUfg.png" class="lytebox" data-lyte-options="group:b slide:true showNavigation:true" data-description="Image credit: Amjith S via Unsplash"><img src="https://i.imgur.com/lPxtUfg.png" height="100px"></a>

<a href="https://i.imgur.com/ZWHHDtE.jpg" class="lytebox" data-lyte-options="group:b slide:true showNavigation:true autoEnd:false" data-description="Image credit: Nils Schirmer via Unsplash"><img src="https://i.imgur.com/ZWHHDtE.jpg" height="100px"></a>
</div>

Other usages of Lytebox

HTML content + embedded media

If you'd like for a link to a website to open within a window in the current tab, you can use Lytebox to help with this. This functionality is not limited to just websites, but other embedded media as well. Linking embedded media is exactly like linking images, but instead of an image link its a link to the embed.

<a href="[website/media url]" class="lytebox">[link item]</a>

Below I've created a few examples of linking embedded media with Lytebox, so that you can get a feel for what's possible.

The entirety of 1984 by George Orwell / A song remix on Youtube / The homepage of my website / A Spotify album of some Vocaloid music

Depending on the website you decide to link to, it's possible that the browser's own security will make it so Lytebox is unable to display a site (for example, I cannot link Youtube's homepage but I can link a Youtube video just fine). The general rule I use to determine if I can link something with Lytebox (or iframes in general) is to ask whether it has an option to log in anywhere on the page. If it does, it cannot be displayed with Lytebox.

Embed options

If you'd like to customize how Lytebox displays embedded media, you can do so with these overrides through data-lyte-options.

Variable Name Variable Type What It Does
scrolling / scrollbars auto / yes / no These are actually two different options, but I've put them into one cell since they do the same thing. These determine if the viewer will be able to scroll with displayed Lytebox content. I believe this only applies to when the thing you've linked is another website.
width / height Integer Once again, two different options but they're similar enough to be put into the same cell. These determine the width and height of the Lytebox frame. You can set the width/height using pixels (px) or percentages.
loopPlayback Boolean Controls whether an embedded video file will loop. This only works for actual video files, like .swf, .avi, .mov and etc. This doesn't work with things like Youtube videos.
autoPlay Boolean Controls whether an embedded video will automatically play once the Lytebox display is opened. Again, only works with actual video files.
autoEmbed Boolean Controls whether or not the embedded media will load inside the browser, or attempt to open in an external media viewer. Setting this option to false often results in the browser attempting to download the linked video onto their computer, so it's probably better to not touch/include this option.

Titling and describing Lytebox content

If you'd like to add titles and descriptions to your Lytebox content, you can do so by adding 'data-title' and/or 'data-description' to the Lytebox'd element, like so:

<a href="[media/image url]" class="lytebox" data-title="[title]" data-description="[description]">[link item]</a>

You don't have to add both data-title and data-description, but I put them there for demonstration purposes. For both data-title and data-description you can employ some basic styling using tags like <b>, <i>, <u>, and anything else you can think of — although with data-title bolding is not possible since titles are already in bold.

Putting links into Lytebox descriptions or titles is possible, however the process isn't as straight-forward as the <b> or <i> tags. HTML links have quotation marks which can cause Lytebox pop ups to look janky since data-title and data-description use quotation marks to discern where text starts and ends. To get around this, one has to use the entity code for quotation marks in place of the quotation marks, which is &-quot; without the dash. Additionally, you can add inline styling, IDs, and classes as long as every instance of a quotation mark is replaced with that entity code.

Below is the code and working example of what a Lytebox pop up with a valid link and some in-line styling looks like.

A screenshot of a code snippet which displays what a valid Lytebox popup with a link and styling looks like.

Click me to view a Lytebox popup with a valid link!

Using Lytebox in iframe environments

If you rely on iframes for the layout of your site, be reassured to know that Lytebox can still work for that kind of set up. First, import the JS and CSS file to the parent document (document that contains the iframe) as you would normally. Then, in the document(s) that feature inside the iframe, import only the JS file. If all goes well, clicking a Lytebox image inside an iframe should display outside of the iframe's container (demonstration gif shown to the right).


Global options for Lytebox

The global options for Lytebox, found and configured in the Lytebox JS file, determine the look and feel of Lytebox across all of your pages that use it. I will not cover what all of the options in the JS file are (because what they do is recorded in the file itself), but I will cover the ones that can be overridden on an image-by-image basis. Certain global settings can be overrided by declaring so in data-lyte-options, like how you did with declaring groups and slideshows. Onto the options...

Variable Name Variable Type What It Does
hideObjects Boolean Determines whether embedded objects (like Flash, Java, etc) should be hidden when the Lytebox viewer opens.
autoResize Boolean Determines whether images should be resized if larger than the browsers window dimensions.
doAnimations Boolean Controls all the animations for the Lytebox viewer (Lytebox window expansion, overlay fade in/out, etc). If set to false, these animations will not play.
animateOverlay Booleans Determines whether or not the darkening effect when viewing a Lytebox element is animated. doAnimations has higher priority over this option, meaning that if animateOverlay is set to true while doAnimations is set to false, there will still be no animation of the overlay.
forceCloseClick Boolean Determines whether the user has to click a close button when viewing Lytebox content. It is not recommended to set this option to true if you have not uploaded and properly linked the image folder that came with Lytebox, otherwise the viewer will have to try and click a non-existent element or refresh the page.
refreshPage Boolean Refreshes the page when the viewer closes out of the Lytebox viewer.
navType Integer (1-3) This option and its effects are most noticable if you have uploaded and linked the image folder that came with Lytebox. Setting navType to 1 makes it so the left/right navigation buttons are shown near the top when hovering on the left/right side of an image. Setting navType to 2 will locate the left/right buttons in the navigation panel (where the close button is). Setting navType to 3 will combine options 1 and 2.
navTop Boolean If true, this places any navigation buttons on the top right of the Lytebox viewer.
titleTop Boolean If your content has any title, and this option is set to true, the title will be placed on the top left of the Lytebox viewer
showPrint Boolean Determines whether or not the option to print the content inside the Lytebox viewer is shown. Most noticeable if the image folder that came with Lytebox is uploaded and properly linked.
inherit Boolean Controls whether or not Lytebox links after the first Lytebox link in a group inherit options from the first link. Do note that inheritance only applies to other global override options, and do not apply to things like the slideshow options (as much as I wish they did).

Troubleshooting

This section (and its subsections) is subject to expansion as more potential issues arise. If you don't see your issue here, contact me or leave a comment!

Syntax errors (and other things that aren't your fault)

Lytebox quirks

Quirkiness in small doses makes a person interesting, but quirkiness within code makes a people turn evil. These are the quirks of Lytebox I've discovered so far that may make it behave in unexpected ways, as well as how to get around them.

Group naming

This quirk takes place when there are two or more groups with names that contain substrings of eachother, particularly if this substring can be found at the beginning of the name (like 'artwork' and 'artwork-memes') and if the groups occur one after the other. When this quirk occurs, it causes Lytebox to display the incorrect number of images in a group. I feel like when we learn HTML or CSS, we are taught that whatever 'artwork' and 'artwork-memes' is, they are two separate things, but with Lytebox it seems to treat names like 'artworks' and 'artworks-memes' as subfolders.

I've recreated the phenomenon below (with one extra group). The group names are 'artworks', 'artworks-meme', and 'artworks-mey'. When you click on an image included in 'artworks', you'll see that the image count (and the actual images you can flip through) includes the images from 'artworks-meme' and 'artworks-mey'. When you click on an image from the 'artworks-meme' group you'll see that it seemingly doesn't have this problem, but that's because the length of the group's name is longer than the name of the group that comes after it in the code.

If the group names where changed so it were 'artworks', 'artworkss' then 'artworksss', you'd be able to see that 'artworks' displays 9 images, 'artworksss' displays 6 images, and 'artworksss' correctly displays 3 images.

This quirk could have been nice for creating 'folders' of images in a sense, but its function is too unpredictable to have actually been intentional. To work around/avoid this quirk I recommend giving your groups short names like 'a','b', or 'c'. In the case of the artwork groups, it can also be avoided by having your groups be named 'artworks', then 'meme-artworks'.

Artworks:

test1 test2 test3

Artworks-meme:

test1 test2 test3

Artworks-mey:

test1 test2 test3

If my writing hasn't informed you enough about this quirk's behaviour, you are encouraged to inspect this page to get into the meat and wires of it all.

Post-writing edit: This quirk occurs with group names containing any substring of another group. I was rereading my own article when I noticed the example I had made for the grouped images section was not displaying the number of images correctly. This was because the group name was 'group:a'. The substring 'group:a' could be found in the string 'group:artworks', causing problems with all of the groups in this section.

The issue has since been fixed by changing 'group:a' to 'group:ac'.

Unintended inheritance

This quirk occurs when you have multiple images in a group that link to the same image, where it will incorrectly display that there is only one image in the group, or display that there are fewer images than there actually are. I've recreated some of the phenomena below.

Example 1 is where all the images linked are the same, but are distinguished by the titles attached to them. One would think you'd be able to click through the images and see the different titles despite all the images being the same, but Lytebox seems to recognize that the images are identical and incorrectly displays them as one.

Example 2 is where there is another unique image put between the two identical ones. Lytebox displays that there are two images in the group, even though there should be three.

I imagine not many people will run into this quirk if using Lytebox regularly, but if you're like me and like to use placeholder images this might be of concern. The only thing I can recommend is to have various things to use as placeholder images on standby.

Example 1:

test 1 test 2 test 3

Example 2:

test 1 test 2 test 3

Further issues, questions, or feedback

If there's an aspect about Lytebox you still have questions about, feel free to leave a comment down below to get an answer from me or another user. This is also my first time writing a guide of this length, so if you have any feedback on my teaching strategies, do let me know!

Sorry about the ads, by the way.