{"id":1465,"date":"2022-05-03T23:40:03","date_gmt":"2022-05-03T20:40:03","guid":{"rendered":"http:\/\/leonidassavvides.com\/blog\/?p=1465"},"modified":"2022-05-03T23:40:03","modified_gmt":"2022-05-03T20:40:03","slug":"responsive-bootstrap-5-x-lightbox-gallery","status":"publish","type":"post","link":"https:\/\/www.leonidassavvides.com\/blog\/2022\/05\/responsive-bootstrap-5-x-lightbox-gallery\/","title":{"rendered":"Responsive Bootstrap 5.x Lightbox Gallery"},"content":{"rendered":"
<\/div>\n

The below Tutorial worked and was tested with Bootstrap 5.0.2 – SUCCESS.<\/mark><\/strong><\/p>\n\n\n\n

https:\/\/getbootstrap.com\/docs\/5.1\/getting-started\/download\/<\/a><\/p>\n\n\n\n

I implemented it in Production here: http:\/\/www.michaeleliasphotovoltaicsystems.com\/projects.php<\/a><\/p>\n\n\n\n

Note:<\/strong> FOUND A DIFFICULTY BUT – Got Error in Browser Console – <\/strong><\/mark>SOLVED BY DOWNLOADING:<\/mark><\/strong> bootstrap.min.css.map from<\/p>\n\n\n\n

https:\/\/www.cdnpkg.com\/twitter-bootstrap\/file\/bootstrap.min.css.map\/<\/a><\/p>\n\n\n\n

AND PUT IN THE SAME <\/strong>FOLDER AS<\/span> \\assets\\css\\<\/mark><\/strong>bootstrap.min.css >>>><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

JUST 4-STEPS<\/p>\n\n\n\n

STEP 1 – HTML 5<\/strong> – PUT IN HTML IN PLACE OF GALLERY APPEAR<\/p>\n\n\n\n

<section class=\"image-grid\">\n  <div class=\"container-xxl\">\n    <div class=\"row gy-4\">\n      <div class=\"col-12 col-sm-6 col-md-4\">\n        <figure>\n          <a class=\"d-block\" href=\"\">\n            <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\">\n          <\/a>\n        <\/figure>\n      <\/div>\n      <div class=\"col-12 col-sm-6 col-md-4\">\n        <figure>\n          <a class=\"d-block\" href=\"\">\n            <img width=\"1920\" height=\"1280\" src=\"ireland2.jpg\" class=\"img-fluid\" alt=\"Fintown, Ireland\" data-caption=\"Fintown, Ireland\">\n          <\/a>\n        <\/figure>\n      <\/div>\n      <!-- more columns here -->\n    <\/div>\n  <\/div>\n<\/section><\/pre>\n\n\n\n
STEP 2 – MODAL POPUP-WINDOW HTML5<\/strong> – BUT IN THE END OF HTML<\/p>\n\n\n\n
<div class=\"modal lightbox-modal\" id=\"lightbox-modal\" tabindex=\"-1\">\n  <div class=\"modal-dialog modal-fullscreen\">\n    <div class=\"modal-content\">\n      <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n      <div class=\"modal-body\">\n        <div class=\"container-fluid p-0\">\n          <!-- JS content here -->\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div><\/pre>\n\n\n\n
STEP 3 – CSS STYLES IN THE HEAD ELEMENT<\/strong> – PUT IN THE HEAD ABOVE <\/head><\/p>\n\n\n\n
\/* BASIC STYLES\n\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013 *\/\n:root {\n  --lightbox: #242424;\n}\n \nbody {\n  margin: 24px 0 48px;\n  font: 20px \/ 28px \"Marck Script\", cursive;\n}\n \n\/* IMAGE GRID STYLES\n\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013 *\/\n.image-grid figure {\n  margin-bottom: 0;\n}\n \n.image-grid img {\n  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);\n  transition: box-shadow 0.2s;\n}\n \n.image-grid a:hover img {\n  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);\n}\n \n\/* LIGHTBOX STYLES\n\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013 *\/\n.lightbox-modal .modal-content {\n  background: var(--lightbox);\n}\n \n.lightbox-modal .btn-close {\n  position: absolute;\n  top: 20px;\n  right: 18px;\n  font-size: 1.2rem;\n  z-index: 10;\n}\n \n.lightbox-modal .modal-body {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  text-align: center;\n}\n \n.lightbox-modal img {\n  width: auto;\n  max-height: 100vh;\n  max-width: 100%;\n}\n \n.lightbox-modal .carousel-caption {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(36, 36, 36, 0.75);\n}\n \n.lightbox-modal .carousel-control-prev,\n.lightbox-modal .carousel-control-next {\n  top: 50%;\n  bottom: auto;\n  transform: translateY(-50%);\n  width: auto;\n}\n \n.lightbox-modal .carousel-control-prev {\n  left: 10px;\n}\n \n.lightbox-modal .carousel-control-next {\n  right: 10px;\n}<\/pre>\n\n\n\n
STEP 4 – FINAL JAVASCRIPT CODE – PUT AT THE END ABOVE <\/body><\/p>\n\n\n\n
const imageGrid = document.querySelector(\".image-grid\");\nconst links = imageGrid.querySelectorAll(\"a\");\nconst imgs = imageGrid.querySelectorAll(\"img\");\nconst lightboxModal = document.getElementById(\"lightbox-modal\");\nconst bsModal = new bootstrap.Modal(lightboxModal);\nconst modalBody = document.querySelector(\".modal-body .container-fluid\");\n \nfor (const link of links) {\n  link.addEventListener(\"click\", function (e) {\n    e.preventDefault();\n    const currentImg = link.querySelector(\"img\");\n    const lightboxCarousel = document.getElementById(\"lightboxCarousel\");\n    if (lightboxCarousel) {\n      const parentCol = link.parentElement.parentElement;\n      const index = [...parentCol.parentElement.children].indexOf(parentCol);\n      const bsCarousel = new bootstrap.Carousel(lightboxCarousel);\n      bsCarousel.to(index);\n    } else {\n      createCarousel(currentImg);\n    }\n    bsModal.show();\n  });\n}\n \nfunction createCarousel(img) {\n  const markup = `\n    <div id=\"lightboxCarousel\" class=\"carousel slide carousel-fade\" data-bs-ride=\"carousel\" data-bs-interval=\"false\">\n      <div class=\"carousel-inner\">\n        ${createSlides(img)}\n      <\/div> \n      <button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#lightboxCarousel\" data-bs-slide=\"prev\">\n       <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"><\/span>\n       <span class=\"visually-hidden\">Previous<\/span>\n      <\/button>\n      <button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#lightboxCarousel\" data-bs-slide=\"next\">\n        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"><\/span>\n        <span class=\"visually-hidden\">Next<\/span>\n      <\/button>\n    <\/div>\n    `;\n \n  modalBody.innerHTML = markup;\n}\n \nfunction createSlides(img) {\n  let markup = \"\";\n  const currentImgSrc = img.getAttribute(\"src\");\n \n  for (const img of imgs) {\n    const imgSrc = img.getAttribute(\"src\");\n    const imgAlt = img.getAttribute(\"alt\");\n    const imgCaption = img.getAttribute(\"data-caption\");\n \n    markup += `\n    <div class=\"carousel-item${currentImgSrc === imgSrc ? \" active\" : \"\"}\">\n      <img src=${imgSrc} alt=${imgAlt}>\n      ${imgCaption ? createCaption(imgCaption) : \"\"}\n    <\/div>\n    `;\n  }\n \n  return markup;\n}\n \nfunction createCaption(caption) {\n  return `<div class=\"carousel-caption\">\n     <p class=\"m-0\">${caption}<\/p>\n    <\/div>`;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
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 – … Continue reading “Responsive Bootstrap 5.x Lightbox Gallery”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,8,10,12,27,42,43],"tags":[73,74,76,77,209,210,211],"class_list":["post-1465","post","type-post","status-publish","format-standard","hentry","category-design","category-dev","category-html5","category-internet","category-other","category-technical","category-tech","tag-bootstrap-5-gallery","tag-bootstrap-5-lightbox-gallery","tag-bootstrap-gallery","tag-bootstrap-lightbox-gallery","tag-responsive-bootstrap-5-gallery","tag-responsive-bootstrap-5-lightbox-gallery","tag-responsive-bootstrap-lightbox-gallery"],"_links":{"self":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts\/1465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/comments?post=1465"}],"version-history":[{"count":0,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts\/1465\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/media?parent=1465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/categories?post=1465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/tags?post=1465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}