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

How to properly assign image source to modal image display? – Photoshop

I am trying to show before and after pictures and clicking on either of them will display them as a modal. I am able to click on each image, get the modal window to open and get an image to fill the content for that modal display. The assignment seems to be working for the first image but why is it not working for the others?

HTML

<h4>Photoshop</h4>
<p>
    You should always strive to get the best shots without doing too much in post (if anything at all). But sometimes you find imperfections in your pictures, like a phantom spot due to a blemish on the camera sensor. Sometimes you do not get the color to pop. Your photo is over-exposed. The lighting was poor. So many factors both in and out of your control can prevent you from getting the most out of your pictures. And for situations such as these, proficiency in Photoshop is a must.
</p>
<p>Here are a few examples of how I used to photoshop to enrich my photos! These photos were taken on a Nikon D7100.</p>
<img id="photoshop" onclick="openModal(this);" src="images/frenchBefore.JPG" alt="Frenchie Before Photoshop"/>
<div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
    </div>
<img id="photoshop" onclick="openModal(this);" src="images/frenchAfter.jpeg" alt="Frenchie After Photoshop"/>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
    </div>
    <p>Look at the lefthand photo of an adorable French Bulldog I passed on the street in Chelsea. You can see the color is flat, and the dog has a few belmishes around his mouth and eyes, plus his face is rather dark. With some Photoshop healing and a little adjustment of warmth, saturation, smoothing, shadow and contrast the picture becomes more inviting. I wanted to recreate the warm feeling that I felt when I first saw him. &#9786;</p>
<img id="photoshop" onclick="openModal();" src="images/fatherBefore.jpeg" alt="Father Before Photoshop"/>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
                <div id="caption"></div>
    </div>
<img id="photoshop" onclick="openModal(this);" src="images/fatherAfter.jpeg" alt="Father After Photoshop"/>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
                <div id="caption"></div>
    </div>
    <p>
       Here we have a father and son enjoying a beautiful day in prospect park. This picture was taken using a telephoto 300mm lense from about 150 yards away. The first picture, while the sharpness and focus is precise, the color could still use a little bit of adjustment. I wanted to improve the vibrance of the surrounding foliage and grass, along with the father's hat to show the twead pattern. However, saturation of the clothing proved to be overkill. The red pants, the orange jacket are already bright and vibrant enough. Too much post production would make the colors overwhelming and take away from the warmth and subtley of the image. The picture is of a father and son enjoying a stroll in a park, not a lazer light show!
    </p>
<img id="photoshop" onclick="openModal(this);" src="images/beachBefore.jpeg" alt="Beach Before Photoshop"/>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
                <div id="caption"></div>
    </div>
<img id= "photoshop" onclick="openModal(this);" src="images/beachAfter.jpeg" alt="Beach After Photoshop"/>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
                <div id="caption"></div>
    </div>
    <p>
        This one I had a little more fun with. While there is a spot from a blemish on my sensor toward the top right of the image against the blue sky, some of these adjustments were made out of experimentation. The spot and the color needed adjustment, but removing the boat in the background through Photoshop healing was more for fun than neccesity.
    </p>
    <script src="js/modal.js" type="text/javascript"></script>

JAVASCRIPT

var modal = document.getElementById('myModal');
function openModal(){
   var img = document.querySelectorAll("[id^='photoshop']");


   var modalImg = document.querySelectorAll("[class^='modal-content']");
   for (var i = 0; i < img.length; i++){
for (var i = 0; i < modalImg.length; i++){
  modalImg[i].src = img[i].src;
  modal.style.display = "block";
   }
  }
}

  var span = document.getElementsByClassName("close")[0];

  span.onclick = function() {
 modal.style.display = "none";
 }
Tags:

2

Answers


  1. 0

    All images have same ID, all divs have the same ID…. you cannot use same ID for multiple elements. An ID is meant to be unique per element. You are having issue because the modal is taking src of first element of the ID.

    Login or Signup to reply.
  2. 0

    A few suggestions and things to note before showing the solution:

    • You don’t need to have a Modal div for each image. You can have one modal that will be used for all images
    • You cannot use the same ID for different elements. IDs have to be unique for all elements
    • Indentation is very important making your code look cleaner and easier to understand.

    So here is the solution. The ‘openModal’ function now has an ‘img’ parameter, so as to use the ‘this’ value that you are passing in the onclick of each image. I also added the caption by using the ‘alt’ tag from the image passed to the function:

    var modalDiv = document.getElementById("modalDiv");
function openModal(img){
    var modalImage = document.getElementById("modalImage");
    var modalCaption = document.getElementById("modalCaption");

    modalDiv.style.display = "block";
    modalImage.src = img.src;
    modalCaption.innerText = img.alt;
}

var span = document.getElementById("modalClose");
span.onclick = function() {
    modalDiv.style.display = "none";
}

    The Html code is now cleaned up by removing all the modals, and the common IDs from each image. The only IDs left are for the modal popup, which we are using to add the image details in the script. Also by default, the ‘modal’ is hidden:

    <img onclick="openModal(this);" src="images/FrenchBefore.jpg" alt="Frenchie Before Photoshop"/>
<img onclick="openModal(this);" src="images/frenchAfter.jpg" alt="Frenchie After Photoshop"/>
<p>Look at the left hand photo of an adorable French Bulldog I passed...</p>

<img onclick="openModal(this);" src="images/fatherBefore.jpeg" alt="Father Before Photoshop"/>
<img onclick="openModal(this);" src="images/fatherAfter.jpeg" alt="Father After Photoshop"/>
<p>Here we have a father and son enjoying a beautiful day in ...</p>

<img onclick="openModal(this);" src="images/beachBefore.jpeg" alt="Beach Before Photoshop"/>
<img onclick="openModal(this);" src="images/beachAfter.jpeg" alt="Beach After Photoshop"/>
<p>This one I had a little more fun with. While there is a spot...</p>


<div id="modalDiv" class="modal" style="display:none;">
  <span id="modalClose" class="close">&times;</span>
  <img id="modalImage" class="modal-content">
  <div id="modalCaption"></div>
</div>

<script src="js/modal.js" type="text/javascript"></script>

    Hope this helps you for your personal site! 🙂

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

Back To Top
Search