multiple width/height values for modal images

bartonlewis · April 21, 2018

I found code for displaying thumbnails that open as full size images at w3schools here: https://www.w3schools.com/howto/howto_css_modal_images.asp

This works really well but I have one problem: Some of the images are really wide panoramas. If I give a width of 60% for the modal content then the regular sized images display well on the screen, taking up the full vertical space, but the panoramas - while occupying the same horizontal space - are very short. And if I define the width as 90%, then while the panoramas fit beautifully on the screen, the regular size images do not fit vertically. I would like to have 2 different definitions for the 2 classes of images so both can optimally display - filling the screen top to bottom for the regular images and side to side for the panoramas. Is there any way to do this? Thanks.

dsonesuk · April 21, 2018

You need to check height against width using javascript, once images are loaded, then add class of landscape or portrait depending on outcome. Then use javascript to adjust modal to class of image.

bartonlewis · April 23, 2018

Thanks, but I am not an experienced user of javascript, and would need guidance on how to do this. I read the "posting tips" on how to post your code, and there are nothing but blank boxes under each tip. What's that all about? I clicked the contact button at the bottom of the page to ask but did not hear back. So I have gone ahead and posted my code here. If you are able to show me what exactly I need to do with regard to your instructions to "check height against width using JavaScript" and "use JavaScript to adjust modal to class of image" I would be very grateful. Thank you.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
    <script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
    <meta charset="UTF-8">
<title>Barton's website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
    /* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, paragraph {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
    /*THIS IS THE END OF THE MYER RESET*/

.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* 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;
    height: 70%;

}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    font-family: "europa",sans-serif;
    font-size: 120%;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.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)}
to {-webkit-transform:scale(1)}
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

html {
    background-color: white;
    }
body {
    width: auto;
   margin: 0 auto 0;
    }
.gallery {
    width: auto;
    height: auto;
    display: flex;
    padding: 50px;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    }
.photo {
    padding: 20px;
    }
.photo img {
    padding: 30px;
    }
.photobox {
    vertical-align: middle;
    }

</style>
</head>
<body>

<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

        <div><img id="myImg" class="photobox" src="http://bartonlewisfilm.com/img_214-099_368.jpg" alt="214-069, 182nd – 183rd Sts., IND Concourse Line" width="519" height="142" /></div>

        <div><img id="myImg" class="photobox" src="http://bartonlewisfilm.com/img_214-015.jpg" alt="214-015, 182nd-183rd Sts., IND Concourse Line" width="199" height="142" /></div>

</section>

// Get the image and insert it inside the modal - use its "alt" text as a caption
var modal = document.getElementById('myModal');
var imageArray = document.getElementsByClassName("photobox");

for(var i=0;i<imageArray.length;i++){
    var img = imageArray;
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
};

</script>

</body>
</html>

dsonesuk · April 23, 2018

Click the '<>' icon or place code in [ code ] code here [ /code ] (without the spaces within square braces), if you don't do this, any code that represents hand formatting such as '[ i ]' (without spaces) used in for loop, is treated as wanting italic as you can see from your posting.

Your code is already wrong before we can start, you can't have multiple identical id attribute values on same page. Validate your code at https://validator.w3.org/.

You are already looping through images, so at the same time compare width and height with

var prop_diff = img.naturalWidth / img.naturalHeight;

if value returned is greater than 1 then its landscape.

else if less than 1 then its portrait.

else equal even sided.

Up to to you if you want to be more specific, these values can then be passed to modal-content as a class name, on the click of a specific image, you then reflect the size you want using css.

bartonlewis · April 24, 2018

Thanks. I changed the id's to classes and ran my code through the Validator, and now I'm just getting errors for not having section headings.

I copied the line of code you supplied beginning with "var" into the script section of my code. I pasted it into 2 spots: both before and after the "for" statement. In the former case, it stopped the thumbnails from opening, in the latter it had no effect.

I guess that there is additional code I need to supply but I don't know what it is. I have basically no experience with js. I don't know if it's customary here as in stackoverflow to write the code for someone as opposed to explaining what needs to be done but if it's possible to modify what I supplied above, I would appreciate it. I did try to find out more about the code you supplied by Googling it and got some hits about the Image natural Width Property but didn't understand it. Thank you for any direction you can provide.

Sign In

multiple width/height values for modal images

Recommended Posts

bartonlewis

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

bartonlewis

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

bartonlewis

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity