Incorporating a text box underneath the model image

My application currently utilizes a grid gallery that perfectly fits my needs. However, there are two specific changes I need to make in order for it to be complete for my purpose. Unfortunately, I am struggling to figure out how to implement these changes. The modifications required are as follows:

  1. When an image in the gallery is clicked, a full-size version of the image should pop up in a modal format (similar to bootstrap modal). The issue at hand is that clicking anywhere on the screen, including the image itself, closes the image. I want the image to close only when the outside area (dark area) is clicked, not when the image itself is clicked. How can this be achieved?

  2. I would like to incorporate a white text box just below each image that adjusts its width based on the image size. This text box will display a circular user profile picture along with the user's username. Clicking on this element should redirect the user to another page, such as the user's timeline. How can I add this text box?

It should be noted that problem 1 and problem 2 are interconnected, as the functionality of clicking on the username is hindered by the premature closing of the image upon any initial click within the window.

Code Pen Snippet: [ https://codepen.io/zoomkraft/pen/KKKNVXN ][1]

[1]: https://www.codepen.io/zoomkraft/pen/KKKNVXN

Answer №1

  1. One way to address this issue is by implementing a condition in the click event handler that switches the full class on and off for the gallery-item element:
gallery.querySelectorAll(".gallery-item").forEach(function(item) {
  item.addEventListener("click", function(event) {
    // Check if image is currently in full mode and if the click event originated from an img or a element, do not toggle the full class
    if (item.classList.contains("full") && ['IMG', 'A'].includes(event.target.tagName)) {
      return;
    }
    item.classList.toggle("full");
  });
});

To view the updated codepen, click here: https://codepen.io/giuseppedeponte/pen/gOOLPya?editors=0010

  1. If you want your link to adjust its width dynamically based on the image, consider enclosing them in a wrapper.

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

Tips for incorporating properties from JSON-retrieved objects into a template

I'd like to extract and display only the state_name value from the HTML template. Is there a way to achieve this using jQuery in the template? $.ajax({ type: 'GET', url: "http://localhost:8000/country_state/", data: { "country": s ...

implementing data in a single component using vue.js

I am facing an issue with a component where I need to fetch data using an ajax call. The component is being called correctly and the data is returned in the ajax call, but I am struggling to assign it to the data in the template? <template> < ...

Ways to determine if a user is using a PC using JavaScript

I am developing a website using node.js that will also serve as the foundation for a mobile app. The idea is to have users access the website on their phones and use it like an app. But I want to implement a feature that detects when the site is being vi ...

Rearrange elements within a div by clicking a button

I want to shuffle div elements with a click of a button using a dissolve animation in HTML5. An example of what I am looking for is similar to this website When you scroll on the page, there are links such as All, Intro, Solution. Clicking on any link sh ...

Decorate the elements that do not contain a specific child class

I'm currently working on an angular project with primeng for the UI components. My focus at the moment is on customizing the p-menu component, specifically the appearance of list items that are not active. The challenge I'm facing is that the act ...

How to use jQuery to disable td and ul elements

Has anyone successfully disabled a "td" or "ul" element using jQuery, similar to how we disable textboxes and other input types? I attempted to use the "prop" and "attr" functions in jQuery, but they did not seem to work. Is there a way to achieve this? ...

Is it possible to retrieve information from a MySQL database by utilizing Bootstrap and Ajax with the selected ID?

I am currently working on two php pages. The first php page contains a table with records that can be edited using a Bootstrap Modal, while the second php page processes updates to the MySQL database. Below is the code for the first php page (edit_account ...

Limiting Checkbox Selection and Controlling Input Box with JQuery: How to Choose Only 3 Checkboxes Simultaneously and Trigger Enable/Disable Function on Input Field

I am currently working on a feature that involves 6 checkboxes and 6 input fields. The idea is that when a user clicks on a checkbox, the corresponding input field will be enabled for data entry. If the checkbox is unchecked, the input field will be disa ...

There is an issue with the syntax in your for-loop control where a closing parenthesis is missing

When I try to navigate through the arrays from 1 to 4 in the given JSON data, Firebug shows me an error message: SyntaxError: missing ) after for-loop control [Break On This Error] for( x in LGIntake.corpCodeOptions.marketSegment.1){ StartI...aseId=0 ...

Error: The requested collection# cannot be found in the Node.js Express routing system

Recently, I have started learning nodejs and implemented a simple API that allows users to log in with passport and then redirects them to the /collections route. While this part is functioning correctly, I am encountering issues with POST requests which a ...

Differences between applying addClass(undefined) and addClass(null)

At times, it crosses my mind to include a class in a chain, depending on certain conditions. What would be the most fitting semantic value to add no class? For instance: $(".element").performAction().addClass(condition ? "special-class" : undefined).perf ...

Navigational bar with horizontal scrolling in Bootstrap

I'm looking to create a navbar that remains fixed at the top of the screen, without any vertical scrolling. However, I still want users to be able to scroll horizontally when necessary. The first div in the code below achieves the desired effect, stay ...

CSS: Indication that the Text is Extending Beyond its Container

Seeking a solution to indicate overflow of text within its container, as demonstrated in this example. Essentially, a <span> with fixed dimensions. Looking for a visual cue when text exceeds boundaries. Attempted the use of text-overflow:ellipsis;, ...

Converting keyValue format into an Array in Angular using Typescript

Is there a way to change the key-value pair format into an array? I have received data in the following format and need to convert it into an array within a .TS file. countryNew: { IN: 159201 BD: 82500 PK: 14237 UA: 486 RU: 9825 } This needs to be transf ...

Issues have been identified with React Native UI components RCTBubblingEventBlock and RCTDirectEventBlock not functioning as expected

In my custom native view within an Ignite project, I am facing a challenge with setting up communication from Objective-C to React Native. While the communication from React Native to iOS works using HTML injection, the reverse direction is not functioning ...

Is it possible to resolve the error message "Uncaught TypeError: Cannot read property 'node' of undefined" when utilizing d3-tip with npm?

After installing d3": "^3.5.17" and "d3-tip": "^0.7.1" via npm (d3-tip documentation), the following code was added to my index.js file: var d3 = require('d3'); var d3tip = require('d3-tip')(d3); console.log('d3 version', d3. ...

There was an unexpected error: Unable to access the 'icon' property of null

Whenever I try to edit a tab using the form, an issue arises. If I open the dialog box by clicking the edit icon and then hit save without altering the icon field, I receive an error message stating Uncaught TypeError: Cannot read property 'icon' ...

Is there a way to figure out the number of days from the current date using jQuery UI datepicker?

Hello there, I'm currently facing an issue with calculating the number of days from the present to a chosen date after utilizing a jQuery datepicker. It seems that the date formatting is getting altered upon selection, causing discrepancies in the ca ...

Personalize Material design slider Label - final element

When using Material-ui, the default position of Slider's labels is centered: However, I require the labels to have a space-between position. For example: To achieve this, I tried using the '&:last-child' property for the markLabel clas ...

Error in Chrome: Uncaught TypeError with JQuery Ajax - Unable to access property 'data' when null

Trying to retrieve results from the YouTube API, my code is as shown below: function Vget(strt){ $.get("https://gdata.youtube.com/feeds/api/videos", { q: "soccer, 'start-index':strt, 'max-results':"5", v:"2",alt:"jsonc" }, functi ...