code icon

CSCI 1720

Intermediate Web


Setup

  1. On your external drive, inside your userid.csci1720.net/labs folder, make a new folder named js-lightbox. Create a new folder inside the js-lightbox folder: js
  1. Download js-lightbox.zip and extract the files to the js-lightbox folder. This will add index.html page (finished), add a css folder with lightbox.css (completed) and add an images folder with this lab’s images
  1. Your js-lightbox folder should now look like this
screenshot
Fig 1- Set up folder
  1. What we’ve got here is the completed HTML file and stylesheet. We’re going to write the JavaScript to make it work
  1. Click the Cortana (search) icon and enter brackets. Click the link to open Brackets
  1. In Brackets, click File → Open Folder
screenshot
Fig 2- Open folder
  1. Navigate to your js-lightbox folder and click Select Folder
  1. You can see from the file tree on the left that your working directory is now your js-lightbox folder

Create the JavaScript

I included line numbers in these screen shots so I can refer to specific bits of code in the explanations. It isn’t necessary for your line numbers to, uh, align with mine for the code to work. But if you are careful and do so, it’ll probably make the rest of this monstrosity easier to follow

  1. Right-click the js-lightbox folder on the left and select New Folder. Name the folder js. Then right-click the js folder in the file tree and select New File
  1. Name the file lightbox.js. The empty file will open in the editor
  1. Enter a comment block identifying the file
screenshot
Fig 3- Comment block
  1. Our lightbox is going to require several functions, first, open scss/lightbox.scss. Notice that the .modal class’s initial display is set with an opacity value of 0 and a z-index value of -1. When the page loads, the modal will be hidden and 'under' the main page. When an image or thumbnail is clicked, this function will change that
screenshot
Fig 4- openModal()

So what does this all do? When the user clicks a thumbnail, this function fires. First it removes the fade-out class from the myModal element (if it is there); then adds the fade-in class. If you look at those class definitions in lightbox.scss, you'll see that each includes a CSS3 property, transition, that makes the properties apply gradually over the course of 0.4 seconds. This provides a 'fade-in' effect.

This illustrates an important aspect of web design technology: We often combine CSS and Javascript to achieve a certain effect. Vanilla JS doesn't have a 'fade-in' method (though jQuery does, but we'll talk about that later). So we use the transition CSS3 property to achieve it

  1. Correspondingly, we want to be able to close the modal (i.e., toggle the display back to none
screenshot
Fig 5- closeModal()
  1. We need to establish index values for the images (note that slideIndex is a global variable)
screenshot
Fig 6- slideIndex
  1. We also need functions to increment and query the slideIndex
screenshot
Fig 7- plusSlides()/currentSlide()
  1. One last function. This is a bit long, so it’s best to set it up before adding the code
screenshot
Fig 8- showSlides()
  1. Add some variables
screenshot
Fig 9- Variables

So let’s look at this: Line 40 is a simple index variable for the for loops that we’re going to use Line 41 gets elements by class name, instead of id, and stores them in an array named, appropriately enough, slides. This corresponds to the class defined in the SCSS file:

screenshot
Fig 10- display:none; (From lightbox.scss)

...and is invoked in the HTML file:

screenshot
Fig 11- HTML mySlides class

Line 42, likewise selects elements whose class name is demo Line 43 uses our old friend, .getElementById to provide captions for our images

  1. Now for some conditional tests for wrapping last to first and first to last
screenshot
Fig 12- Wrapping slides
  1. Now, we need to initialize our slides
screenshot
Fig 13- Initialize slides
  1. Display the current slide, set its class to active, and display its caption
screenshot
Fig 14- Initialize slides

Interesting thing to note, here: Look at Line 62. It sets the innerHTML of the caption element to be equal to the alt value from the img element in the HTML for each image!

screenshot
Fig 14a- Using the alt value from the
img element as the image's caption

Finishing Up

  1. Save all of your work and click the Live Preview button
  1. Try clicking the images and navigating through the lightbox by clicking the thumbnails and previous/next arrows. Then click the ‘x’ to close the modal and return to your initial display

When you're testing, try to think of all the potential user scenarios. Does the user use the thumbnails to navigate through the slides, or the prev/next buttons? When launching the modal, does the user click the first thumbnail, or one at random? Or some combination of the above? Make sure that every possible scenario works and troubleshoot why if not

  1. Once you’re satisfied with your work, log in to csci1720.net with FileZilla
  1. Navigate to your js-lightbox directory on the left (local) display and the labs directory on the right (remote) display. Drag and drop your js-lightbox folder into the labs directory on the right, uploading all your files and folders to the server
  1. Return to your browser and open a new tab
  1. Enter your_etsu_id.csci1720.net into the address bar, for example, mine would be
screenshot
Fig 15- Entering URL

This is the domain of your site, then add /labs/js-lightbox/, which is the path to your site

screenshot
Fig 16- Entering URL

Since our landing page is named index.html, that’s all we really need to enter. Remember, browsers automagically look for web compliant files whose names begin with either index or default. But for the sake of thoroughness, add index.html

screenshot
Fig 17- Entering URL
  1. Press ENTER to see your work displayed from the server
  1. I included the links to the validator, but since you’ve been provided are validated files (yes I double-checked) for this lab, there’s no real need to check
  1. When all is well, copy the URL of your index.html file to a new text file in NPP or Brackets. Save the file as js-lightbox.txt and upload it to the D2L JS Lightbox folder

Have a nice day 😊