SimpleLightBox refuses to function

Having trouble getting SimpleLightBox to work properly? It seems like when you click on an image, it opens as a regular image on a blank page. I've added the JS and CSS files correctly (I double-checked in the source code) and included the HTML and JS in the code.

  <div class="imageGallery1">
    <a href="images/5x5.jpg" title="Caption for gallery item 1" ><img style="width: 300px; height: 300px" src="images/5x5.jpg" alt="Gallery image 1"/></a>
    <a href="images/BG-BR5.jpg" title="Caption for gallery item 2"><img style="width: 300px; height: 300px" src="images/BG-BR5.jpg" alt="Gallery image 2" /></a>
    <a href="images/BG-BR6.jpg" title="Caption for gallery item 3"><img style="width: 300px; height: 300px"src="images/BG-BR6.jpg" alt="Gallery image 3" /></a>    
</div>
<script>$('.imageGallery1 a').simpleLightbox();</script>

The images are inserted correctly, and I've also included jQuery because I'm using Bootstrap 4. If you want to check out the template I'm working on, you can find it at this link: (scroll down).

javascriptjqueryhtmlcssbootstrap-4

Answer №1

Upon reviewing your template page, I came across an error in the console

"ReferenceError: jQuery is not defined".

After investigating your code, it seems that you are calling the SimpleLightBox plugin in the <head>, while the jQuery library is being called at the end of the page (right before the </body> tag).

The issue is that the SimpleLightBox plugin is trying to run before the jQuery library is properly initialized.

To resolve this issue, please follow these steps:

1) To ensure the library is initialized after jQuery is loaded, add the following line before the </body> tag.

<script src="js/simpleLightbox.js" ></script>

2) To ensure the method is executed after the simpleLightBox Plugin is loaded, move the following code (and add the ready function) after the line above:

$(document).ready(function() {
    $('.imageGallery1 a').simpleLightbox();
});

I have included the $(document).ready(); around the code to guarantee that the code runs only when the entire page and its scripts are fully loaded.

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

When using Next.js revalidate, an error may occur stating: "There are keys that require relocation: revalidate

