Skip to content

image resizable via javascript (modal image) #89

@DoctorSubtilis

Description

@DoctorSubtilis

I tried to adapt your script to an imagemap on an image resized by a javascript, a modal image. But so far, unsuccessfully.
This is my code:

css

`/* modal images BEGIN */

img[onclick] {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden;
max-width:400px; cursor:pointer;
transform: scaleX(1.0) scaleY(1.0);
}

.galleria .modal-hover-opacity img {max-width:300px;
max-height: 50vh;}

img[onclick]:hover {
opacity:0.60;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden;
}

.modal {
z-index: 5;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
display: none; /* hide initially*/
justify-content: center;
align-items: center;
}
.modal-content {
margin: auto;
}

#modalimg {
width: auto;
height: auto;
display: block;
margin: auto;
max-height: calc(100vh - 2rem);
max-width: calc(100% - 2rem);
object-fit: fill;
border: 5px solid #000;
}

.modal-content {
animation: fade 2s ease;
}
@Keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

#modalimg {
animation: zoom 1s ease;
}
@Keyframes zoom {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}

/* modal images END */`

html

 <map name="mymap">  
    [several area shapes]  
  </map>  
 <p>  
 <img class='fl' width="400px" alt='' tabindex='1' onclick='onClick(this)' usemap='#mymap' src='my-path/my-image.jpg' />  
 </p>  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>  
 <script type="text/javascript">  
  imageMapResize();  
 </script>  

 <div id="modaldiv" class="modal" onclick="this.style.display='none'">  
   <div class="modal-content">  
    <img id="modalimg" style="max-width:100%" />  
   </div>  
  </div>    

javascript

 function onClick(element) {  
  document.getElementById("modalimg").src = element.src;  
  document.getElementById("modaldiv").style.display = "flex";  
}  

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions