banner saying make your own website, I'll help you, almost from scratch, quick! and effective and the website's url jakechirak.com

< PREVIOUS: Coding the GALLERY

CODING: THE LIGHTBOX


warning drawing BE CAREFUL!! MAKE SURE YOUR SAVED YOUR PREVIOUS PAGE BEFORE MOVING ON TO A NEW ONE!!

The Lightbox should be good as it is, so normally you don't have to change much to make it work. Just make sure to properly link to it.
You also need to check if your files were correctly uploaded here. Normally it should look like this:



warning drawing If it doesn't look the same or if files are missing, try re-uploading them manually or refreshing the page! Firefox specifically does not upload folders properly when you drag & drop them, you might have to upload each subfolder individually. Compare it with the original folders in your computer to check if everything is the same as in your dashboard.

hand pointing right There should be an index.html page with tips on how to use the lightbox in your folder.
hand pointing right Check the github page of the lightbox (I know I use an older version, it's the one I tested, I guess newer versions should work but I can't guarantee the code is the same or if everything will work properly)


The only thing you could change easily and quickly on your lightbox is making the "next", "previous" or "close" button more personal:
arrow drawing go to your dashboard page
arrow drawing then hop into lightbox > img
arrow drawing there should be 3 .png and 1 .gif. You can change them to your own images. Keep the same name and size!



warning drawing There are plenty of colors and options you can change on the lightbox. You are free to change the HEX codes anywhere, it won't break anything. But refrain from touching anything else if you don't know how the code works (or make backups of your page in Notepad and try things out! It's cool to try new things, less cool to lose all of your progress!)


a line to separate different parts of the website

START CODING:
hand pointing right NEXT: the ABOUT page
TIPS

NAV
a line to separate the navigation from the rest of the links
LIVE DEMO

HOME

LETSGO!
Which page do you want to start coding?

  • START
  • INDEX
  • GALLERY
  • >LIGHTBX
  • ABOUT
  • TIPS
  • Back to top