Retrieve the text from the thumbnail image's "alt" or "title" attribute and utilize it as a signature for the enlarged popup photograph

Question

Retrieve the text from the thumbnail image's "alt" or "title" attribute and utilize it as a signature for the enlarged popup photograph

Is it possible to achieve this? I have a thumbnail image with both alt and title attributes, and when the image is hovered over or clicked on, I want an enlarged image to pop up. Additionally, I would like the alt or title of the image to appear as a signature at the bottom of the image's border. I have tried using the CSS popup image viewer trick, but I'm wondering if there is another way to accomplish this. I believe it has something to do with this statement:

a:after { content: " (" attr(href) ")"; }

I attempted to use the content: attr(title); statement in the following way:

img.thumb:active img.thumb:after { content: attr(title); font-weight: bold; margin: 10px 400px 20px 400px; }

As a newbie in web design, I have been searching for inspiration to make this work but haven't had any luck so far.

Any help would be greatly appreciated. Thanks!

html css image thumbnails signature

Answer 1

Answer №1

If you want to extract information from an image, using jQuery is the way to go. You can retrieve the alt tag or any other attribute with this simple line of code:

var altText = $('img').attr('alt');

To ensure you are targeting the correct image, it's a good idea to assign an id to it as well.

Once you have captured the desired information, you can add it to the signature section like this:

$('#signature').append(altText);

If you need more detailed instructions, feel free to leave a comment for further assistance.

While the aforementioned method works in theory, there are also various lightbox plugins available that offer similar functionality. Have you considered trying out colorbox?

Answer 2

If you want to extract information from an image, using jQuery is the way to go. You can retrieve the alt tag or any other attribute with this simple line of code:

var altText = $('img').attr('alt');

To ensure you are targeting the correct image, it's a good idea to assign an id to it as well.

Once you have captured the desired information, you can add it to the signature section like this:

$('#signature').append(altText);

If you need more detailed instructions, feel free to leave a comment for further assistance.

While the aforementioned method works in theory, there are also various lightbox plugins available that offer similar functionality. Have you considered trying out colorbox?

Retrieve the text from the thumbnail image's "alt" or "title" attribute and utilize it as a signature for the enlarged popup photograph

Answer №1

Similar questions

Update the font style of the navigation bar

Issues with the use of overflow:hidden

I prefer to prevent the page from refreshing once the PHP code is executed

Concealing a div element if the value is null

Using AngularJS to incorporate personalized font icons

Incorporating a bottom line or border within the input field with a specified width

Ways to rotate just the border without rotating the icon through CSS

Can we switch out the jQuery background color for a background image instead?

Why does my jQuery IMG center script not work in Chrome and Safari, but it works perfectly in IE?

Utilizing Modal Popups in ASP.NET MVC for Button Clicks Embedded within a jQuery Datatable

Changing Image to Different File Type Using Angular

Utilizing the ngIf Statement with a Repeating Element: A Step-by-Step

Enabling scrolling for a designated section of the website

Can I use AJAX to load an entire PHP file?

When using IndexedDB with a Javascript To-Do list, the dates for all items appear to be the same after adding a new item to the list

Having difficulty defining the dropdown boundary in Bootstrap 5

What is the best way to iterate through and hide these images when they are clicked on?

Is it possible to generate a table without any grid lines present?

The iframe is not large enough to contain all the HTML content

Tips for Enhancing JavaScript Performance