Responsive Bootstrap 5.x Lightbox Gallery

The below Tutorial worked and was tested with Bootstrap 5.0.2 – SUCCESS.

https://getbootstrap.com/docs/5.1/getting-started/download/

I implemented it in Production here: http://www.michaeleliasphotovoltaicsystems.com/projects.php

Note: FOUND A DIFFICULTY BUT – Got Error in Browser Console – SOLVED BY DOWNLOADING: bootstrap.min.css.map from

https://www.cdnpkg.com/twitter-bootstrap/file/bootstrap.min.css.map/

AND PUT IN THE SAME FOLDER AS \assets\css\bootstrap.min.css >>>>

JUST 4-STEPS

STEP 1 – HTML 5 – PUT IN HTML IN PLACE OF GALLERY APPEAR

<section class="image-grid">
  <div class="container-xxl">
    <div class="row gy-4">
      <div class="col-12 col-sm-6 col-md-4">
        <figure>
          <a class="d-block" href="">
            <img width="1920" height="1280" src="ireland1.jpg" class="img-fluid" alt="Ring of Kerry, County Kerry, Ireland" data-caption="Ring of Kerry, County Kerry, Ireland">
          </a>
        </figure>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <figure>
          <a class="d-block" href="">
            <img width="1920" height="1280" src="ireland2.jpg" class="img-fluid" alt="Fintown, Ireland" data-caption="Fintown, Ireland">
          </a>
        </figure>
      </div>
      <!-- more columns here -->
    </div>
  </div>
</section>

STEP 2 – MODAL POPUP-WINDOW HTML5 – BUT IN THE END OF HTML

<div class="modal lightbox-modal" id="lightbox-modal" tabindex="-1">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-body">
        <div class="container-fluid p-0">
          <!-- JS content here -->
        </div>
      </div>
    </div>
  </div>
</div>

STEP 3 – CSS STYLES IN THE HEAD ELEMENT – PUT IN THE HEAD ABOVE </head>

/* BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --lightbox: #242424;
}
 
body {
  margin: 24px 0 48px;
  font: 20px / 28px "Marck Script", cursive;
}
 
/* IMAGE GRID STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.image-grid figure {
  margin-bottom: 0;
}
 
.image-grid img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s;
}
 
.image-grid a:hover img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);
}
 
/* LIGHTBOX STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lightbox-modal .modal-content {
  background: var(--lightbox);
}
 
.lightbox-modal .btn-close {
  position: absolute;
  top: 20px;
  right: 18px;
  font-size: 1.2rem;
  z-index: 10;
}
 
.lightbox-modal .modal-body {
  display: flex;
  align-items: center;
  padding: 0;
  text-align: center;
}
 
.lightbox-modal img {
  width: auto;
  max-height: 100vh;
  max-width: 100%;
}
 
.lightbox-modal .carousel-caption {
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(36, 36, 36, 0.75);
}
 
.lightbox-modal .carousel-control-prev,
.lightbox-modal .carousel-control-next {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: auto;
}
 
.lightbox-modal .carousel-control-prev {
  left: 10px;
}
 
.lightbox-modal .carousel-control-next {
  right: 10px;
}

STEP 4 – FINAL JAVASCRIPT CODE – PUT AT THE END ABOVE </body>

const imageGrid = document.querySelector(".image-grid");
const links = imageGrid.querySelectorAll("a");
const imgs = imageGrid.querySelectorAll("img");
const lightboxModal = document.getElementById("lightbox-modal");
const bsModal = new bootstrap.Modal(lightboxModal);
const modalBody = document.querySelector(".modal-body .container-fluid");
 
for (const link of links) {
  link.addEventListener("click", function (e) {
    e.preventDefault();
    const currentImg = link.querySelector("img");
    const lightboxCarousel = document.getElementById("lightboxCarousel");
    if (lightboxCarousel) {
      const parentCol = link.parentElement.parentElement;
      const index = [...parentCol.parentElement.children].indexOf(parentCol);
      const bsCarousel = new bootstrap.Carousel(lightboxCarousel);
      bsCarousel.to(index);
    } else {
      createCarousel(currentImg);
    }
    bsModal.show();
  });
}
 
function createCarousel(img) {
  const markup = `
    <div id="lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
      <div class="carousel-inner">
        ${createSlides(img)}
      </div> 
      <button class="carousel-control-prev" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="prev">
       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
       <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    `;
 
  modalBody.innerHTML = markup;
}
 
function createSlides(img) {
  let markup = "";
  const currentImgSrc = img.getAttribute("src");
 
  for (const img of imgs) {
    const imgSrc = img.getAttribute("src");
    const imgAlt = img.getAttribute("alt");
    const imgCaption = img.getAttribute("data-caption");
 
    markup += `
    <div class="carousel-item${currentImgSrc === imgSrc ? " active" : ""}">
      <img src=${imgSrc} alt=${imgAlt}>
      ${imgCaption ? createCaption(imgCaption) : ""}
    </div>
    `;
  }
 
  return markup;
}
 
function createCaption(caption) {
  return `<div class="carousel-caption">
     <p class="m-0">${caption}</p>
    </div>`;
}

The benefits and drawbacks of modern technology

When someone refers for today’s modern technology, surely he refers to the 21st century, Information Age and the Internet as the communication media of the new millennium. Of course this 17 year history of the Internet brought indirectly many significant advances in other Science and Technology fields. Without doubt Internet changed our lives for ever decisively and absolutely.

Today, just with a PC and an internet connection, without additional costs you can send instantly and receive instantly messages(emails) from the other corner of the world just not long before ago you have to await letter to get to recipient in about 7 days if not lost in transit and other so the reply to return to you. Now you can find almost any piece of info with a web browser and chat (eg.Skype), again freely using text, audio or even video.

Another area of technology bring change to us, is Mobile Communications. We are NOT away from the fact each individual, will posses a mobile phone for fun or for business, anywhere he is in the world, anytime. Today exists such services in the mobile world as talking, Small Message Service (SMS), Multimedia Message Service (MMS), or chatting with text, and also accessing the Internet from mobile phone using either wifi access point or 3G cellular internet, and hence you may browse or send email or use some other service of the Internet, anywhere and anytime. Coming is Mobile video calling.

Of course Mobile Communications is very closely related to the Internet, both networks belonging to Electronic Age Revolution of computers in general. This top edge of technology brings us many benefits as well as drawbacks too.

Benefits include fast and more accurate communications and business. Now for example in case of danger eg car accident away from the town, you can use your mobile to call the emergency number immediately and authorities to find automatically using cellular network services, your position on the map you call from, so help come accurately and immediately.

Internet makes us more Socialable people in all steps of life, Social Internet Networks are on rise these days. Now our time is better spent, and use efficiently. Rather use snail mail now we are using email, rather use standard telephone network call now we are using chatting via text, audio, video and file transfer. Almost now any info can get accessed via a web browser using an Internet search engine.

Chatting etc services brings fun, work and education too. Leaning online is a consequence of all these. Now universities provide part or full degrees online. This use of internet technology tools and cost is only from university fees. Also language learning can be taken with technology and resources of the Internet. All these are a click away.

As of security now when you are away, you can watch your office or home via security cameras through the internet. Also when you plan a trip domestic or international, on the Internet you can plan and book everything for it. Also, your Bank can accessed via internet banking with a web browser, so as access accounts, transfer money, order replacements etc.

On the other hand beyond these benefits, Internet Age brings and some subtle drawbacks.

Now when you are online your Internet PC without even know it can get compromised by bad guys, that can stole anything from company data to credit card numbers covering their tracks. The attacks can be done on Internet Servers as well, making services unavailable, may be in emergency sometimes. Banks are on instant danger for example, a bad guy may change account data and more.

Of course many anti-criminal tools exist like anti-virus tools, anti-malware, anti-spyware and so on, that must be considered by any Internet user.

Of course as internet makes us smarter, so does smarter the street thieves too. So we must be careful in using all of our possessions, and especially credit cards in front of cameras in all steps of life. Thieves continue to discover new ways, to draw your attention, and so on and so forth.

Finally I think new technology has brought many advantages and drawbacks. People behind the internet and technology think well before they create it, so as to advance our lives and NOT to degrade it. So in my opinion I believe, modern technology has brought more goods to us, rather than drawbacks. In case of drawbacks exist always an anti solution. Technology is going to advance, but as we proceed this is going more slowly, and it will stay good for us, in all its way.

Leaflet: Security of your Possessions while you are traveling

When you plan to travel abroad you must take actions, “Before you go” as well as “During your stay” and also “On your return”.

Here are the most important actions you must take care of:

A) Before you go

 

Money & ID matters

Make two photocopies of your Passport, ID card, Drivers License, Credit Cards, and Airline or Sea Tickets. Also note your Laptop and Mobile phone S/Ns etc id numbers and characteristics so can identified in case found after lost. Keep one copy in your home and the other in your suitcase not near your valuables.

Do NOT take with you, all your credit cards, Social security card but only the necessary ones. Do not keep all cards or valuables in one place but in two places.

Better take with you an old mobile phone or old laptop without important data on them like passwords, you may just want to access with this laptop your bank account over the internet, but only in secure places like your hotel, but not in internet cafes.

After contact your Bank saying you plan to travel in the particular country for any advice tips has and can give. Ask in case of lost or theft of money possessions like cards or cash how to cancel and how to replace them anywhere in the places you plan to travel taking all possibilities. Learn phone numbers or web sites you can disable cards in case of lost or order new ones along with cash. Keep these along photocopies above and on your mobile phone. Also keep emergency numbers in the visited country like Hospital, Police, Fire, Hotel, Taxis, and your embassy of course.

Country profile

First read country profile, and learn about laws & customs, criminality, maps, transport routes, internet criminality, and recent news. All can found online.

General

Also it is good if, in a country where English is spoken in a small scale, to learn some local language words/phrases and bring with you a Language-to-Language Dialogs pocket-book, this could be used anywhere in your trip.

Laptop & Mobile Phone (wifi/3G/Roaming)

Find out on your trip places and stays where could you have safe internet connection (May for internet banking) and also arrange with your cellular and internet provider in your home country, roaming costs and plans for the visited country. You may consider buying a Roaming Data plan for your internet connections, for one month from your cellular provider.

Notify some family members or some friends only of your trip, and say for example if not on the phone every 2-3 days something happened.

 

 

B) During your stay

Hotel

While you are going out of your hotel get with you 2 credit cards and some cash only, rest leave the in hotel safe along with all other ID materials. Keep the pre-referred photocopies in your suitcase.

Lock always the hotel room.

Transportation

Take only authorized taxis.

On trains, trams or buses you may drugged and robbed while sleeping. Avoid long waits in terminals; hence pickpockets, thieves, and violent offenders are common in such areas.

Laptop theft is common in Airports.

Laptop & Mobile Phone (wifi/3G/Roaming)

Use wifi or Ethernet internet connection of your Hotel, but not in internet cafes hence they are more secure. Bad guys may compromise your connection at times and steal private info or install malware in your laptop.

Do not attach Devices in your laptop like USB memory sticks.

Do Logon to company network only from company’s laptop.

If you lost your Laptop or/and Mobile Phone immediately report it, to local authorities and to your consulate with your photocopies and ID numbers.

Money Matters

If you lose your wallet (all or part of your possessions) immediately report it, to local authorities and to your consulate along provide your photocopies. Also call your bank’s staff for this purpose, so as to cancel credit cards and send replacements to your hotel or consulate.

Before you depart for your home country

Just when everything went ok and ready for departure, in your hotel, compare/check/count all your possessions and ID Documents with photocopies like credit cards, traveler’s checks left, Passport, Driving License. If something is missing notify Authorities or Bank immediately.

C) On your return

On your return compare/check/count all your possessions and ID Documents with photocopies like credit cards, traveler’s checks left, Passport, Driving License. If something is missing notify Authorities or Bank immediately.

Also just on arrival home and too thereafter 1 or 2 months, check your Bank Accounts and credit cards statements online from your online bank account, for any malware activity. If you detected anything, you should contact your bank immediately to cancel the credit card(s).

Links: FBI, travel.state.gov