I have been attempting to utilize the revalidate function in my code by following the example provided by Vercel. However, I keep encountering an error. Here is the snippet of code that I am currently using: export async function getServerSideProps() { c ...

javascriptmongodbnext.js

Convert file_get_contents from PHP to JavaScript

I previously developed a webpage using php along with a webAPI, but now I am looking to transition it to javascript. The issue at hand: The current site takes about 5-7 seconds to load due to loading a large amount of data, which is not ideal. I want to ...

javascriptphpfile-get-contentsbattlenet-api

Can spreading be used for destructuring?

These were the initial props I attempted to pass to a component: const allprops = { mainprops:{mainprops}, // object pageid:{pageId}, // variable setpageid:{setPageId}, // state function makerefresh:{makeRefresh} // state function } <Na ...

javascriptreactjsnext.js

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

I have set my navigation to dock at a specific document height on the top of the viewport, and when it docks, it should display a dropdown animation. $(document).scroll(function(){ var x = $(window).scrollTop(); if(x>=700){ $("header ...

javascriptjqueryhtmlcss

Nock is capturing my request, however, my AJAX call is encountering an error

I am currently conducting a test on an AJAX request using the XMLHttpRequest method: export default function performTestRequest() { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/service'); xhr.onload = ( ...

javascriptajaxxmlhttprequestnock

Unraveling the Distinctions: Identifying an Admin vs. a User within the API

When working with the express framework, I encounter a situation where I need to restrict access to certain API endpoints. For example, I have this line in the API: router.delete('/user',(req, res) => { //deleting...} Now, I want only an Adm ...

javascriptnode.jsexpress

A step-by-step guide on executing a callback function once the animation has finished with frame-motion

I'm facing an issue with my component called AnimatedText. After the animation is complete, I want the words filled in the underlineLines prop to be underlined. How can I achieve this? I attempted using the onAnimationEnd function, but it didn't ...

javascriptreactjsnext.jsframer-motion

Using CSS nth-child to create a two-column checkers layout

I have formulated a form on my website that divides into two columns by using floats. I am interested in creating a "checkered" effect for these columns. Can anyone guide me on how to utilize nth-child to achieve this design layout? For reference, please c ...

css

Can I use the mouseover event on an image to display a sibling div?

Hi everyone! I'm fairly new to web development and I could really use some advice. I'm trying to implement a mouseenter event on an img tag to show a sibling div, but I'm encountering some strange behavior. The mouseenter event seems to be w ...

javascripthtmlcss

display saved data from ajax request

I've been working on saving data and files using ajax. Following a tutorial (link), I managed to successfully save the data in the database and the image files in the designated folder. However, I'm facing an issue where the success or error mess ...

javascriptphpjqueryajax

Puppeteer's flawed performance leads to the generation of low-quality

Currently, I am utilizing puppeteer to generate a PDF from my static local HTML file. However, the resulting PDF is turning out to be corrupted. When attempting to open the file using Adobe Reader, an error message pops up stating 'Bad file handle&apo ...

javascripthtmlnode.jspdfpuppeteer

Clicking on the delete option will remove the corresponding row of Firebase data

I am encountering an issue that appears to be easy but causing trouble. My goal is to delete a specific row in an HTML table containing data from Firebase. I have managed to delete the entire parent node of users in Firebase when clicking on "Delete" withi ...

javascripthtmlfirebasefirebase-realtime-database

Adjusting the amount of rows and columns in a fluid manner with CSS grid (updated)

After conducting my research, it seems that the most effective way to set the final value of a CSS grid is either by directly specifying it or by creating/manipulating the css :root value. A similar query was previously raised here, although the answers p ...

javascriptcsscss-grid

Comparing v-show(true/false) and replaceWith: Exploring the best practice between Vue and jQuery

Currently, I am in the process of learning vue.js and have a question regarding the best approach to implement the following scenario: https://i.sstatic.net/2YBEF.png https://i.sstatic.net/YCEHG.png The main query is whether it is acceptable in HTML to w ...

javascriptjqueryhtmlvue.js

Extract data from the Ajax database and automatically hide the "Load More" button when all items

Every time I fetch data from my MySQL database, I retrieve 5 items at once. $query = $pdo->prepare("SELECT * FROM names WHERE id < ? ORDER BY id DESC LIMIT 5"); $query->execute([$_POST["id"]]); while($row = $query -> fetch() ...

javascriptphpjquerymysqlajax

Admin-on-rest sidebar navigation menu

Hello everyone! I am new to ReactJS and admin-on-rest. I am currently studying from this documentation and I am interested in creating a navigation submenu similar to the one shown here. I have tried searching on Google but haven't found what I need. ...

javascriptreactjsmaterial-designmaterial-ui

Using JavaScript to dynamically alter the background image of an HTML document from a selection of filenames

Just starting out with JavaScript and working on a simple project. My goal is to have the background image of an HTML document change to a random picture from a directory named 'Background' every time the page is opened. function main() { // ...

javascripthtmlcssfilebackground

The concept of undefined functions and the use of dependency injection may not always align

Recently starting with AngularJs, I am honing my skills by developing a single page Todo Application. However, I have encountered an issue while trying to load a localStorage factory that I intend to use for this project. Currently, I am stuck on the error ...

javascriptangularjsundefined-function

Getting rid of all CSS properties currently set for the Mobile view

Utilizing third-party library components in my project. The library includes components that come with predefined styles for mobile devices. I am seeking to completely UPDATE these properties within my own code. When I say "update," I mean removing all th ...

css

Automatically Submitting Forms with Formtastic and Jquery/Javascript

I am seeking a way to automatically submit my form when the 'studentnumber' input field reaches 8 characters. I am not well-versed in jquery and unsure of where to begin. I attempted to accomplish this on my own, but it seems like jQuery/JavaScri ...

jqueryruby-on-railsruby-on-rails-3ruby-on-rails-4formtastic