Getting a jquery lightbox up and running

After experimenting with three different jquery plugins in an attempt to create a lightbox that appears when clicking on a link containing an image, I am currently testing out this one: . Despite adding the plugin source in the head and ensuring that the links with images have rel='lightbox', clicking on an image still opens it in the browser instead of displaying it in the lightbox as intended.

This is the content of my head section:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="description" content="sumthing">
<meta name="keywords" content="stuff">
<link rel="stylesheet" type="text/css" href="/site_media/css/peda.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/site_media/favicon.ico" type="image/x-icon"> 
<script type="text/javascript" src="/site_media/js/jquery.js"></script>
<script type="text/javascript" src="/site_media/jquery-lightbox/scripts/jquery.lightbox.min.js"></script>
<script src="/site_media/js/imgscale.js"></script>
<script type="text/javascript">

This is how I have set up the image links:

<a rel="lightbox" href="someexternalimage.jpg"><img class="contentimg" style="display:block; max-width:100%;max-height:500px; padding-top:5px; margin-bottom:3px" src="someexternalimage.jpg"></a>

I would appreciate any assistance in resolving this issue. Thank you.

javascriptjquerycssdjangolightbox

Answer №1

Ensure that you have added the necessary scripts to your page and are using the recommended version of jquery for the lightbox plugin. It seems like there may be an issue with your installation, as I was able to get it working in a fiddle:

http://jsfiddle.net/jensbits/u6v98/

Follow the installation instructions here

Answer №2

Be cautious when placing it within an <a> element, ensure that you stop the default event function from executing.

$('a[rel=lightbox]').click(function(event){
    event.preventDefault();
});

By halting the normal event execution, you are instructing the browser not to navigate to someexternalimage.jpg as it typically would within a hyperlink.

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

Tips for repairing a side bar and header with CSS when using a JS & jQuery scroller

I am working on a layout design and my goal is to have the left sidebar, right sidebar, and header remain fixed in place. Here is the CSS code I am using : #container { padding-left: 200px; /* Left Sidebar fullwidth */ padding-ri ...

javascripthtmlcsslayoutscroller

Using two fields to create a dependent dropdown list in Django with Ajax

