The lightbox is triggered by clicking on a different div to display its content

Great news - my lightbox is up and running! Each image on my website corresponds to a different organization, and clicking on the image opens a specific lightbox.

My question is: how can I have a lightbox configured so that only the trigger image is displayed on the webpage without showing all the images in the set? I want them to be visible only when someone clicks on the trigger image within the lightbox.

Check out the code for one image in the lightbox below:

<div class="belmont" style="margin-left:30px; margin-top:30px;">
    <a href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
        <img src="images/Belmont4portfoliohover.png" width="163" height="160">
    </a>
</div>

Thanks in advance!

javascripthtmlcsslightbox2

Answer №1

To make the other ones disappear, you can hide them.

<style>
  /* Custom CSS for hiding elements */
     .hidden {
        display: none;
      }

</style>

<div class="gallery" style="margin-left:20px; margin-top:20px;">
    <a href="img/gallery/image1.jpg" data-lightbox="galleryimage">
        <img src="images/thumbnail1.png" width="150" height="150">
    </a>
    <a class="hidden" href="img/gallery/image2.jpg" data-lightbox="galleryimage">
        <img src="images/thumbnail2.png" width="150" height="150">
    </a>
    <a class="hidden" href="img/gallery/image3.jpg" data-lightbox="galleryimage">
        <img src="images/thumbnail3.png" width="150" height="150">
    </a>
</div>

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

What is the best way to conceal just the scrollbar thumb in a Bootstrap modal?

When opening a modal in Bootstrap according to the documentation, it only hides the scrollbar thumb, like shown in the examples below: However, my modal hides the entire scrollbar. How can I modify it to hide only the scrollbar thumb? body { height: ...

jquerycsstwitter-bootstrapbootstrap-4bootstrap-modal

Executing filepicker.io Javascript API calls may lead to unsafe errors in Javascript

I am currently using AngularJS and encountering an issue when trying to call filePicker.pickAndStore from my Upload controller. Every attempt to use a filepicker.io API function triggers an "Unsafe Javascript attempt" error: The frame requesting access ...

javascriptangularjsfilepicker.io

Transforming the add to cart button into a view button within the product listings: an easy guide

I am currently developing a unique ecommerce website called bookslab.in. To enhance the user experience, I would like to replace the "add to cart" button with a "view details" button when users view the list of available products. Furthermore, when users c ...

phphtmlmagentobuttone-commerce

Identifying the length of a division element following its addition

I'm facing difficulties in detecting the length and index of the dynamically appended div. I have researched extensively and found a solution involving MutationObservers, but I am unsure if it is necessary for this particular issue. Let's focus ...

javascriptjqueryhtml

Transform the structure of the JSON data object

When I use the fetch() request, a JSON file is displayed. Here's an example of what I receive from the database: [ { "id": 3086206, "title": "General specifications" }, { "id": 3086207, "title": "Features ...

javascriptarraysjsonreactjs

CSS has inexplicably ceased to function properly, with the exception of the body

My roommate submitted his project, but only the CSS for the body tag and Bootstrap elements are working properly. When inspecting the webpage, I noticed that none of the CSS changes were showing up, even after editing the Sublime file (except for the body ...

htmlcss

jQuery does not change the scroll position of elements

I'm looking to implement a feature on my website where certain points act as "magnets" and when the user is near one of these points, the window automatically scrolls to the top. I found a jQuery plugin that does something similar which you can check ...

javascriptjqueryscroll

Difficulty encountered with React's map function on the example

I am attempting to display data using the example below. Here is my list.js file: import React, { Component } from 'react'; import { Person} from './Person'; export class List extends Component { render() { const persons ...

javascriptreactjsjsx

Tips for testing a mapbox popup using jasmine testing?

I encountered an issue with my mapbox popup while using jasmine and attempting to write a unit test for it. Here is the function in question: selectCluster(event: MouseEvent, feature: any) { event.stopPropagation(); this.selectedCluster = {geo ...

javascriptangulartypescriptkarma-jasminemapbox-gl-js

stop initial focus on input field in Ionic

One issue I'm facing is that my login screen for the application automatically focuses on the 'username' input field and triggers the keyboard to pop up. This causes the contents of the login screen to push up, resulting in incorrect dimensi ...

csshtmlangularjsionic-framework

Is it possible to reset the existing localStorage value if we access the same URL on a separate window?

In my app, there are two different user roles: admin and super admin. I am looking to create a new window with a Signup link specifically for registering admins from the super admin dashboard. Is it possible to achieve this functionality in that way? Cu ...

javascriptangular

Pass a JavaScript array variable to a PHP script utilizing jQuery Ajax and receive a string output instead of an array

Whenever I attempt to transmit a JavaScript array to a PHP script via Ajax, the output of $_POST['file_paths'] when var_dumped shows up as a string instead of an array. My goal is to have the output in array format rather than in string format. C ...

javascriptphpjqueryarrayswordpress

How to modify the background image of a div using CSS from a specific folder

<head id="Head1" runat="server"> <title>Title</title> <style> .parallax { /* The image used */ background-image: url(Pictures/BackUS.png); height: 100%; /* Create the parallax scrolling effect */ back ...

htmlcss

What are some methods for utilizing jQuery or Javascript to dynamically modify CSS styles depending on the current URL?

I'm working on integrating a separate navigation area file with my content using PHP includes. I have this idea where I want the links in the navigation area to change color depending on the active page (current URL). Essentially, I need jQuery or Jav ...

javascriptjquerycss

Automatically, the "ng-hide" class gets added despite using the correct syntax for ng-show

I am trying to dynamically show/hide a tr tag within a table based on the value of a scope variable in the controller. Despite writing the code correctly, I am facing an issue where the "ng-hide" class is automatically added to the tr tag every time it is ...

javascriptjqueryangularjshtmlcss

The type '{ }' does not include the properties 'params', 'isExact', 'path', 'url' from the 'match<Identifiable>' type

Currently, I am utilizing react router and typescript in order to extract the id variable from a route for use in a component. However, typescript is raising an issue: The type '{}' lacks the following properties found in type 'match' ...

javascriptreactjstypescript

Displaying a pop-up message over the "Login button" for users who are not currently logged in

I am currently in the process of developing a website using node.js and express. I have successfully integrated all the login functionality through passport, allowing users to easily log in or out by utilizing res.user. However, I now want to enhance the ...

javascriptjquerynode.jsajax

What is the process for renaming a Discord channel through nodeJS and discordJS?

I'm currently developing my first Discord bot using node.js and discord.js. My objective is to provide real-time information about a Minecraft server through Discord. What I aim to achieve is to have a channel that automatically updates its name per ...

javascriptnode.jsdiscord.js

Converting HTML to PDF: Transform your web content into

I have a couple of tasks that need to be completed: Firstly, I need to create a functionality where clicking a button will convert an HTML5 page into a .PDF file. Secondly, I am looking to generate another page with a table (Grid) containing data. The gr ...

javascriptcsshtmlpdf

Setting text alignment in Bootstrap based on breakpoints

Imagine this code: import React from 'react' import DarkPattern from '../Assets/dark-pattern.jpg' const Profile = () => { return ( <div> <section className="bg-dark text-light text-center " ...

cssreactjswebbootstrap-4react-bootstrap