jquery Lightbox triggers not activating

Currently working on a project to create a lightbox with thumbnails for educational purposes. However, I am encountering some difficulties with the code:

  1. The event handlers are not triggering after the overlay appears, which has content inserted into it via jQuery (It would be helpful if you could also clarify why the event handlers are not functioning).

    1. Are there any simple lightbox alternatives available that are suitable for learning purposes?

Below is the code snippet:

$(function(){
  // JavaScript code goes here
});
/* CSS code goes here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lb">
  <ul class="thumbnails">
    <li><img class="thumbnail" src="_images/image1.jpg" data-src="_images/image1.jpg" width="100" height="100"></li>
    <li><img class="thumbnail" src="_images/image2.jpg" data-src="_images/image2.jpg" width="100" height="100"></li>
    <li><img class="thumbnail" src="_images/image3.jpg" dta-src="_images/image3.jpg" width="100" height="100"></li>
    <li><img class="thumbnail" src="_images/image4.jpg" data-src="_images/image4.jpg" width="100" height="100"></li>
  </ul>
</div>

jqueryhtmlcsslightbox

Answer №1

To create a simple lightbox using only CSS (if it suits your project), you need to set up 2 blocks:

#normal {
        max-width: 50%;
        height: 200px;
    }

    #lightbox {
        /* Start by hiding the lightbox block */
        display: none;
        position: absolute;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    background: rgba(0,0,0,0.9);
    text-align: center;
    }
    
    #lightbox img {
        max-width: 80%;
    max-height: 75%;
    margin-top: 5%;
    }

    /* Display the lightbox when it's the target of a link */
    #lightbox:target {
        display: block;
        outline: none;
    }
<a id="normal" href="#lightbox">
        <img src="https://cdn.meme.am/cache/instances/folder965/500x/55103965.jpg">
    </a>
    <a id="lightbox" href="#_">
        <img src="https://cdn.meme.am/cache/instances/folder965/500x/55103965.jpg">
    </a>

This is just one example of creating a lightbox, and there are many ways to customize it according to your needs. I've implemented this method in a large project, and it works effectively, even allowing for comments within the lightbox (similar to how Facebook handles its lightbox).
Check out this Codepen example
Learn more about the CSS :target selector on MDN

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

Shifting the navigation bar to the right to accommodate a logo on the left side of the bar

I'm currently working on adjusting the position of the navigation bar to the right in order to accommodate a logo on the left side of the navigation text. Despite trying to use float-right, it doesn't seem to be working as expected. Below is the ...

htmlcss

What are some ways to trigger a function once the modal has finished loading?

I'm looking to trigger a function on the Bootstrap modal after it has been opened. I came across the event show.bs.modal in the documentation. I attempted to connect to the modal using this code: $('#my-modal').on('show.bs.modal' ...

jquerybootstrap-4

"Eliminate any inline styling from a string element with the power of JavaScript/j

If I have the following string: let sentence = '<h1 style="lots of class"> </h1><h2> <p style="bunch of class"> </p> <p style="bunch of class"> </p></h2>'; This string contains multiple elements a ...

javascriptjqueryhtmlregex

Can a Textmate snippet be activated using a Regex pattern instead of just a specific character?

Hey there, I've been spending a lot of time working with CSS recently, and I have to admit that constantly typing "px" after every width, height, margin, etc., is starting to get on my nerves. I find myself refining pixel values in Firebug quite ofte ...

cssregextextmatetextmatebundles

Navigating through the Roots in ICanHaz.js / Mustache

