Togglebox CSS is set to hide elements initially

I am having issues with Lightbox2 as it is not functioning properly when I try to click on the image.

Upon inspecting the Developer Console in Chrome, I noticed that the overlay and image are being added to the DOM, but the display property is set to none.

display:none

This is the code I used for testing purposes:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">      
        <script src="Script/jquery.js"></script>
        <link href="Script/lightbox_dist/css/lightbox.css" rel="stylesheet">        
    </head>

    <body>
        <img src="Images/Gallery/27.jpg" data-lightbox="gallery" width="250"/>
        <script src="Script/lightbox_dist/js/lightbox.js"></script>
    </body>
</html>
jqueryhtmlcsslightbox2

Answer №1

Are you making sure to use the proper HTML tags and attributes?

<a class="example-image-link" href="images/image-1.jpg" data-lightbox="example-1" data-title="Optional caption.">
    <img class="example-image" src="images/thumb-1.jpg" alt="Two men in bicycle jerseys sitting outside at table having coffee">
</a>
<a class="example-image-link" href="images/image-2.jpg" data-lightbox="example-2" data-title="Optional caption.">
    <img class="example-image" src="images/thumb-2.jpg" alt="Two men in bicycle jerseys sitting outside at table having coffee">
</a>

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 there a way to get this script running on WordPress?

I'm working with this JavaScript code: $(document).ready(function(){ $("text1").click(function(){ $(this).hide(); }); }); Here's the HTML code: <div class="div1"> <p class="text1">text to appear when the user p ...

phpjqueryhtmlwordpress

Python Selenium - encountering issues with interactability of elements

Trying to complete the form on () is proving tricky for me. When I utilize Javascript, document.getElementsByName("userName")[0].value = "Hello", I am successful in entering text into a form. However, when I apply the same logic in Sel ...

pythonhtmlseleniumxpath

Problem with Chrome Compatibility for Bootstrap Carousel

My webpage features a carousel implemented as a slider. It seems to be working fine in Firefox and mobile browsers, except for Chrome where it doesn't show up at all. I can't seem to figure out what's causing the issue. Here is the syntax I& ...

javascriptjqueryhtmlcsstwitter-bootstrap

What could be causing my div element to not inherit its parent div's width?

My query revolves around a header div that I'm struggling to align with the same width as its parent div, while keeping the content centered. Currently, the div is only as wide as its content, causing it to be off-center. https://i.stack.imgur.com/E1 ...

csscss-position

Creating a website layout with two evenly sized columns, one of which can be scrolled through

I am facing a challenge with my HTML table that has one row and two columns. I want the two columns to have equal height, but achieving this has proven difficult using floats or flexbox. Therefore, I turned to using a HTML-table. The content in the left c ...

htmlcsshtml-tablescrollable

Enable AJAX to dynamically load pages without caching

I am currently using an ajax function to refresh a specific division on a webpage with HTML content. <script> $('#scene_container').load('scene.html', function () { cache: false }); </script> ...

javascriptjqueryhtmlajax

Icon with label and border using Font Awesome

I'm looking to recreate this design using HTML and CSS: The icon I'm trying to replicate is actually from font awesome. Here's what I've accomplished so far: https://jsfiddle.net/0Lewug6p/1/ <head> <meta charset=" ...

htmlcssfont-awesome

Initially, the 'display none' CSS command may not take effect the first time it is used

I am currently working on a slideshow application using jquery.transit. My goal is to hide a photo after its display animation by setting the properties of display, transform, and translate to 'none' value. Although the slideshow application work ...

javascriptjquerycss

I would like some clarification on how bookmarking works

As I encountered a puzzling issue recently, I realize that I may need some assistance to navigate through it. It involves bookmarking some links for future reference. I attempted to search for answers online but found myself even more perplexed. Does boo ...

html

I'm currently troubleshooting the code for the Gallery project. The gallery is supposed to have 4x4 grids, but for some reason, the grids are

It seems like I am struggling to identify the exact issue. The display on mobile looks fine but not on desktop. I attempted to tweak the isotope configuration without success. Even manipulating the server-side code didn't reveal any obvious problems. ...

javascriptphphtmlcssjquery-isotope

How to Resolve File Paths in CSS Using Angular 7 CLI

My assets folder contains an image named toolbar-bg.svg, and I am attempting to use it as the background image for an element. When I use background: url('assets/toolbar-bg.svg'), the build fails because postcss is unable to resolve the file. How ...

cssangularsasscommand-line-interfaceassets

Broken links detected in the Full Page Navigation menu on a one-page website

The hyperlinks on this particular page seem to be malfunctioning despite the fact that the li.a tags are correctly targeting specific section IDs. Markup: <header> <a href="#0" class="nav_icon"><i></i></a> </header> ...

javascriptjqueryhtmlcssnavigation

Show the most recent image from a folder in real-time

Looking for a solution to automatically display the latest image from a folder without refreshing the page? Check out this code snippet that achieves just that: <?php foreach (glob('/home/pi/camera/*.jpg') as $f) { $list[] = $f; } sort( ...

phphtml

Is it possible to integrate HTML pages as sections within an HTML file using AngularJS?

There are three individuals each working on separate sections of a webpage. One is focusing on moving images, another is devoted to the tab section. This begs the question: 1) Is it feasible to embed all these HTML sections into a single HTML page and dis ...

htmlangularjsuser-interface

The issue with ng-bind-html causing the disappearance of paragraph spaces

Is there a way to preserve paragraph breaks when using ng-bind-html to display text on the screen? I am having an issue where all the text appears as one big chunk if there are paragraph breaks in the data pulled from the database. Not sure what is causing ...

cssangularjs

What is the best way to incorporate bullet points into a textarea?

How can I make a bullet point appear when pressing the 'enter' button inside a textarea? I tried using this code, but it doesn't seem to work. Any suggestions? <script> $(".todolist").focus(function() { if(document.getElementById( ...

javascriptjqueryhtml

Tips for sending a unique button ID to a jQuery click function

Within a table row of a dynamically generated table, I have multiple buttons each with its own functionality. My goal is to figure out how to pass the specific button ID to the onclick event of that table row when one of these buttons is clicked. $(&apos ...

javascriptjquery

Pass information submitted through a JavaScript prompt to an expressjs endpoint

I'm currently facing a challenge in extracting the value from my prompt in order to modify a category using a JavaScript function. Typically, I would rely on a form to pass variables to the request.body, but that's not an option here. This is wh ...

javascripthtmlnode.jsexpress

All menus effortlessly sliding out simultaneously

I'm having an issue with my navigation bar. I want each link to slide its corresponding DIV up or down when clicked. However, all the DIVs are sliding and when clicking on the same link everything slides up. How can I fix this problem? This is my HT ...

javascriptjquerymenu

Using jQuery to duplicate elements by copying and pasting

I am facing a scenario where I need to dynamically create and manipulate a div element in my web application. The process involves appending the newly created div to another container upon clicking a button, followed by triggering a series of functions on ...

javascriptjqueryfunctioncanvascopy-paste