design – Page 3 – No Better Tech

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>`;
}

Google reCAPTCHA in a web form

Using HTML5, JS/jQuery/Ajax, CSS3, Bootstrap, PHP

Documentation here:

https://developers.google.com/recaptcha/docs/display

Practiced here: http://www.followthesun.com.cy/contactus.php

To-Do the same here in this Article Web Log/Video Log:

http://www.latchiquads.com/contactus.html

http://www.polistaxi.com/contacts.php

http://www.poliscyprusquads.com/contactus.html

Notes:

http://www.latchiquads.com/contactus.html

in the webpage HTML5/CSS3/JS/JQUERY code.

http://www.latchiquads.com/contactus.html

<script type="text/javascript">

  var reC = "";

  var verifyCallback = function(response) {
        //console.log(response);
        //reC = response;
        $("#g-recaptcha-response").val(response);
      };
  var onloadCallback = function() {
    grecaptcha.render('html_element', {
      'sitekey' : 'site key',          
            'callback' : verifyCallback
    });
  };
</script>

                                    <div class="form-group">
                                      <label class="control-label col-md-3" for="comment"> </label>
                                      <div class="col-md-9">
                                        <div id="html_element"></div>
                                      </div>                                            
                                    </div>

in case of JS Conflicts --- try a different position of

<script src="php/webformsPHPajax2017.js?2021"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
</body>

D:\htdocs_xampp\Latchiquads.com\php\webformsPHPajax2017.js

$(document).ready(function() {

var url = "php/contactus.php";
$('#send1').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    //alert("send1");

  $.ajax({url: url, type: 'POST',
  data:
  {
    name: escapeHTML($('#name').val()),
    email: escapeHTML($('#email').val()),
    phone: escapeHTML($('#phone').val()),
    comments: escapeHTML($('#comment').val()),
    token: escapeHTML($("#g-recaptcha-response").val())
  },
  error: function() {
      $("#alertMsg").html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Error!</strong> Something went wrong, check your email and retry!</div>');     
  },
  success: function(response){
    console.log(response);
    if (response=="true")                 
      $("#alertMsg").html('<div class="alert alert-success"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Success!</strong> We will reply ASAP!! See your email box for confirmation!</div>');
    else      
      $("#alertMsg").html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Error!</strong> Something went wrong, check your email and retry!</div>');      
    }
  });
    return false;
});

D:\htdocs_xampp\Latchiquads.com\php\contactus.php

$token = $_POST[“token”];

function httpPost($token)
{

$data = array(
    "secret" => "secret key", 
    "response" => $token
);    
foreach($data as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }
rtrim($fields_string, '&');

$data_string = json_encode($data);                                                                                                         
$ch = curl_init('https://www.google.com/recaptcha/api/siteverify');                                                                      
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                     
curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);                                                                  
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                                                      

$result = json_decode(curl_exec($ch));    

return $result->success;

}

function quickContactProcess($name,$email,$phone,$comments, $token) {

$captchaOK = httpPost($token);

if ($response == “false” || $captchaOK != 1) {
//die (“The reCAPTCHA wasn’t clicked. Go Back and try it again.”);
$response = “false”;
} else {
$response = “true”;
}

quickContactProcess($name,$email,$phone,$comments, $token);
?>