The lightbox feature seems to be malfunctioning, despite having successfully loaded jQuery

Struggling to activate lightbox on my gallery. Jquery is functioning as verified with an alert() in the documet.ready(). However, lightbox does not seem to be working properly. Only the links are operational. Below is a snippet of my code:

<!DOCTYPE html>    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">      
<head>     

<title></title>    
<meta charset="UTF-8" />       
<meta name="ROBOTS" content="ALL" />       
<meta name="MSSmartTagsPreventParsing" content="true" />       

<meta name="keywords" content="" />    
<meta name="description" content="" />     

<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>      

<link href="/fuelcms/assets/css/klang.css?c=943916400" media="all" rel="stylesheet"/>      

<base href="http://localhost/fuelcms/index.php" />     

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />      
<meta name="robots" content="index, follow" />     

<script type="text/javascript" src="assets/js/jquery.js"></script>     
<script type="text/javascript" src="assets/js/lightbox/prototype.js"></script>     
<script type="text/javascript" src="assets/js/lightbox/scriptaculous.js?load=effects,builder"></script>    
<script type="text/javascript" src="assets/js/lightbox/lightbox.js"></script>      
<link rel="stylesheet" href="assets/css/lightbox.css" type="text/css" media="screen" />    

</head>    


<body class="gallery index">       
<!--<div class="header"><ul>       
<li class="first"><a href="http://localhost/fuelcms/index.php/repertoire" title="Repertoire">Repertoire</a></li>       
<li><a href="http://localhost/fuelcms/index.php/about" title="Über uns">Über uns</a></li>    
<li><a href="http://localhost/fuelcms/index.php/kontakt" title="Kontakt">Kontakt</a></li>      
<li><a href="http://localhost/fuelcms/index.php/agenda" title="Agenda">Agenda</a></li>     
<li><a href="http://localhost/fuelcms/index.php/gallery" title="Gallerie">Gallerie</a></li>    
<li class="last"><a href="http://localhost/fuelcms/index.php/links" title="Links">Links</a></li>       
</ul>      
</div>-->      

<ul>       
<li class="first"><a href="http://localhost/fuelcms/index.php/repertoire" title="Repertoire">Repertoire</a></li>       
<li><a href="http://localhost/fuelcms/index.php/about" title="Über uns">Über uns</a></li>    
<li><a href="http://localhost/fuelcms/index.php/kontakt" title="Kontakt">Kontakt</a></li>      
<li><a href="http://localhost/fuelcms/index.php/agenda" title="Agenda">Agenda</a></li>     
<li><a href="http://localhost/fuelcms/index.php/gallery" title="Gallerie">Gallerie</a></li>    
<li class="last"><a href="http://localhost/fuelcms/index.php/links" title="Links">Links</a></li>       
</ul>      

<div class="fullpage">     
<div class="colmask">      
<div class="col3">     

<div class="pagination"><a href="http://localhost/fuelcms/index.php/gallery/index/">‹ First</a>  <a href="http://localhost/fuelcms/index.php/gallery/index/7"><</a> <a href="http://localhost/fuelcms/index.php/gallery/index/6">7</a> <a href="http://localhost/fuelcms/index.php/gallery/index/7">8</a><strong>9</strong></div><br><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Gong.JPG"><img src="http://localhost/fuelcms/assets/cmages/fotos_site/thumbs/Gong_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Fatamorganaschatten.JPG"><img src="http://localhost/fuelcms/assets/cmages/fotos_site/thumbs/Fatamorganaschatten_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Bumentopf2.JPG"><img src="http://localhost/fuelcms/assets/cmages/fotos_site/thumbs/Bumentopf2_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blumentopfdynamik.JPG"><img src="http://localhost/fuelcms/assets/cmages/fotos_site/thumbs/Blumentopfdynamik_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blumentopf.JPG"><img src="http://localhost/fuelcms/assets/cmages/fotos_site/thumbs/Blumentopf_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blument1.JPG"><img src="http://localhost/fuelcms/assets/cmages/fotos_site/thumbs/Blument1_thumb.jpg" alt=""/></a></div></div></div><div class="footer" />    
</body>    
</html>

Attempted placing the script tag within the head tag but saw no change. Seeking assistance.

Cheers, almightybob

javascriptjqueryhtmlcsslightbox

Answer №1

  • Are you coding in XHTML using self-closing tags without declaring the XHTML doctype? Take a look at this question on Stack Overflow for more information.

  • <link>, <meta>, and <base> are self-closing tags themselves, but remember that <script> should always be closed with </script> for safety reasons. My IDE (Aptana Studio 3) automatically includes this closure as a best practice.

  • Not completely certain, but it's possible to omit the @ when selecting the lightbox element using the latest version of jQuery: $('a[rel*=lightbox]').lightBox()

  • How long ago was version 1.4 released? Consider updating to a more recent version of jQuery!

Answer №2

Once upon a time, I encountered a similar issue and managed to fix it by inserting the code below right before the closing body tag:

<script>
    $.noConflict();
</script>

Hopefully, this solution will work for you as well.

Just to note, this resolution was tested with the latest jQuery version (1.7.1) from Google's CDN and Lightbox 2.05 available here. If your setup differs, consider updating to more recent versions of both jQuery and Lightbox.

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

Is it Possible to Load Images Without Using Javascript?

When I hover over certain links on my HTML pages, large images are displayed but take a while to load. I prefer not to use JavaScript to preload the images. Are there any alternative solutions available? ...

htmlimage-preloaderlink-prefetch

