How to add banner at the bottom of image with a 'x' button to close it in React/HTML?

Question

Here is my mock-up. I'm using react on the website I'm working on, and I just want to add a banner(that is closeable) for every image that is rendered on the website. I'm new to css so I am not sure what class to use, or if I have to make my own, or how usually people implement this kind of mock-up on css.

Background info: I'm doing this because I want to make the website more accessible for the visually impaired. So the description will basically stored as alt text of the image.

The user will be uploading images so they need to be able to add alt-text for the image themselves, not the coder. So I wanted to implement some kind of mechanism for the UI to accept input for every image, and the input is the image description.The problem is I'm not sure how to code that. I need some help where/when to start with.

There is no "class" to add. The CSS depends on how the HTML is laid out. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA — epascarello, Oct 27 '15 at 19:03
Your content (the text and the x button) would be HTML (possibly rendered by react) The styling (in a blue box, at the bottom of the picture, height is fixed, with button in top-right corner) would be css. The actual icon (the x) is usually a combination. Google fontawesome or similar to learn the tricks of rendering icons through combination of html and css, with tags. — wintvelt, Oct 27 '15 at 19:11

score 1 · Answer 1 · answered Oct 27 '15 at 20:43

The ReactJS API can be found here - https://facebook.github.io/react/ (see the An Application Example) There is an example where you can add text to a page dynamically. I would recommened using that same concept. You would have to break the process down in steps.

Step 1: Declare a variable that will capture what is in the text field whenever the user inputs(types/pastes) anything.

Step 2: When the user presses "Add", call that variable with the stored name and apply it as the alt attribute of the image.

Step 3: Use jQuery to add a <div> that is positioned at the bottom of the image and has the same value of the alt attribute of the image.

If you need the actual code please do let me know.

score 0 · Answer 2 · answered Oct 27 '15 at 19:22

Consider a lightweight, easy to use tool that is dedicated to making everything related to images easier to implement on a webpage (although it can work with other DOM elements as well, i. e., videos, iframes, PDFs).

FancyBox

Here is a simply example of the alt attribute of an image being used to elegantly give the image a title.

Alt Image FancyBox

Lastly, using the same tool, you can use jQuery to build up the alt name and render automatically, so you do not have to do it manually.

// fancyBox v2.0 Next of X Solution, Auto assign title to all images on page.
//www.craigwasselphotoart.com/portrait_and_event_photography/main_test.htm
//http://stackoverflow.com/questions/3216013/get-the-last-item-in-an-array
//All credit goes to JFK of fancybox.net
//Alexander Dixon 07-06-2015

$("a").each(function(index) {
  var titleName = $(this).closest("a").find("img").attr("src").toString().split('/').splice(-1, 1);
  var anchorIndex = "a:eq(" + index + ")";
  $(anchorIndex).attr("title", titleName).attr("rel", "img_gallery");
});

$("a[rel=img_gallery]").fancybox({
  helpers: {
    title: {
      type: 'over'
    }
  },
  // helpers
  beforeShow: function() {
      this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
    } // beforeShow
}); // fancybox

<link href="http://www.alexldixon.com/fancybox/jquery.fancybox.css" rel="stylesheet" />
<script src="http://www.alexldixon.com/fancybox/jquery.fancybox.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://fancyapps.com/fancybox/demo/1_b.jpg">
  <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" />
</a>

<a href="http://fancyapps.com/fancybox/demo/2_b.jpg">
  <img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" />
</a>

jsFiddle of auto alt Names

Thank you for the wonderful answer, but I want users to be able to as the alt-text manually. They will be uploading images, so only they can write the alt-text for it, not the coder. That's why I want to implement some mechanism such that the UI is able to accept input for "image description." So the idea I came up with was to add a banner at the bottom with a 'x' button. But I don't know how to implement that in code. I need some help, to tell me where & what to start with. — , Oct 27 '15 at 19:57

How to add banner at the bottom of image with a 'x' button to close it in React/HTML?

2 Answers2