Javascript imagem modal cada um com sua div

[Bruna Siqueira]

Boa tarde

peguei um script de imagem modal para montar um cardapio, porém não consigo multiplicar, todas as imagens e links abrem o mesmo modal.

Ja tentei enumerar, mas não abria

Segue codigo html e o javascript

<img src="cardapiocarnesmassas.png" style="width:50px; height: 50px;" onclick="openModal()" class="hover-shadow cursor">
    <img src="cardapiopetiscos.png" style="width:50px; height: 50px;" onclick="openModal()" class="hover-shadow cursor">
    
<!-- Janela1 -->
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
<img src="cardapiocarnesmassas.png">
</div> 
    <!-- Janela2 -->
    <div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
<img src="cardapiopescados.png"cardapiocarnesmassas.png"">
</div> 

<script>
function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}
</script>

 

[washalbano]

Olá!
Tente assim:
 

<div class="container">
    <img src="cardapiocarnesmassas.png" style="width:50px; height: 50px;" onclick="openModal(this.src)"
         class="hover-shadow cursor">
    <img src="cardapiopetiscos.png" style="width:50px; height: 50px;" onclick="openModal(this.src)"
         class="hover-shadow cursor">

    <!-- Janela1 -->
    <div id="myModal" class="modal">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            <img id="modal-image" src="cardapiocarnesmassas.png">
        </div>
    </div>
</div>
<script type="text/javascript">
    function openModal(retrato) {
        document.getElementById('modal-image').src = retrato;
        document.getElementById('myModal').style.display = "block";
    }

    function closeModal() {
        document.getElementById('myModal').style.display = "none";
    }
</script>

 

[Bruna Siqueira]

valeeeu! deu certo

 

@washalbano puts na verdade preciso ter uma miniatura personalizada por ser cardapio, por isso não posso só expandir a imagem

[washalbano]

Olá!
No lugar de this.src, coloque o endereço da outra imagem(a imagem que deve aparecer na modal).