Search code examples
javascriptjquery

simpleLightbox is not a function - jquery

I am trying to use simpleLightbox in my project, i installed it via:

npm install simplelightbox

and my html structure is like this:

<div class="gallery-wrapper">
        <img class="image" src="../../../../assets/images/sample/book.png" alt="">
        <img class="image" src="../../../../assets/images/sample/book.png" alt="">
        <img class="image" src="../../../../assets/images/sample/book.png" alt="">
        <img class="image" src="../../../../assets/images/sample/book.png" alt="">
</div>

When I try to initialise lightbox in my main.js file, i get an error that its not a function. I try to do it like the documentation says: 

var lightbox = $('.gallery a').simpleLightbox(options);

Anyone has an advice?

Solution

  • This example works fine for me. My setup uses a very basic structure with one image book.jpg, but it works, and the gallery operates as intended. Let me know if you have any questions.

    Dependencies

    npm install --save simplelightbox

    HTML

    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script src="./scripts/jquery.js"></script>
  <script src="./scripts/simple-lightbox.js"></script>
  <link href="./scripts/simplelightbox.css" rel="stylesheet" />
</head>

<body>
  <div class="gallery">
    <a href="./assets/book.jpg">Book 1</a>
    <a href="./assets/book.jpg">Book 2</a>
    <a href="./assets/book.jpg">Book 3</a>
    <a href="./assets/book.jpg">Book 4</a>
  </div>

  <script>
    $(function() {
      $('.gallery a').simpleLightbox();
    });
  </script>
</body>

</html>

    Node/Express

    const express = require('express');

const app = express();
const port = 5544;

app.use('/scripts', express.static(__dirname + '/node_modules/jquery/dist'));
app.use('/scripts', express.static(__dirname + '/node_modules/simplelightbox/dist'));
app.use('/assets', express.static(__dirname + '/assets'));

app.get('/', (req, res) => res.sendFile(__dirname + '/index.html'));
app.listen(port, () => console.log(`Listening on port ${port}`));

    Assets Folder

    assets/
  - book.jpg