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

Associate information with HTML elements

I've come across this question multiple times, but the solutions are mostly focused on HTML5. My DOCTYPE declaration is: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> I'm looking t ...

javascriptjqueryhtml

Utilizing an Async API call from a separate page and passing it as a component input

I recently set up an asynchronous API fetch in one of my .JS files and then invoked it from another JS file to output the result using console.log. (Is there a more efficient method for achieving this?) Now, my aim is to utilize the fields of the response ...

javascriptreactjsfetch

Is it possible to include spaces in a JavaScript alert message?

Is it possible to add spaces in an alert message? I have been trying to include spaces in my alert messages, but the alerts do not appear when there are spaces. Example where it works: https://jsfiddle.net/yczrhztg/ Example where it doesn't work: ht ...

javascripthtml

Encountering a TypeError with DataTables and Tabledit

I've been attempting to integrate DataTables with Tabledit, but I keep encountering the error message "TypeError: Cannot set properties of undefined (setting 'nTf')". The number of tags also matches up. Interestingly, if I comment out the " ...

javascripthtmljquerydatatablestabledit

Is there a way to transform a time string, for instance "8:02 AM", into a sortable field?

I am currently working with a MongoDB database that stores times as strings, and I want to filter queries based on specific time ranges. For instance, the time fields in my database are formatted as "8:02 AM" and "10:20 PM", and I am looking to refine my ...

javascriptnode.jsmongodb

Setting the default selection in AngularJS based on the URL entered

I've encountered an issue with a dropdown menu in my AngularJS version 1.4 application. The dropdown menu contains links to different sections of the page. The problem arises when I directly enter the page URL - instead of selecting the correct link f ...

javascriptangularjs

The ontrack listener for WebRTC peerConnection fails to fire

Primarily, the challenge I'm facing is unique from what I have come across in my research on "google". My setup involves using Spring Boot as a signaling server to establish connections between two different tabs of the browser or utilizing two peerCo ...

javascriptwebrtcrtcpeerconnection

What could be the reason for the unexpected behavior of position sticky?

I am encountering an issue while trying to figure out why the container__item--special element behaves as a sticky element in this code snippet <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> ...

htmlcsscss-position

Guide on how to have two controllers execute identical tasks in Angular while modifying the appearance of the website

Trying to recreate Google's homepage functionality using Angular has been challenging for me. Despite watching Egghead videos and studying the API extensively, I couldn't find a specific example for this behavior. Here's what I aim to achiev ...

javascripthtmlangularjssingle-page-application

Retrieve various forms of information using Ajax

Currently, I am working on developing a social networking website similar to Facebook using PHP. On one of the pages titled showdetails.php, I have implemented a search bar that should display a dropdown list of user names from the database as the user typ ...

phpjqueryajax

Using Javascript to retrieve form data from a separate file

I am struggling with my HTML and JavaScript files to collect data. Despite my efforts, the function is not executing properly. Below is the code I have been working on: HTML File : <form class="form-newsletter"> <div class="form-group"> ...

javascripthtmlcss

Generate an image instantly from text using ajax when a key is pressed

Currently, I am immersed in a stencil project where my goal is to convert text into an image. In this particular task, there's a textbox that captures the user input on key up event. Once the user enters text, my aim is to display that text as an imag ...

javascriptphpajaximage

Determine if an element from the first array is present in the second array

I've encountered a challenge while building a simple react app and I could use some help. The Problem at Hand :- My goal is to compare items in firstArray (which contains separate dictionaries) with those in secondArray. While the loop for checking ...

javascriptreactjsarraysdictionary

What is the appropriate conversion for a CSS property name starting with -webkit when working with React?

For example, using `-webkit-text-fill-color` resulted in an error when setting it to `'red'`, stating "Using kebab-case for CSS properties in objects is not supported. Did you mean WebkitTextFillColor?" I have attempted `WebkitTextFillColor`, `w ...

cssreactjswebkitkebab-case

Challenges with displaying css/bootstrap classes within angular2

Experiencing difficulties with CSS/Bootstrap integration when displayed in an angular2 component. When attempting to display the CSS and HTML content in the Index.html file (with proper CSS and JS references), everything functions correctly. However, once ...

cssangulartwitter-bootstrap-3angular-ui-bootstrapng-bootstrap

What is the best way to send an event handler to a sibling component?

I am facing a situation where I have an eventHandler that needs to be handled by its sibling component. The <Brains /> component contains several properties (such as this.randomNumber = 555 inside the constructor) that are required for the proper fun ...

javascriptreactjs

Locate a JQuery element within another JQuery element

Apologies for my poor grasp of English. I am working with HTML and JavaScript. <noindex> <h1>This is h1 in noindex</h1> <div> <h1>This is h1 in noindex and in div</h1> <div> <h1>This is h1 in noindex a ...

javascriptjqueryhtml

How can I execute a synchronous MongoDB query in Node.js properly?

When utilizing the Node.JS driver for MongoDB, I am interested in executing a synchronous query. Here is an example of what I am aiming to achieve: function retrieveSomething() { var database = new mongo.Db("mydatabase", server, {}); database.ope ...

javascriptnode.jsmongodbsynchronous

Apply a specific style to the initial element generated by *ngFor

My current method for displaying a certain number of * characters is utilizing the code snippet below: <div *ngFor="let line of lines; let i=index">*</div> I am interested in applying a margin only to the first element. The margin value sh ...

htmlcssangularngfor

Having trouble with getting the second JavaScript function to function properly?

I am facing an issue with the second JavaScript function. When I click the 'Send Mail' button, it should call the second function and pass it two values. However, the href line (second last line in the first function) is not rendering correctly. ...

javascriptjqueryhtmlfunctionurl