simpleLightbox is not a function - jquery The Next CEO of Stack OverflowIs there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?var functionName = function() vs function functionName() Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?Disable/enable an input with jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
What's the point of interval inversion?
What can we do to stop prior company from asking us questions?
Is HostGator storing my password in plaintext?
Why here is plural "We went to the movies last night."
Increase performance creating Mandelbrot set in python
What do "high sea" and "carry" mean in this sentence?
How do I construct this japanese bowl?
Robert Sheckley short story about vacation spots being overwhelmed
Would this house-rule that treats advantage as a +1 to the roll instead (and disadvantage as -1) and allows them to stack be balanced?
How can I open an app using Terminal?
If the heap is initialized for security, then why is the stack uninitialized?
How to make a variable always equal to the result of some calculations?
How do spells that require an ability check vs. the caster's spell save DC work?
Shade part of a Venn diagram
Need some help with wall behind rangetop
Why do professional authors make "consistency" mistakes? And how to avoid them?
Inappropriate reference requests from Journal reviewers
WOW air has ceased operation, can I get my tickets refunded?
I believe this to be a fraud - hired, then asked to cash check and send cash as Bitcoin
Was a professor correct to chastise me for writing "Prof. X" rather than "Professor X"?
Does the Brexit deal have to be agreed by both Houses?
Customer Requests (Sometimes) Drive Me Bonkers!
Whats the best way to handle refactoring a big file?
Visit to the USA with ESTA approved before trip to Iran
simpleLightbox is not a function - jquery
The Next CEO of Stack OverflowIs there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?var functionName = function() vs function functionName() Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?Disable/enable an input with jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
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?
javascript jquery
asked Mar 7 at 14:29
Nemanja GNemanja G
2471925
add a comment |
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?
javascript jquery
asked Mar 7 at 14:29
Nemanja GNemanja G
2471925
2
Where are you importing the simpleLightbox script?
– Jacob Heater
Mar 7 at 14:42
@JacobHeater ah... that was the issue.. but still not managing to make it work for some reason....
– Nemanja G
Mar 7 at 15:18
I've come up with a sample in Node using express. I assume that's what you're using. I'll post the example below.
– Jacob Heater
Mar 7 at 15:19
add a comment |
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?
javascript jquery
asked Mar 7 at 14:29
Nemanja GNemanja G
2471925
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?
javascript jquery
javascript jquery
asked Mar 7 at 14:29
Nemanja GNemanja G
2471925
asked Mar 7 at 14:29
Nemanja GNemanja G
2471925
asked Mar 7 at 14:29
Nemanja GNemanja G
2471925
asked Mar 7 at 14:29
Nemanja GNemanja G
2471925
asked Mar 7 at 14:29
Nemanja GNemanja G
2471925
2471925
2
Where are you importing the simpleLightbox script?
– Jacob Heater
Mar 7 at 14:42
@JacobHeater ah... that was the issue.. but still not managing to make it work for some reason....
– Nemanja G
Mar 7 at 15:18
I've come up with a sample in Node using express. I assume that's what you're using. I'll post the example below.
– Jacob Heater
Mar 7 at 15:19
add a comment |
2
Where are you importing the simpleLightbox script?
– Jacob Heater
Mar 7 at 14:42
@JacobHeater ah... that was the issue.. but still not managing to make it work for some reason....
– Nemanja G
Mar 7 at 15:18
I've come up with a sample in Node using express. I assume that's what you're using. I'll post the example below.
– Jacob Heater
Mar 7 at 15:19
2
2
Where are you importing the simpleLightbox script?
– Jacob Heater
Mar 7 at 14:42
Where are you importing the simpleLightbox script?
– Jacob Heater
Mar 7 at 14:42
@JacobHeater ah... that was the issue.. but still not managing to make it work for some reason....
– Nemanja G
Mar 7 at 15:18
@JacobHeater ah... that was the issue.. but still not managing to make it work for some reason....
– Nemanja G
Mar 7 at 15:18
I've come up with a sample in Node using express. I assume that's what you're using. I'll post the example below.
– Jacob Heater
Mar 7 at 15:19
I've come up with a sample in Node using express. I assume that's what you're using. I'll post the example below.
– Jacob Heater
Mar 7 at 15:19
add a comment |
1 Answer
1
active
oldest
votes
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
answered Mar 7 at 15:24
Jacob HeaterJacob Heater
960412
In a seperate project, where I just load everything and create html structure = it works fine. But in my project, clicking on an image just opens image as a link, doesnt create the popup like it should.
– Nemanja G
Mar 7 at 16:01
@NemanjaG I'd need to see more about your project, including html, script usage, etc to be able to help you.
– Jacob Heater
Mar 7 at 16:46
I think its an issue with how the project is loading scripts, I just got into it to implement this but probably many other things are messed up. Thanks tho
– Nemanja G
Mar 8 at 9:04
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55046191%2fsimplelightbox-is-not-a-function-jquery%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Mar 7 at 15:24
Jacob HeaterJacob Heater
960412
In a seperate project, where I just load everything and create html structure = it works fine. But in my project, clicking on an image just opens image as a link, doesnt create the popup like it should.
– Nemanja G
Mar 7 at 16:01
@NemanjaG I'd need to see more about your project, including html, script usage, etc to be able to help you.
– Jacob Heater
Mar 7 at 16:46
I think its an issue with how the project is loading scripts, I just got into it to implement this but probably many other things are messed up. Thanks tho
– Nemanja G
Mar 8 at 9:04
add a comment |
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
answered Mar 7 at 15:24
Jacob HeaterJacob Heater
960412
In a seperate project, where I just load everything and create html structure = it works fine. But in my project, clicking on an image just opens image as a link, doesnt create the popup like it should.
– Nemanja G
Mar 7 at 16:01
@NemanjaG I'd need to see more about your project, including html, script usage, etc to be able to help you.
– Jacob Heater
Mar 7 at 16:46
I think its an issue with how the project is loading scripts, I just got into it to implement this but probably many other things are messed up. Thanks tho
– Nemanja G
Mar 8 at 9:04
add a comment |
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
answered Mar 7 at 15:24
Jacob HeaterJacob Heater
960412
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
answered Mar 7 at 15:24
Jacob HeaterJacob Heater
960412
edited Mar 7 at 15:31
answered Mar 7 at 15:24
Jacob HeaterJacob Heater
960412
answered Mar 7 at 15:24
Jacob HeaterJacob Heater
960412
answered Mar 7 at 15:24
Jacob HeaterJacob Heater
960412
960412
In a seperate project, where I just load everything and create html structure = it works fine. But in my project, clicking on an image just opens image as a link, doesnt create the popup like it should.
– Nemanja G
Mar 7 at 16:01
@NemanjaG I'd need to see more about your project, including html, script usage, etc to be able to help you.
– Jacob Heater
Mar 7 at 16:46
I think its an issue with how the project is loading scripts, I just got into it to implement this but probably many other things are messed up. Thanks tho
– Nemanja G
Mar 8 at 9:04
add a comment |
In a seperate project, where I just load everything and create html structure = it works fine. But in my project, clicking on an image just opens image as a link, doesnt create the popup like it should.
– Nemanja G
Mar 7 at 16:01
@NemanjaG I'd need to see more about your project, including html, script usage, etc to be able to help you.
– Jacob Heater
Mar 7 at 16:46
I think its an issue with how the project is loading scripts, I just got into it to implement this but probably many other things are messed up. Thanks tho
– Nemanja G
Mar 8 at 9:04
In a seperate project, where I just load everything and create html structure = it works fine. But in my project, clicking on an image just opens image as a link, doesnt create the popup like it should.
– Nemanja G
Mar 7 at 16:01
In a seperate project, where I just load everything and create html structure = it works fine. But in my project, clicking on an image just opens image as a link, doesnt create the popup like it should.
– Nemanja G
Mar 7 at 16:01
@NemanjaG I'd need to see more about your project, including html, script usage, etc to be able to help you.
– Jacob Heater
Mar 7 at 16:46
@NemanjaG I'd need to see more about your project, including html, script usage, etc to be able to help you.
– Jacob Heater
Mar 7 at 16:46
I think its an issue with how the project is loading scripts, I just got into it to implement this but probably many other things are messed up. Thanks tho
– Nemanja G
Mar 8 at 9:04
I think its an issue with how the project is loading scripts, I just got into it to implement this but probably many other things are messed up. Thanks tho
– Nemanja G
Mar 8 at 9:04
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55046191%2fsimplelightbox-is-not-a-function-jquery%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Where are you importing the simpleLightbox script?
– Jacob Heater
Mar 7 at 14:42
@JacobHeater ah... that was the issue.. but still not managing to make it work for some reason....
– Nemanja G
Mar 7 at 15:18
I've come up with a sample in Node using express. I assume that's what you're using. I'll post the example below.
– Jacob Heater
Mar 7 at 15:19