Help Implementing Lightbox Into Repl

JayAySeaOhBee14.repl.co is my site. I would like to add lightbox for my credentials. Can somone pls help me?

3 Likes

looks like the pkg js is at: https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox-plus-jquery.min.js
and the css: https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css
link those with a style and a script tag
you also need a folder named images and store these inside
https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/images/close.png
https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/images/loading.gif
https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/images/next.png
https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/images/prev.png
I use the docs for ref:
Lightbox2
and the pkg at https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.css
Now just do this (from docs):

INITIALIZE WITH HTML

  • Single images. Add a data-lightbox attribute to any image link to enable Lightbox. For the value of the attribute, use a unique name for each image. For example:
<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

Optional:

  • Add a data-title attribute if you want to show a caption.
  • Add a data-alt attribute if you want to set the alt attribute of the linked image.
  • Image sets. If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

sorry for bad response it’s very late
hope this works

1 Like