Highlighted

Bootstrap 4 ekk0-lightbox 5.3.0 prev/next controls missing…

Participant ,
Aug 28, 2018

Copy link to clipboard

Copied

On-click, modal appears but is missing controls to advance.

======================BEGIN HTML======================

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Bootstrap 4 Lightbox v4</title>

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

   

<!--satStyles CSS-->

    <link href="css/satStyles.css" rel="stylesheet" type="text/css">

   

    <!--ekkoLightbox 5.3.0 GitHub-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" integrity="sha256-HAaDW5o2+LelybUhfuk0Zh2Vdk8Y2W2UeKmbaXhalfA=" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js" integrity="sha256-jGAkJO3hvqIDc4nIY1sfh/FPbV+UK+1N+xJJg6zzr7A=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js" integrity="sha256-Y1rRlwTzT5K5hhCBfAFWABD4cU13QGuRN6P5apfWzVs=" crossorigin="anonymous"></script>

</head>

  <body class="bg-dark">

   

    <div class="col-md-5 colTop">

<h1 class="text-white mb-0">Bootstrap 4 Image Gallery</h1>

  <p class="text-white">Test Page</p>

  </div> 

  <!-- Slideshow or Image Gallery -->

  <div class="container">

  <div class="row">

    <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid rounded">

    </a>

    <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid rounded">

    </a>

    <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid rounded">

    </a>

  </div>

  <div class="row">

    <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid rounded">

    </a>

    <a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid rounded">

    </a>

    <a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid rounded">

    </a>

  </div>

</div>

<script>

  $(document).on('click', '[data-toggle="lightbox"]', function(event) {

                event.preventDefault();

                $(this).ekkoLightbox();

            });

    </script>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

   

</body>

</html>

The below should work:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Lightbox</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">

</head>

<body>

<!-- Slideshow or Image Gallery -->

<div class="container">

<div class="row">

<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid rounded">

</a>

</div>

<div class="row">

<a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=254" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=255" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=256" class="img-fluid rounded">

</a>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>

<script>

$(document).on('click', '[data-toggle="lightbox"]', function(event) {

event.preventDefault();

$(this).ekkoLightbox();

});

</script>

</body>

</html>

TOPICS
Create Slideshows in Dreamweaver

Views

2.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Bootstrap 4 ekk0-lightbox 5.3.0 prev/next controls missing…

Participant ,
Aug 28, 2018

Copy link to clipboard

Copied

On-click, modal appears but is missing controls to advance.

======================BEGIN HTML======================

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Bootstrap 4 Lightbox v4</title>

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

   

<!--satStyles CSS-->

    <link href="css/satStyles.css" rel="stylesheet" type="text/css">

   

    <!--ekkoLightbox 5.3.0 GitHub-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" integrity="sha256-HAaDW5o2+LelybUhfuk0Zh2Vdk8Y2W2UeKmbaXhalfA=" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js" integrity="sha256-jGAkJO3hvqIDc4nIY1sfh/FPbV+UK+1N+xJJg6zzr7A=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js" integrity="sha256-Y1rRlwTzT5K5hhCBfAFWABD4cU13QGuRN6P5apfWzVs=" crossorigin="anonymous"></script>

</head>

  <body class="bg-dark">

   

    <div class="col-md-5 colTop">

<h1 class="text-white mb-0">Bootstrap 4 Image Gallery</h1>

  <p class="text-white">Test Page</p>

  </div> 

  <!-- Slideshow or Image Gallery -->

  <div class="container">

  <div class="row">

    <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid rounded">

    </a>

    <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid rounded">

    </a>

    <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid rounded">

    </a>

  </div>

  <div class="row">

    <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid rounded">

    </a>

    <a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid rounded">

    </a>

    <a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

      <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid rounded">

    </a>

  </div>

</div>

<script>

  $(document).on('click', '[data-toggle="lightbox"]', function(event) {

                event.preventDefault();

                $(this).ekkoLightbox();

            });

    </script>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

   

</body>

</html>

The below should work:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Lightbox</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">

</head>

<body>

<!-- Slideshow or Image Gallery -->

<div class="container">

<div class="row">

<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid rounded">

</a>

</div>

<div class="row">

<a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=254" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=255" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=256" class="img-fluid rounded">

</a>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>

<script>

$(document).on('click', '[data-toggle="lightbox"]', function(event) {

event.preventDefault();

$(this).ekkoLightbox();

});

</script>

</body>

</html>

TOPICS
Create Slideshows in Dreamweaver

Views

2.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 28, 2018 0
Adobe Community Professional ,
Aug 28, 2018

Copy link to clipboard

Copied

I don't see where you have added the options. Have a look here Bootstrap Lightbox


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 28, 2018 0
LEGEND ,
Aug 28, 2018

Copy link to clipboard

Copied

The below should work:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Lightbox</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">

</head>

<body>

<!-- Slideshow or Image Gallery -->

<div class="container">

<div class="row">

<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid rounded">

</a>

</div>

<div class="row">

<a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=254" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=255" class="img-fluid rounded">

</a>

<a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">

<img src="https://unsplash.it/600.jpg?image=256" class="img-fluid rounded">

</a>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>

<script>

$(document).on('click', '[data-toggle="lightbox"]', function(event) {

event.preventDefault();

$(this).ekkoLightbox();

});

</script>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 28, 2018 0
Participant ,
Aug 28, 2018

Copy link to clipboard

Copied

Thanks for the correct answer.

I had the "ekko-lightbox/5.3.0/ekko-lightbox.min.js"" in the head instead of </body>.

Works fine now.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 28, 2018 0
Asksnbbb LATEST
New Here ,
Apr 17, 2020

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2020 0