/Vanilla-JS_Lightbox-Slider

Lightbox Slider built with Vanilla JavaScript

Primary LanguageCSS

042920 CWebba Vanilla-JS_Lightbox-Slider v8 READ ME

This project is in progress.

This Lightbox is a stand-alone project with no dependencies written in vanilla JavaScript and SVG Name Space. I added the JavaScript and CSS to a WordPress page and it worked perfectly.

Starting from a light-box example, I added custom functions and styles. 

**Features:**
Font Awesome is removed and SVG icons are built using JavaScript.
Titles and cutlines are added. Content is contained within data attributes.
Styles are added to suit my design.

The required files are:
Responsive_Gallery_with_Lightbox_prototype_08.html
vanilla_lightbox_08.css
vanilla-lightbox_08.js

Additional CSS are for the prototype layout and can be ignored:
prototype_style.css
prototype-sticky-footer.css

Certain IDs, classes and data-attributes are needed in the markup for the light-box to function.

They are:
div class="gallery-container" (optional)
figure class="gallery-item" data-index="2"
img id="img00" src="" alt="" title="" data-cutline=""

A working prototype is posted at <a href="https://codepen.io/cwebba1/pen/QWjgwxe">https://codepen.io/cwebba1/pen/QWjgwxe</a>

I plan to implement additional features and functions. Friends and mentors are welcome.

Please contact me with suggestions at [cwebba1](mailto:cwebba1@gmail.com?Subject=[Github Light-box]

¯\_(ツ)_/¯¯\_(ツ)_/¯¯\_(ツ)_/¯¯\_(ツ)_/¯¯\_(ツ)_/¯¯\_(ツ)_/¯

 - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - –

I started from this lightbox example on Codepen at: 

https://codepen.io/KielBautista/pen/mxWNOb
Responsive Gallery with Lightbox
A PEN BY King Jhessrael Bautista

Thank you for help from [New York City Hacker Hours](https://www.meetup.com/hackerhours/), and [New York Front End Coders](https://www.meetup.com/nyfrontendcoders/).
Also, thank you to [th31](https://stackoverflow.com/users/7134209/th31) and [Ravi Ostwal](https://stackoverflow.com/users/13336973/ravi-ostwal) from Stack Overflow.