Photoshop Question posted in
The official user guide can be found here.

get alt of image to show – Photoshop

Hi guys I can’t seem to get my code to run on this site. The only problem I have is I have a modal image gallery and I want to show the image “alt” when I enlarge the image. I am a novice when it comes to javascript but I know something needs to be added to be able to show the alt when the image grows in size. I just want people to see where is image comes from when they open the image.

Image of before clicking on image
Image of modal gallery

As shown in the images I want the alt of the image to be shown underneath the modal/lightbox

Hope you can help me 🙂

Regards
Francois

< script >
  function onClick(element) {
    document.getElementById("img01").src = element.src;
    document.getElementById("modal01").style.display = "block";

  } < /script>
/* Style the Image Used to Trigger the Modal */

ImgHolder {
  display: flex;
  justify-content: center;
  width: 100%;
}
.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  width: 110px;
  height: 115px;
  margin-right: 5px;
  margin-top: 5px;
}
.myImg:lastchild {
  margin-right: 0;
}
.myImg:hover {
  opacity: 0.7;
}
/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1600;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  padding-bottom: 20px;
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: scroll;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}
/* Modal Content (Image) */

.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 700px;
  border-radius: 20px;
}
/* Add Animation - Zoom in the Modal */

.modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  -moz-animation-name: zoom;
  -moz-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
/* The Close Button */

.close {
  position: absolute;
  top: 50px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #755378;
  text-decoration: none;
  cursor: pointer;
}
<div class="ImgHolder">
  <img src="../../Photoshop converted/Soweto/Cooling-Towers-Soweto.jpg" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
</div>

<div id="modal01" class="modal" onclick="this.style.display='none'">
  <span class="close">&times;</span>
  <img id="img01" class="modal-content">
</div>
Tags:

4

Answers


  1. 0

    You could do it simply like this:

    function onClick(element) {
    var inputelement = document.getElementById("img01");
    var alttext = element.getAttribute("alt");
    var textbox = document.getElementById('alttext');
    inputelement.src = element.src;
    textbox.innerHTML = alttext;
    document.getElementById("modal01").style.display = "block";
  }
    /* Style the Image Used to Trigger the Modal */

ImgHolder {
  display: flex;
  justify-content: center;
  width: 100%;
}
#alttext {
  position: absolute;
  text-align: center;
  width: 400px;
  height: 50px;
  left: 50%;
  margin-left: -200px;
  bottom: 125px;
  color: #FFFFFF;
}
.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  width: 110px;
  height: 115px;
  margin-right: 5px;
  margin-top: 5px;
}
.myImg:lastchild {
  margin-right: 0;
}
.myImg:hover {
  opacity: 0.7;
}
/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1600;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  padding-bottom: 20px;
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: scroll;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}
/* Modal Content (Image) */

.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 700px;
  border-radius: 20px;
}
/* Add Animation - Zoom in the Modal */

.modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  -moz-animation-name: zoom;
  -moz-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
/* The Close Button */

.close {
  position: absolute;
  top: 50px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #755378;
  text-decoration: none;
  cursor: pointer;
}
    <div class="ImgHolder">
  <img src="https://www.allaboutbirds.org/guide/PHOTO/LARGE/bald_eagle_adult2.jpg" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
</div>

<div id="modal01" class="modal" onclick="this.style.display='none'">
  <span class="close">&times;</span>
  <img id="img01" class="modal-content">
  <div id="alttext"></div>
</div>

    The positioning etc is up to you.

    Login or Signup to reply.
  2. 0

    Please check this working demo `

    <a id="a">
    <img alt="hello world" class='myImg' src="http://placehold.it/150x150">
</a>

var $a = document.getElementById("a");
var $img = $a.getElementsByTagName("img")[0];
console.log($img.alt);

    http://jsfiddle.net/xnkjn/`

    Login or Signup to reply.
  3. 0

    you are only passing the modal the src of the image and not the alt.

    pass the alt in your function to the modal like this:

    function onClick(element) {
    document.getElementById("img01").src = element.src;
    document.getElementById("img01").alt = element.alt;
    document.getElementById("modal01").style.display = "block";
}
    Login or Signup to reply.
  4. 0

    You could use jQuery instead.

    1. Replace onclick="onClick(this)"with onClick="onClick($(this).prop('alt'))"
    2. In your OnClick function only use this line:
      $('.lightbox_bottom').after(element);

    .lightbox_bottom is the class name of your lightbox. The alt value will be inserted after that element. You may need to change this selector.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search