The lightbox2 image gallery is completely nonfunctional

I tried following Lokesh Dhakar's step-by-step guide on how to create a slideshow image gallery, which can be found at . Unfortunately, I am still facing issues with it as instead of functioning as a gallery, it simply opens the images like basic links. Despite searching through Lokesh's website and various troubleshooting threads on Stack Overflow, I have not been able to find a solution that works for me. Any suggestions or tips would be greatly appreciated.

Thank you in advance for any assistance provided.

<!DOCTYPE html>
<html>
<head style="background-color:powderblue;">
<title>Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/lightbox_custom.css">
</head>

<body>
<div>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/lightbox.js"></script>
</body>
</html>
javascriptjquerycsslightboxlightbox2

Answer №1

Thank you for all your assistance. I have been troubleshooting extensively and finally uncovered my mistake. Towards the end, I mistakenly had: 

<script src="/js/lightbox.js"></script>
instead of 
<script src="js/lightbox.js"></script>

The additional slash ("/") before js/lightbox.js was causing all the issues, which I now realize due to my lack of experience. It seems like the problem has been resolved now.

Answer №2

After incorporating the lightbox CSS/JS files linked from the URL you provided (), your code seems to be functioning correctly. Can you share what's inside your lightbox_custom.css? Are you utilizing that file to override any styles in the lightbox.css file? And have there been any modifications made to the lightbox.js code?

<!DOCTYPE html>
<html>

<head style="background-color:powderblue;">
  <title>Title</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
</head>

<body>
  <div>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://www.lokeshdhakar.com/projects/lightbox2/js/lightbox-plus-jquery.min.js"></script>
</body>

</html>

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

Delete an element from an array after a specified timeout period

I'm currently working on a Vue component that is responsible for displaying notifications which should automatically disappear after a set time. My Alert component triggers an 'expired' event and then I handle this event in the parent compon ...

javascriptvue.js

Steps for recognizing hash elements within a loop while utilizing jquery

I have a hash of messages (@messages) that are organized by sender: {'Tom'=>[#<ShortMessage id: 16, content: "ABC", created_at: "2014-01-28 16:35:33", from: 'Tom'>, #<ShortMessage id: 15, content: "DEF", created_at: "2014-0 ...

jqueryruby-on-railsrubyajax

Updating a prop in React-select multi select when no option is selected

I am currently utilizing the react-select library to construct a multi-selection menu. My goal is to establish a specific style width on the div when no value is selected, and then dynamically adjust this width as the user starts selecting values from the ...

javascriptreactjsreact-select

transfer the value of a method to a different component

In my Component called IncomeList, there is a method named sumValue. This method simply adds different numbers together to produce one value, for example 3+5 = 8. Similarly, in another Component named OutputList, the same logic is applied but with a method ...

javascriptvue.jsvuex

Transmitting Various Static Files via Express Router

I am currently utilizing the Express router to serve static .html files based on the URL specified in router.get. For example, this code snippet sends the homepage: router.get('/', function(req, res, next) { res.sendFile('index.html&ap ...

javascriptnode.jsexpress

Struggling to retrieve information from a connected SQL table within an Express application

I am currently working on an API using express and postgreSQL to showcase restaurant ratings, reviews, and cuisine in specific areas. I have successfully created routes and controllers that display SQL tables in Postman. My challenge arises when attemptin ...

javascriptpostgresqlexpresspg-promise

When attempting to fetch JSON data using the Angular 2 `http.get()` method, the data returned is undefined and the component does not reflect any

My http-data.service is set up to accept json for output in the component template. Initially, the console displays that the first few calls return undefined, while subsequent calls start returning json. However, upon checking the component, it is evident ...

javascriptjsonangulartypescriptasynchronous

Angular's ngOnDestroy lifecycle hook does not execute as expected after a button click event

When working on my HTML code, I encountered the following: <div class="form-group"> <button type="submit" value="submit" class="btn btn-secondary btn-float">Upload</butt ...

javascriptjqueryasp.netangulartypescript

Creating a jQuery Grid with multiple column grouping in PHP - A step-by-step guide

I'm looking to create a jQuery grid that can be grouped by multiple columns. Currently, the code I am using only allows for grouping by a single column. The column names for grouping should appear in a dropdown menu for selection. Here is the jQuery ...

phpjavascriptjqueryjqgrid

Why is my PHP code returning empty in Chrome but showing values in Firefox? What steps can I take to troubleshoot this

My initial assumption was that it should be server-side specific and not introduce differing behaviors dependent on the browser. The code snippet below results in null, but when tested in Firefox, it contains data that is later processed into a table. $H ...

javascriptphpgoogle-chromefirefox

What are the steps to incorporate SVG into a React Native project?

I'm in the process of integrating bootstrap icons into my react native project, but I've been having trouble finding clear instructions on how to render an SVG in react-native. Can anyone provide some guidance on this? ...

javascriptreact-nativesvgbootstrap-4bootstrap-icons

Tips for stopping an accordion from toggling in Bootstrap when a user clicks on a specific section of the toggle button

I am currently utilizing bootstrap for my project. The accordion feature I have implemented is standard, but I am looking for a way to customize its behavior. Specifically, when a user clicks on elements with the class 'option', I want it to sele ...

javascriptcsssassbootstrap-5

What is the best way to calculate the number of squares required to completely fill a browser window in real-time?

I am creating a unique design with colorful squares to cover the entire browser window (for example, 20px by 20px repeated both horizontally and vertically). Each square corresponds to one of 100 different colors, which links to a relevant blog post about ...

javascriptjqueryhtmlcss

Different methods for organizing an array of strings based on eslint/prettier

I possess an assortment of keys that I desire to sort in alphabetical order whenever I execute eslint --fix/prettier. My inference is that such a feature does not exist by default due to its potential impact on the code's behavior. Therefore, my quer ...

javascripttypescripteslintprettier

Ajax form submission with FormData encountered an error: status 200 OK

I am attempting to upload a file using Ajax. The status of the Error is 200 and it shows as ok. The response text contains my MasterPage HTML Code. When debugging with a breakpoint in the method, I noticed that the request never reached the Back-end. H ...

c#jqueryajax

I am looking for a string with this particular format in JavaScript

I am working with a JSON string array that looks like this: var dataMaster = [ {"id":1,"name":"John Doe","age":30}, {"id":2,"name":"Jane Smith","age":28} ] If you want to see how I would like to transform this data, please visit the following lin ...

javascriptjquery

"Troubleshooting: jQuery Find function not functioning correctly with HTML template

I am having trouble with a Shopify liquid code that I am trying to load into an HTML template <script type="text/template" id="description"> <div class="product-ddd"> {{ product.description }} </div> ...

javascripthtmljqueryshopify

Tips for concealing a particular button that shares the same class designation

Is there a way to create a function in vanilla JavaScript that can hide a specific button? <button class"btn">button 1 </button> <button class"btn">button 2 </button> <button class"btn">button 3 </button> Specifically, ...

javascriptfunction

Troubleshooting: React Native and OneSignal notifications not showing up

Currently, I am developing an app in React Native and working on integrating notifications with OneSignal. Although I am able to efficiently receive notifications, I do not want them to be displayed on the screen when they are received. I came across a ` ...

javascriptnode.jsreact-nativenotificationsonesignal

WordPress Ignoring PHP Generated Elements When Processing Divs

Whenever I attempt to utilize the get_date function, it seems to disregard all div elements and instead places itself right after the header, at the beginning of the <div class="entry-content">. <div class="entry-content"> May 16, ...

phphtmlcsswordpress