* DISPLAY WINDOW HTML *
/ copy and paste this div into the part of the page you want images to load into.
/ notes:
/ / the image and description that you write into the raw html will be what loads if javascript is disabled. i recommend using it as an "error page" of sorts that tell viewers to enable javascript.
/ / you can add classes and styles to anything here, but do not change the IDs or the data-num attribute unless you know for sure what you're doing
/ / if you want your gallery listed from oldest to newest, swap the order of the tags to the one labelled "prev" is first. you can also simply remove both buttons if you don't want that functionality.
DATE/TITLE
DESCRIPTION
* THUMBNAILS *
/ copy and paste this into the part of the page you want the thumbnails to be, one for each image.
/ notes:
/ / make sure to match the id attribute to the id number of the image in the array script!
/ / for a gallery ordered newest to oldest, higher numbers should be higher on the list and for the opposite, lower numbers should be higher
/ / thumbnails should have small image sizes for easier loading!
/ / additional classes or styling can be added, but don't change/remove the "thumb" class because it's needed for the script to function
* DISPLAY WINDOW CSS *
/ copy and paste this into the css for your gallery page.
/ notes:
/ / most of this code is simply my own preference for styling and doesn't affect the script at all, so feel free to change anything you'd like!
/ / this part is mostly just here to provide a template
#focusimg { max-height: 600px; }
#date { font-weight: bold; }
.nextprv { width: 47%; }
.nextprv:hover { cursor: pointer; }
.thumb {
width: 23%;
box-sizing: border-box;
}
.thumb:hover {
cursor: pointer;
border-radius: 20px;
}
@media screen and (max-width: 800px) {
.thumb { width: 47%; }
}