I'm encountering a problem with iterating using ICanHaz.js / Mustache. My goal is to iterate over the roots of a JSON structure and extract a specific parameter. This is the JSON I'm working with: { "1": { "param1": "true", "param2": "fa ...

javascriptjquerymustacheicanhaz.js

Leveraging dynamic anchor tags within a Chrome extension

In my current project, I am dynamically generating anchor tags and using them to redirect to another page based on their unique IDs. While I have successfully implemented this feature using inline scripts in the past, I ran into an issue with Chrome exte ...

javascriptjqueryhtmlgoogle-chrome-extension

Safari browser experiencing issues with JQuery Slider functionality

I am facing an issue with a slider that works perfectly in all browsers except Safari. I have been struggling to figure out the root cause of this problem. You can view the fiddler code here: http://jsfiddle.net/sjramsay/UyvvL/ It appears that when the co ...

jquerycssslider

Using jQuery to extract values from a textbox in an .aspx page that utilizes a Master page

I need to retrieve the value of a text box control using its ID. function FetchTextValue(id) {var val = $('#<%=' + id + '.ClientID %>').val(); alert(val); } ...

jqueryasp.net

Preserve the original color of links in CSS by using the `a

Is it feasible to specify in CSS that a link should not change its color and instead use the default one? For example: If I have text displayed in red, and that text is also a hyperlink. Typically, when clicked on, the text would change to blue because i ...

htmlcsshyperlink

The function getComputedStyle('background-color') will return a transparent value that does not inherit from any ancestor element

When using getComputedStyle, it is expected to return the final computed CSS property value. However, for background-color, browsers tend to return "transparent" (or rgba(x,x,x,0)) instead of computing the inherited value from ancestors. The method only s ...

javascriptcssbackground-colorgetcomputedstyle

What steps should I take to ensure that this accordion is responsive?

I am currently working on an accordion design and trying to figure out how to make it full width and responsive. I have experimented with various width and display attributes, but I haven't been able to achieve the desired result yet. If you'd l ...

css

Exploring the potential of jQuery and AJAX for dynamic content generation:

I have developed a jQuery plugin that pulls data from a JSON feed (specifically YouTube) and then presents the results in a DIV. Everything is working well until I need to display the results with different configurations, such as more videos or from anoth ...

javascriptjqueryajaxplugins

CSS for Responsive Web Development: Adjusting the Height of Mobile Sliders

I've been working on adjusting the height of the slider on my website for mobile screens, but I can't seem to get it right. The website in question is www.msstoreway.com. Despite adding the CSS code below, I was able to adjust the slider height ...

css

Choosing a parent element with SASS/SCSS

I'm facing a slight issue with SCSS syntax while creating a small component using the BEM methodology. Here's the HTML: <div class="message message--success"> <div class="message__title"> BEM Example </di ...

htmlcsssassbem

Creating an HTML div that fills the remaining height available

Currently, I'm developing a web application and aiming to have the content span the full height of the screen. Is there a way to make the div element (other-child) automatically fill its parent without having to manually set its height? html { heig ...

htmlcss

Using AJAX in Laravel Blade to bypass the specified div class

As a beginner in AJAX JavaScript, I have been trying to filter data in Laravel 10 without refreshing the page using AJAX, but so far I haven't had much success. Below is the code snippet from my blade view: <script src="https://code.jquery.co ...

javascripthtmlajaxlaravellaravel-blade

Updating the text of a Mat-Label dynamically without the need to reload the page

In my application, there is a mat-label that shows the Customer End Date. The end date is fetched initially through a GET request to an API. Let's say the end date is 16-05-2099, which is displayed as it is. There is also a delete button implemented f ...

javascripthtmlangulartypescriptrest-client

How to build a login page with a static header and footer using Angular2

For my latest project, I am currently in the process of developing an application using Angular2 and eclipse Neon. Utilizing angular-cli for this app, I am now focused on creating the login page. Within the app.component.html file, you will find the follow ...

cssangulartypescript

Sluggish Performance Noticed with Angular's Ng-If Directive

I have a scenario where I am using an ng-if directive to hide an element until a specific condition is met. Despite the condition being met in my controller, the element does not seem to be in the DOM when I try to locate it with a jQuery selector. It seem ...

javascriptjqueryangularjs

Styling the navigation bar using CSS and positioning a <div> element underneath

Struggling to design a navbar using Bootstrap and have a div positioned underneath it that fills the remainder of the page? You're not alone! As someone new to Bootstrap and CSS, this can be tricky. Here's an example of how I created a navbar: ...

htmlcss