The image does not appear as expected in Lightgallery

I am in search of a gallery that features thumbnails, opens up upon clicking on an image, and includes captions. Although lightgalleryjs meets most of my requirements, it fails to render the actual images, showing a black screen overlay instead.

Code:

Inside the head tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-thumbnail.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-autoplay.min.css">

Inside the body:

       <div class="gallery1" id="gallery1">
    <a href="assets/images/events/IMG_2464.JPG" 
      >
      <img src="assets/images/events/IMG_2475.JPG" alt="">
    </a>

    <a href="assets/images/events/IMG_4713.JPG">
      <img src="assets/images/events/IMG_4713.JPG" alt="">
    </a>
    <a href="assets/images/events/IMG_4713.JPG">
      <img src="assets/images/events/IMG_4713.JPG" alt="">
    </a>
    <a href="assets/images/events/IMG_4713.JPG">
      <img src="assets/images/events/IMG_4713.JPG" alt="">
    </a>

   </div>

Above the closing body tag:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/share/lg-share.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/autoplay/lg-autoplay.min.js"></script>
<script>
  let gallery = document.getElementById("gallery1");
  lightGallery(gallery, {        
    controls: false,
    speed: 200,
    download: false,
    counter: false,
    plugins: [ lgThumbnail, lgAutoplay],
  })
</script>
javascriptcsscarousellightgallery

Answer №1

Everything seems to be functioning correctly in your code.

Have you double-checked that all of your image paths are accurate?

The only modification I made to the provided code was adjusting the image paths.

let gallery = document.getElementById("gallery1");

lightGallery(gallery, {
  controls: false,
  speed: 200,
  download: false,
  counter: false,
  plugins: [ lgThumbnail, lgAutoplay],
})
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery.min.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-thumbnail.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-autoplay.min.css">


        <div class="gallery1" id="gallery1">
          <a href="https://picsum.photos/200/300">
            <img src="https://picsum.photos/200/300" alt="">
          </a>

          <a href="https://picsum.photos/201/300">
            <img src="https://picsum.photos/201/300" alt="">
          </a>
          <a href="https://picsum.photos/202/300">
            <img src="https://picsum.photos/202/300" alt="">
          </a>
          <a href="https://picsum.photos/203/300">
            <img src="https://picsum.photos/203/300" alt="">
          </a>
        </div>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/share/lg-share.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/thumbnail/lg-thumbnail.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/autoplay/lg-autoplay.min.js"></script>

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

Troubleshooting: Android compatibility issues with dynamic source for HTML 5 video

