web148
August 29, 2022, 3:01pm
#1
I have found this code, working and quite fitting with my aims. But I would fix the movement toward the bottom: it is not necessary, nor nice to go “to the hell” (I mean below the screen). It could be enough a narrower movement.
This the code:
<html>
<head>
<style>
.modal {
z-index:1;
display:none;
padding-top:10px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.2)
}
.modal-content{
margin: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden
}
.modal-hover-opacity:hover {
opacity:0.60;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden
}
.close {
text-decoration:none;
float:right;
font-size:24px;
font-weight:bold;
color:white;
}
.container1 {
width:200px;
display:inline-block;
}
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0.5)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0.5)}
to {transform:scale(1)}
}
</style>
</head>
<body>
<div class="container1">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="max-width:100%;cursor:pointer"
onclick="onClick(this)" class="modal-hover-opacity">
</div>
<div class="container1">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUyNzk3MjA1OF5BMl5BanBnXkFtZTcwMTE1Njg2MQ@@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="max-width:100%;cursor:pointer"
onclick="onClick(this)" class="modal-hover-opacity">
</div>
<div class="container1">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTM0MDgwNjMyMl5BMl5BanBnXkFtZTcwNTg3NzAzMw@@._V1_.jpg" style="max-width:100%;cursor:pointer"
onclick="onClick(this)" class="modal-hover-opacity">
</div>
<div class="container1">
<img src="http://www.filmosphere.com/wp-content/uploads/2013/04/Iron-Man-3-affiche1-300x400.jpg" style="max-width:100%;cursor:pointer" onclick="onClick(this)" class="modal-hover-opacity">
</div>
<div id="modal01" class="modal" onclick="this.style.display='none'">
<span class="close">× </span>
<div class="modal-content">
<img id="img01" style="max-width:100%">
</div>
</div>
<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
</body>
</html>
web148
August 29, 2022, 3:14pm
#2
I noticed that I have to work with
.modal-content{
(...)
top: 1%;
left: 50%;
transform: translate(1%, -1%);
}
The best would be a) a centered expanded image, and b) not going out of the screen.
Can you help me?
PaulOB
August 29, 2022, 9:02pm
#3
I’m on a mobile at the moment so can’t test properly but if the issue is the centring then use flexbox instead of the transform.
e.g.
.modal {
z-index: 1;
padding-top: 10px;
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.2);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
border: 1px solid red;
}
1 Like
web148
August 30, 2022, 4:18am
#4
Thank you. Indeed I had thought something similar:
.modal-content{
margin: auto;
/*display: block;
position: absolute;*/
display: flex;
justify-content: center;
align-items: center;
/*top: 5%;*/
/*right: 25%;*/
transform: translate(1%, 1%);
/*top: 1%;
left: 12%;
transform: translate(1%, -1%);*/
}
It seems like your code, but after changing background-color:rgba(0,0,0,0.2); to background-color:rgba(0,0,0,0.4); my code works better avoiding a too dark whole screen.
But (in both cases) I can’t get the vertical center
PaulOB
August 30, 2022, 4:45am
#5
web148:
can’t get the vertical center
I’d need to see a full demo as you should have something like this now.
1 Like
web148
August 30, 2022, 6:20am
#6
You can however see the code (the mine one) working (somehow, but not vertically centered) here.
PaulOB
August 30, 2022, 7:24am
#7
web148:
(somehow, but not vertically centered)
You haven’t applied the flex rules to the modal as I mentioned. You applied the rules to the modal content which is wrong and then still left the transforms in place!
The code in my codepen is all you need but you will need to change the toggle of the js to say display:flex and not display:block or you break it all once again.
e.g.
//per modal-images (quasi pop-up)
function onClick(element) {
document.getElementById("modalimg").src = element.src;
document.getElementById("modaldiv").style.display = "flex";
}
Here’s a very rough codepen using your code although you really should avoid inline event handlers and move them to the js instead but that’s a question for the js forum.
2 Likes
web148
August 30, 2022, 2:25pm
#9
Thank you! I see.
But what do you mean by “re-instate the above line in a working page” ?
EDIT
Besides, in your code how can I get a transition effect?
PaulOB
August 30, 2022, 3:57pm
#10
web148:
But what do you mean by “re-instate the above line in a working page” ?
I hard coded the full image source in my demo but you are grabbing the image source from the thumbnail so you need to revert to that method of supplying the image.
web148:
Besides, in your code how can I get a transition effect?
Much the same as you did with a keyframe.
e.g.
1 Like
web148
August 30, 2022, 4:43pm
#11
Thank you. I will try later with my website, but in a single file I see that the zoom effect (that I prefer) would be quite ugly because of the opacity of the “growing” frame.
PaulOB
August 30, 2022, 7:13pm
#12
web148:
I see that the zoom effect (that I prefer)
Just add another keyframe for the image.
1 Like
web148
August 31, 2022, 4:09am
#13
Very nice, thank you!
I need some further attempts today to adapt it to my website.
EDIT
I noticed (only now: stupid me) that you have changed the html of my code: no contanier1 div and (therefore, I guess) two different images (the small one and the big one). I will see if it is possible to use the same image (as in the original code).
EDIT
I have to do some other attempts, but the following code, so far, seems work:
css
.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden;
max-width:200px;cursor:pointer;
max-height: 50vh;
}
.modal-hover-opacity:hover {
opacity:0.60;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden;
}
.container1 {
width:200px;
/*display:inline-block;*/
}
.modal {
z-index: 99;
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: flex; when shown*/
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: contain;
border: 5px solid #000;
}
.close {
position: absolute;
right: 25px;
top: 25px;
z-index: 2;
background: #000;
color: #fff;
cursor: pointer;
width: 25px;
height: 25px;
display: flex;
font-size: 1.5rem;
justify-content: center;
align-content: center;
}
.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);
}
}
js
function onClick(element) {
document.getElementById("modalimg").src = element.src;
document.getElementById("modaldiv").style.display = "flex";
}
html
not changed from my original, that is
<ul>
<li class="container1">
<img src="giotto_celano.jpg" alt="la morte del cavaliere da Celano"
onclick="onClick(this)" class="modal-hover-opacity" /> La morte del cavaliere da Celano
</li>
</ul>
<div id="modaldiv" class="modal" onclick="this.style.display='none'">
<span class="close">× </span>
<div class="modal-content">
<img id="modalimg" style="max-width:100%" />
</div>
1 Like
web148
August 31, 2022, 2:20pm
#15
Yes, it works. I’m doing some further improvements (simplifying my code, thank to your help).
I.g. i have removed close button, or the container1 div. And I noticed that is possible avoid even to set a modal-hover-opacity class, with the following code
.modal-hover-opacity img, img[onclick] { (...)
}
.modal-hover-opacity img:hover, img[onclick]:hover {(..)}
When I finish my changes I will let you know the final result.
Very well!!!
Thank you, very, very much!!!
1 Like
system
closed
November 30, 2022, 9:20pm
#16
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.