I am currently developing an application to input locations for a specific purpose. Here are my models: class City(models.Model): city = models.CharField(max_length=40) class Area(models.Model): city = models.ForeignKey(City, on_delete=models.PROT ...

djangoajax

Create a Vue application that is built on modules which could potentially be absent

I am currently developing a Vue+Vite app with module-based architecture. I have several Vue components and some parts of the app are functioning correctly. However, I want to ensure that the missing components are not imported or used in the application. H ...

javascriptvue.jsbuildmodulevite

Tips for serializing a form using ajax for database storage in Laravel

Need help with saving multiple input fields to a database using AJAX. Here's the issue, I'm having trouble sending a serialized form to my database. When I serialize the form, attach it to a hidden input field using JQuery, and send it along wit ...

phpjqueryajaxlaravel

What is the best way to make hover text that also copies when you highlight the main text?

Currently, I am utilizing a basic bootstrap tooltip for creating tables with jQuery. However, I require a specific functionality that the standard bootstrap tooltip does not provide. I need the ability to copy the base text and have it appear as "base tex ...

jqueryhtmlcssbootstrap-4

Behind the scenes, unable to launch due to Schema Error

My experience with Backstage was going smoothly until I ran into an issue after executing a yarn install this afternoon. Now, whenever I attempt to run yarn dev, it fails with the following error: [0] Loaded config from app-config.yaml [0] <i> [webpa ...

javascriptnode.jsbackstage

Using jQuery and Ajax to load external divs

Here I've got the page all set up... it's hidden until a click event triggers the display of dynamic content from an external source. The issue I'm facing is that it's pulling in too much content from the external page... I really only ...

jqueryajax

What is the process for refreshing Django model-forms?

My current models have a structure similar to this: def feature_tuples(): features = (('a', 'a'), ('b', 'b')) return features class Sample(models.Model): choices_tuple = models.CharField(max_length=20, blank ...

djangodjango-modelsdjango-forms

Utilizing AngularJS to show content based on regular expressions using ng-show

With two images available, I need to display one image at a time based on an input regex pattern. Here is the code snippet: <input type="password" ng-model="password" placeholder="Enter Password"/> <img src="../close.png" ng-show="password != [ ...

javascriptangularjshtml

Establishing a connection to an active process within Winappdriver with the utilization of JavaScript

As someone who is fairly new to working with JS and WinAppDriver, I am currently facing a challenge with testing a Windows-based "Click Once" application built on .Net. To launch this application, I have to navigate to a website through Internet Explorer a ...

javascriptwindowsselenium-webdriverappiumwinappdriver

Take command of the asynchronous loop

I have two Node.js applications that serve different purposes. The first is an Express.js Server (PROGRAM1), responsible for providing the user interface and RESTful APIs. The second is a web crawler (PROGRAM2), tasked with continuously reading items, do ...

javascriptnode.jsmongodbexpress

Can you explain the significance of the error message stating "XMLHttpRequest.timeout cannot be set for synchronous http(s) requests made from the window context"?

I'm experiencing some timeouts with a synchronous XML HTTP request in Safari on my Mac. In an attempt to fix this issue, I added a timeout setting like this: req.open(this.method, fullURL, this.isAsync); req.setRequestHeader('Content-Typ ...

javascriptajaxsafarixmlhttprequestsafari6

What is the proper way to insert a line break within a string in HTML code?

Trying to simplify my code, I've turned to using Nunjucks to pass a group of strings to a function that will then display them. This is what it looks like: {% macro DisplayStrings(strings) %} {% for item in strings %} <div>{{ item.strin ...

javascripthtmlnunjucks

Launch a new window for a div when a button is clicked

Hey everyone, I need some help with opening a div in a new window. Currently, I am using window.open and it is working fine. Here is the code snippet: <div id="pass">pass this to the new window</div> <a href="#" onclick="openWin()">clic ...

javascriptjqueryangularjs

CSS animations for loading page content

Currently, I am incorporating animations into my project using HTML5 and CSS3, and the progress has been smooth. I have been able to achieve effects such as: #someDivId { position: absolute; background:rgba(255,0,0,0.75); transition: all 0.7s ...

javascriptcss

Tips for saving input data from an HTML page to a text file

How can I save the inputs from a simple form as a text file using HTML code? Here is an example of the HTML code: <div id="wrapper"> <div class="main-content"> <div class="header"> </div> ...

htmlcss

Transform a checkbox input into two distinct buttons

I am trying to change the input checkbox that toggles between light and dark mode into two separate buttons. How can I achieve this functionality? Check out the demo here: https://jsfiddle.net/ot1ecnxz/1 Here is the HTML code: <input type="checkb ...

javascripttwitter-bootstrapbootstrap-5

Button for Toggling Audio Play and Pause

Is it possible to create an SVG image that changes color slightly when hovered over, and when clicked toggles to another SVG image that can be switched back to the original by clicking again with the same hover effect? Additionally, when clicked, it should ...

javascriptjqueryhtmlcss

Show an Array of Nested JSON API information on an HTML page using jQuery/JavaScript

Recently, I've delved into the world of jQuery, JavaScript, and AJAX while experimenting with an API that I designed. The backend result I received looks like this: [ { "id": 1, "choice_text": "They work on List View generally", ...

javascriptjqueryjsonajaxapi

Utilize Custom Field to incorporate background videos from websites like Youtube or Vimeo into your content

I've been working on implementing a video background for my website. I came up with a custom code to embed URL links from Youtube and Vimeo using "oEmbed". The process is functioning well, but I'm facing some challenges in setting the background ...

phpcsswordpressadvanced-custom-fields