My HTML5 video with dynamic source loaded using JavaScript is functioning properly in a web browser but encountering issues within an Android PhoneGap build application. Take a look at the code snippet below: JavaScript code: $('#video_player' ...

javascriptandroidhtmlphonegap-build

Connect an external pure JavaScript file to my React component

Looking to create a dynamic react component with a festive birthday animation using an external javascript file. I've tried linking the external script like so: componentDidMount() { const script = document.createElement("script"); ...

javascriptreactjs

Combining two arrays of objects with unique properties into one

Two arrays of objects are given: array1 = [{"id":1,"cost":200,"qty":56},{"id":2,"cost":100,"qty":16}]; array2 = [{"id":1,"cost":200,"desc":"a good one"},{"id":2,"cost":100,"desc":"a bad one"},{"id":3,"cost":50,"desc":"an okay one"}]; The goal ...

javascriptarraysobject

Implementing AJAX in Node.js and rendering information on the webpage with the help of Handlebars

In order to enhance the user experience, I am utilizing AJAX and Handlebars to fetch data from my MongoDB without refreshing the page and showcase it in a more organized manner. My approach involves creating a division with a search button where users can ...

javascriptnode.jsajaxexpresshandlebars.js

Problem with React Native Camera: Camera display is not functioning correctly - React-Native-Vision-Camera Error

Hey there! I could really use some help with a tricky situation I'm facing in my React Native app, specifically regarding camera integration. Here's the scoop: The Issue: I'm working on a video recording application using React Native that ...

javascriptreactjsreact-nativevideo-recordingreact-native-vision-camera

Retrieving a file URL from Sanity within a blocks array

I've been working on a website with Next JS and using Sanity as the CMS. While Sanity has schemas for images, I ran into an issue when trying to handle videos. The documentation recommends using GROQ queries to convert file URLs at the request level, ...

javascriptnext.jssanitygroq

What is the best way to transfer a C# object to the browser and convert it into a JavaScript JSON object?

I have a Product class. I currently have an instance of it that I need access to in both my Razor page and in my browser JavaScript. My solution was to render the Product into the page and then parse it using JSON.parse. Within Product.cshtml: @{ var ...

javascriptc#jsonrazor

Issue with Angular 6 subscribe event not being caught by subject?

A new element was crafted to house a loader: @Component({ selector: 'app-loader', templateUrl: './loader.component.html', styleUrls: ['./loader.component.scss'], providers: [LoaderService] }) export class LoaderCompon ...

javascriptangular

"Controller's $watch function fails to trigger when new items are added to an array within a directive

Within my code, I have established a two-way binding variable called publish.selected_tags that connects a directive with a controller. To monitor changes in this variable, I implemented a $watch function within my controller: $scope.$watch('publish ...

javascriptangularjsangularjs-directiveangularjs-watch

Can you explain why this overtime total is not being calculated accurately?

Here's a scenario: A parking garage charges $5.00 to park for up to three hours. After that, they add $1.50 per hour for every additional hour or part thereof. The maximum charge within 24 hours is $18.00. We're assuming no car stays longer than ...

javascriptphphtmlcss

Switch the color of material icons when hovered over

Currently experimenting with this demo and I'm looking to adjust the color of icons when hovered over .demo-navigation .mdl-navigation__link .material-icons:hover { background-color: #00BCD4; color: #FFF; } Unfortunately, my attempt was unsucces ...

cssmaterial-design

Tips on concealing and deactivating the fullscreen option in flowplayer

Could someone please assist me in resolving this issue? I've been attempting to hide the fullscreen button from the flowplayer, but so far, I haven't found a solution. Below is my JavaScript code: <script> $f("player", "flowplayer/flowpla ...

javascripthtmlflowplayer

Conceal or reveal radio buttons according to information in a table

How can I dynamically add and remove values from a table based on radio button selections? My goal is to add the selected value to the table and hide it from the radio button list, and if the value is deleted from the table, I want to show it back in the r ...

javascriptjquerycssasp.netasp.net-mvc

Discover the best way to enable lint support for MUI `sx` prop values

Despite attempting the method below, I am still unable to receive lint support to identify incorrect style properties and values. import { SxProps, Theme } from "@mui/material"; export const navBarStyles: Record<string, SxProps<Theme> | ...

cssreactjsmaterial-uilint

Notification Click Event for PWA Service Worker

I am attempting to display a notification and trigger an action when it is clicked. try { navigator.serviceWorker.getRegistration() .then(reg => { reg.showNotification("Check out the video clip!", { body: "Cl ...

javascriptnotificationsprogressive-web-apps

Ways to showcase only five items of data using the map method

I'm working on a project that involves displaying data from an external Json file on my site. However, I'm facing an issue where I need to limit the display to only 5 items. const displayCharacters = (characters) => { ...

javascriptarraysjsonsortingobject

Javascript: Sending a POST request to a different domain without requiring a response

My goal is to send a straightforward POST request across domains without using jQuery or other libraries. While there are solutions like How Do I send a Cross Domain POST Request Via JavaScript for handling the response and parsing it, I prefer a simpler ...

javascriptajaxcross-domain

Extract information from radio button and replicate it using JQuery

I've been exploring various methods to retrieve the value of a radio button, but I'm struggling to find a way to then apply that value to a different set of radio buttons. While copying text values works without issues, duplicating radio button s ...

javascriptjqueryhtmlforms

How can I maintain my bottom navigation bar in Bootstrap 3 without using a 3 span icon?

Hey everyone, I'm still getting the hang of MVC as I only started using it around 3 weeks ago. Currently, I am working on a Web Application where I am trying to implement a specific feature: At the bottom of the page, I have a navbar with some Html. ...

jqueryhtmlcssasp.net-mvctwitter-bootstrap

Mosaic Magic with Bootstrap 4

Struggling with creating a mosaic-style layout here. I've tried using Bootstrap 4's grid system, flex, and other methods, but no luck getting it to work seamlessly across all devices. Attached an image of the layout - the middle two boxes are fo ...

htmlcsslayoutbootstrap-4flexbox