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

Creating a personalized dropdown menu in react-draft-wysiwyg: A step-by-step guide

I am looking to incorporate a custom dropdown menu into the toolbar section. Here is an image that shows what I want for the dropdown menu. Can this be done? <img src="https://i.imgur.com/OhYeFsL.png" alt="Dropdown menu editor"> You can view a mor ...

javascriptreactjswysiwygdraftjsdraft-js-plugins

Unexpected behavior: jQuery events failing to execute while triggering the 'change' event with fireEvent

Issue seen in IE7-8. Here's a simple illustration: <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javas ...

javascriptjquerydomselenium

Error occurs when JSON.parse is used

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> var data = "{ 'name': 'John' }"; var result = JSON.parse(data); </script> ...

javascriptjson

SQL inputs with information that updates automatically / autofill SQL input boxes

Is it feasible to create a webpage that can connect to an SQL database, retrieve information from a table, and display it in a text box based on the input provided in another text box? Essentially, I am looking for a way to enable autofill functionality. I ...

phpjavascriptmysqlhtmlsql

Set the display property of all child elements within the DIV to none

CSS <div class="container"> <span></span> <input type="text"> </div> JavaScript function hideElements(){ let container = document.querySelector(".container"); let elements = ...

javascriptstylesdisplay

Is it possible to improve the cleanliness of a dynamic button in Jquery?

I've just finished creating a dynamic button on the screen as per my boss's request. When this button is clicked, it triggers an email window for feedback submission. My aim is to streamline this script so that I can avoid digging into ASP marku ...

javascriptjquery

Effortless method of organizing information like scores

I have developed a multiplayer game that will be played on a server, and I need to save the high scores of the players. These stored scores should be consistently available and easily accessible for all players at any time. Can anyone suggest a good appro ...

javascriptstore

Targeting HTML tags, styling names, and class names using CSS

In the markup below, I am trying to target three specific points using CSS. img style*=right class=media-element I attempted to use the code below, which did not work: img[style*="right"][class="media-element"] {margin-left:10px;} However, selecting t ...

htmlcsscss-selectors

Is it possible to implement a wsdl webservice in Phonegap?

Does anyone know the best way to call a wsdl webservice in Phonegap? Any suggestions on source code or tutorials that could be helpful? ...

javascriptandroidioscordovawsdl

Having trouble displaying the accurate model value in the alert

I have the following piece of code: $(document).ready(function () { var edit= @Model.Edit.ToString().ToLower(); if( edit !=true ) { $("#editWriteup").hide(); } var date= @Model.EndDate; alert(date); ...

javascriptjqueryasp.net-mvcviewmodel

Update the data table after a new file has been uploaded

As a novice web developer, I embarked on my first project using Vue. In this project, I created a form for file uploads in Vue 2 and Laravel. If you want to take a look at the full code: View: https://pastebin.com/QFrBfF74 Data table user file: https:/ ...

javascriptvue.js

`Manipulating the image source attribute upon clicking`

I need help changing the attr: { src: ...} binding of an img element when a different image is clicked. Here is an example: $(document).ready(function () { var viewModel = { list: ko.observableArray(), showRenderTimes: ...

javascripthtmldata-bindingknockout.js

Why does the video cover extend past its lower boundary in HTML?

I'm facing an issue where a purple cover over the <video> element extends slightly beyond the video's bottom border. Here's the code I'm using: .media-cover { display: inline-block; position: relative; } .media-cover:after ...

htmlcsshtml5-video

Having trouble with the Aurelia JSPM install -y command not functioning properly on Windows

I am currently following the Aurelia tutorial at I am attempting to install Aurelia dependencies using Gulp and JSPM. I successfully ran "jspm install -y" without any issues. However, upon opening the browser console, I encountered the following error: ...

javascriptnpmaureliajspm

Allowing Angular2 Components and their Sub Components to access a shared instance of ngModel within a service

Currently, I have been working on constructing a complex view that requires multiple functionalities. To ensure proper organization, I have divided it into various custom components. I don't want to go into great detail, but I have managed to make it ...

javascriptangularangular-ngmodel

Is there a way I can create a slight gap between the icon and the text in this area?

After learning Reactjs and JavaScript, I have encountered a problem that I need advice on. In the image provided, the "Sign in" text does not have proper spacing between the icon and the text, unlike the other menu items. https://i.stack.imgur.com/b663b. ...

htmlreactjs

What is causing my column's content to be lacking padding on the left side and having excessive padding on the right side?

Edit: Here's the link to the codepen https://codepen.io/maptik/pen/bGKMgpJ In my React project, I'm utilizing Bootstrap to display cards for each "Product". Here is a snippet of how I am rendering it: <div className="container bg-color- ...

htmlcssreactjsfrontend

What is the most efficient method for clearing the innerHTML when dealing with dynamic content?

Is there a more efficient method for cleaning the innerHTML of an element that is constantly changing? I created a function to clean the containers, but I'm not sure if it's the most efficient approach. While it works with the specified containe ...

javascriptjqueryhtml

Why is my main.scss having trouble importing other files?

I am experiencing issues with importing my scss file. First, I created a file called main.scss and added some code to it. All the codes are functioning properly and showing up on the webpage. Next, I created two folders named settings and elements. In ...

csssass

What are the steps to add a Search Box to my HTML Website?

Currently, I am in search of a way to incorporate a "Search" feature on my website that is built solely with HTML. I have added a Search box for the users but I'm uncertain about how to proceed next. Can I use PHP to enable the Search functionality o ...

phpjavascriptjqueryhtmlsearch