Steps for including a 'close' button in Lightbox on Bootstrap 4

Apologies for my English...

I found this code here, but it was missing the close button.

Above on the Website I have,

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js">    </script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />

In my HTML,

<div class="container">
 <div class="row">
   <a href="photo/113.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3" >
     <img src="photo/113.jpg" class="img-fluid rounded">
   </a>
   <a href="photo/2-2.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
      <img src="photo/2-2.jpg" class="img-fluid rounded">
   </a>
   <a href="photo/3-2.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
      <img src="photo/3-2.jpg" class="img-fluid rounded">
   </a>

  </div>
</div>

style.scss 

.row {
    margin: 15px;
}

image { width: 70%; padding-left: 3rem;}

The Javacript Code,

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

But I couldn't figure out how to add the close button when displaying the image.

https://i.sstatic.net/Gfilp.png

If someone could kindly explain in simple terms how to add the close button, I would greatly appreciate it. Thank you!

javascriptbootstrap-4

Answer №1

If you want to close the current design, simply click somewhere else on the page.

[https://codepen.io/nsom/pen/VbqLew][1]

To add the close button, use the following code:

$(document).on("click", '[data-toggle="lightbox"]', function(event) {
  event.preventDefault();  
  $(this).ekkoLightbox({alwaysShowClose: true});
});

For the library used in this project, visit

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a script programmatically using an NPM package

I'm in the process of developing a package that relies on an external command tool called plop js. In my package.json, I aim to include a binary that points to an index.js file. "scripts":{ "plop": "plop" }, "bin": { "my-command": "ind ...

javascriptnode.jsnpm

I am looking for a custom script for a splash page that will automatically redirect users to one of three designated pages based on the information stored

As a programmer, I'm well-versed in coding but lack knowledge about creating and utilizing cookies. If anyone could provide guidance on this matter, it would be highly appreciated. I believe I require two concise scripts for this task. 1st Script: T ...

javascriptphpcookies

A guide to accessing items imported from a glb file within the Babylon JS game engine

When I use the BABYLON.SceneLoader.ImportMesh() method to load a .glb file created in Blender, one of the objects is named Cube.003. Surprisingly, after calling the method, Cube.003 is not included in the scene.meshes array. It does show up in the scene ...

javascriptblenderbabylonjs

Utilizing JSON Objects to Populate a Knockout Form

I am looking to populate a form using knockout data-binding from a JSON object. I currently have the values hardcoded in my knockout setup, but what I really want to achieve is dynamically populating the form based on a JSON object. Here is a link to my ...

javascriptjsonknockout.jsjspdf

Having trouble adjusting the label fontSize in ReactJS when using semantic-ui-react?

Is there a way to decrease the size of the label for a form input? In this scenario, attempting to set the fontSize does not work: <Form.Input label="Username" style={{fontSize: '10px'}} /> Does anyone have any suggestions on how to res ...

javascriptreactjssemantic-ui-react

What is the process for extracting information from a middleware within a Next.js framework?

I have been working on developing an authentication system using JWT in Next.js. In order to achieve this, I created a middleware that can validate the JWT token and establish an authentication process as shown below: export default function middleware(req ...

javascriptreactjsnext.js

Issue with relative templateUrl in Angular 2 not resolving paths

As I embark on creating my first Angular 2 app, I'm faced with the task of setting my template in an HTML file using `templateUrl`. Currently, both the component.ts and view.html are stored in the same folder under src/ directory. Here's what I ...

javascriptangular

I am unable to showcase the image at this time

Hey there, I'm having an issue with displaying an image stored inside the NextJS API folder. The alt attribute is showing up fine, but the actual image isn't displaying. When I console.log the image data, everything seems to be in place. Can anyo ...

javascripttypescriptnext.js

Showing Variables in JavaScript

<!DOCTYPE HTML> <html> <body> <button onclick="question++">Increment</button> <script> function test() { var question = 0; } </script> </body> </html> Qu ...

javascripthtmlwebincrement

Retrieve the input data following validation of an AngularJS form

Hello there! I am relatively new to utilizing AngularJS and Bootstrap. Recently, I have created a login form using AngularJS and Bootstrap CSS. Below you will find the code for my form: <form name="userForm" ng-submit="submitForm(userForm.$valid)" nova ...

javascriptangularjscodeignitertwitter-bootstrapcodeigniter-2

I'm looking to create a PDF with a table included. Does anyone have recommendations for a library that would be best suited for

Here is the information presented in a table: https://i.sstatic.net/DsNch.png This link is the source of the table data. I have explored using react-pdf, however, the table generation feature has not been implemented yet and building it manually with pla ...

javascriptreactjsjspdfdocumentation-generation

Middleware in Express routes are only functional within a class

It seems that when routes are added outside the Server class, middleware is ignored when making requests. Is there a solution to this issue? I understand that placing the routes inside the Server class would resolve the problem, but I specifically need it ...

javascriptexpress

Rails 7 is missing the Toast element from Bootstrap 5

Having some trouble with implementing Bootstrap 5 Toast in Rails 7 for flash messages. Here is the code I am currently using: # application.html.erb <head> ... <%= javascript_importmap_tags %> <script> const toastElList = document.que ...

javascriptruby-on-railsbootstrap-5

Track every click on any hyperlink throughout the entire webpage

I am attempting to capture any click event on a link throughout the entire page. For example, when a user clicks on the following link: <a href="/abc">abc<a/> I want to be able to retrieve the anchor tag like so: <span hre="/abc">abc& ...

javascriptjqueryhtml

Send an array using jQuery's $.post method

I am experiencing an issue with sending an array in $.post to PHP. When I use var_dump, the result is showing as "NULL" and JSON.stringify is not working. JQUERY var photobox = []; photobox.push(e.target.result); $.post("../modules/upload.php",{"imag ...

javascriptphpjqueryajax

What is the mechanism through which createStore fetches the initialState from the reducer function in redux?

While analyzing the code of redux in createStore.js, I am having trouble understanding how it retrieves the initial state from the reducer function when it is specified as the 1st argument. https://github.com/reduxjs/redux/blob/master/src/createStore.js#L ...

javascriptreactjsredux

Generating a JavaScript JSON object by iterating through a JSP bean with the help of JSTL's c:forEach

Two Java classes are defined as follows: public class Abc{ private List<SomeOtherClass> someClass; private String k; private String m; } public class SomeOtherClass{ private String a; private String b; private String c; } On a ...

javascriptjsonjsp

Increase scrolling speed? - Background abruptly moves after scroll

I'm facing a minor issue. I want to create a parallax background effect similar to what can be seen on nikebetterworld.com. In my initial attempt, I managed to achieve some functionality, but I believe it can be improved. As I scroll, the background p ...

javascriptjquerycss

Learn how to trigger a Bootstrap 4 modal simply by clicking a button on the initial page, which will then direct you to a second page where the modal is already activated

In my current project, I am working with Bootstrap 4 and I have a specific requirement to implement a modal. The modal should function in the following way: Upon clicking a button on the first .html page, I want to be redirected to a second .html page wh ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

What provides quicker performance in AngularJS: a directive or one-time binding?

I need to display a static array on a webpage without Angular watching its value. With that requirement in mind, my question is: Which method is faster: using a directive to fetch a scope variable and create an HTML element with this variable as a hard-co ...

javascriptangularjs