The fixed table header is misaligned with the body columns' width

I was looking for a way to add a vertical scrollbar to my table, and I ended up wrapping the entire table in a div. The result was that the table head was fixed in position. Is there a simpler method to include a scrollbar in a table without affecting the ...

htmlcsshtml-table

Adjustable dimensions for a collection of squares based on screen size

I am currently designing a grid composed of 1:1 squares and allowing the user to continually add more squares. My main goal is to ensure that the size of each square maintains its aspect ratio while being able to resize accordingly. The challenge lies in k ...

javascripthtmlcss

Python code displays output directly on an HTML webpage

I have created a basic Python chatbot that performs calculations and responds to user input. The chatbot continuously runs in Python, checking previous responses for context. I want to make this chatbot available online and achieve the following: Send us ...

pythonhtmlweb

Error: Unexpected identifier in jQuery ajax line

I'm currently encountering an issue with my jQuery ajax call that's throwing an "Uncaught SyntaxError: Unexpected identifier" error at line 3. For confidentiality reasons, I have omitted the original URL. However, even after removing the csrHost ...

javascriptjqueryajax

Display the picture for a few moments, then conceal it. A button will appear to reveal the following image after a short period

For my project, I want to create a webpage for school where I display one image that disappears after 5 seconds, followed by a button. The user must click the button before the next image appears and stays for another 5 seconds. This sequence repeats each ...

javascriptjqueryhtml

Conceal specific image(s) on mobile devices

Currently, I am facing an issue on my website where I need to hide the last two out of six user photos when viewed on mobile or smaller screens. I believe using an @media code is the solution, but I'm unsure about the specific code needed to achieve t ...

csshtml

Issues with jQuery slide operation

I'm facing an issue with jQuery and I can't figure out where it's coming from. Here is the error message that keeps showing up in the console: Uncaught TypeError: Object [object Object] has no method 'getElement' script_16.js:46Un ...

javascriptjqueryjoomlajquery-slide-effects

The website is experiencing some trailing spaces and overflow issues

Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section ...

htmlcssflexboxoverflowtrailing-whitespace

How to utilize the reduce method with an array of objects in JavaScript

Every week, a number of objects are delivered to me. Each object contains information such as date, hours, and other fields. I need to arrange these objects in an array based on the total hours for each day. Here is an example of the objects: var anArray ...

javascriptjqueryhtmlsalesforcereduce

Mat-SideNav in Angular Material is not toggled by default

<mat-toolbar color="primary"> <mat-toolbar-row> <button mat-icon-button> <mat-icon (click)="sidenav.toggle()">menu</mat-icon> </button> <h1>{{applicationN ...

javascriptangularangular-materialmaterial-design

Tips for testing the setTimeout function within the ngOnInit using Jasmine

Could someone please assist me with writing a test for an ngOnInit function that includes a setTimeout() call? I am new to jasmine test cases and unsure of the correct approach. Any guidance would be greatly appreciated. app.component.ts: ngOnInit(): void ...

javascriptangulartypescriptkarma-jasmine

How can I locate a Forum or Node using a JWT Token as a reference point?

Could someone please guide me on locating my forum using my JWT token? exports.getByOwnerID = function (req, res, next) { Forum.find({createdBy: req.body.createdBy}) .then(doc => { if(!doc) { return res.status(400).end();} return res.sta ...

javascriptnode.jsmongodbexpressjwt

Checking the parameters passed to a function in Typescript: A step-by-step guide

Currently, I am working with Typescript and then transpiling my TS code into JavaScript. However, I have encountered an issue that I am struggling to resolve. The error message I am facing is as follows: Error Found in TypeScript on Line:2 - error TS230 ...

javascriptarraystypescriptfunctionparameters

Is there an animation triggered by hovering the mouse over?

I've implemented a bounce animation that is triggered by mouseover on an image. Currently, the animation only happens once, but I want it to bounce every time the mouse hovers over it. Here is the HTML code: <div class="hair"> <img src= ...

javascriptcssmouseovercss-animations

Issue with animated cursor function not activating when used with anchor links

I've spent hours searching for a solution but I can't seem to find one. I'm attempting to modify the codepen found at https://codepen.io/Nharox/pen/akgEQm to incorporate images and links, however, two issues are arising. The first issue is t ...

javascripthtmlcssanimationcursor

I created a custom discord.js-commando command to announce all the channels that my bot is currently active in, however, encountered an unexpected error

const Commando = require('discord.js-commando'); module.exports = class AnnounceCommand extends Commando.Command { constructor(client) { super(client, { name: 'announce', aliases: ['an'], ...

javascriptnode.js

Explore the capabilities of Chart JS integration using Python Selenium

I've been attempting to click the buttons on this Chart JS located on the webpage . Despite trying by xpath, full xpath, and JS path, I have not been successful. An example of my attempt to press the "All" button can be seen below: https://i.sstatic.n ...

javascriptpythonselenium-webdriverhighcharts

Using Node.js and Express for redirecting to a custom URL

Having an issue with redirection on my small nodejs/express app. The goal is to redirect to an external URL with input values from a form after submitting. index.html <form method="POST" action="https://192.0.2.1/abc.html"> <input name="name ...

javascriptnode.jsexpress

Obtaining solely the words found within HTML documents

In my Python 2.7 project, I have a folder containing multiple HTML pages that I need to extract only words from. My current process involves opening the HTML file, using the Beautiful Soup library to extract text, and then writing it to a new file. However ...

javascriptpythonhtmlcsspython-2.7