Forum:

HTML Pages with CSS and JavaScript

How do I define different sizes of a modal image within one webpage?

Greenhorn

Posts: 9

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I found code at w3schools for opening thumbnails into full-sized modal images that works really well, except that some of the images are very wide panoramas, and the definition I am using for the modal (60% width) does not work well for these wider images, which are very short as a result. The other images fill the screen vertically at 60% width, but not the panoramas. How can I create a different definition for the panoramas? I wanted to post my code but I don't understand the directions for doing so and I am afraid of doing it incorrectly. I think my question is virtually meaningless without the code. Thanks for any directions you can provide. Is there a video tutorial anywhere on how to post your code to this site?

Carey Brown

Bartender

Posts: 10978

I like...

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

To post your code just cut-n-paste the code. Then drag the cursor over the code so that it is highlighted. Then click on the 'Code' button just above the edit window. To see if it worked click on the 'Preview' button below the edit window. The code should appear in the preview window with line numbers.

JavaRanch-FAQ HowToAskQuestionsOnJavaRanch UseCodeTags DontWriteLongLines ItDoesntWorkIsUseLess FormatCode JavaIndenter SSCCE API-17 JLS JavaLanguageSpecification MainIsAPain KeyboardUtility

Barton Lewis

Greenhorn

Posts: 9

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thank you. Here it is. It's mich longer than the 20 lines of code you recommend in the FAQ, but I stripped out everything that I thought was not essential to the problem and left what I thought was in. This is my first post. Trial by error.

<!DOCTYPE HTML>
<html>
<head>
<style>
.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    vertical-align: middle;
}
.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;
    }

</style>
</head>
<body>
    <section class="gallery">
        <div><img class="myImg"  src="http://bartonlewisfilm.com/img_157-229_tb.jpg" alt="157-229, 96th St., IND Eighth Ave. Line" width="187" height="142" /></div>
            
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>
        <div><img class="myImg"  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 class="myImg"  src="http://bartonlewisfilm.com/img_214-015.jpg" alt="214-015, 182nd-183rd Sts., IND Concourse Line" width="199" height="142" /></div>
</section>
    <script>
// Get the modal
var modal = document.getElementById('myModal');
// 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("myImg");

for(var i=0;i<imageArray.length;i++){
    var img = imageArray[i];
    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>

Carey Brown

Bartender

Posts: 10978

I like...

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'm afraid you've posted on a "Java" forum. What you posted is "JavaScript", not "Java" (aside from the annoying name similarities).

JavaRanch-FAQ HowToAskQuestionsOnJavaRanch UseCodeTags DontWriteLongLines ItDoesntWorkIsUseLess FormatCode JavaIndenter SSCCE API-17 JLS JavaLanguageSpecification MainIsAPain KeyboardUtility

Barton Lewis

Greenhorn

Posts: 9

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Of course, silly me, not paying close attention. Thank you. I will repost to the correct forum.

Barton Lewis

Greenhorn

Posts: 9

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thank you. I see that the version of the page I posted uses a height: 70% as opposed to width: 60% definition, as referenced in my post. Sorry for the error/confusion. But the problem is the same: the panorama spills over the edges of the screen while displaying correctly for the other 2 images. So I need something like height: 50% for the panorama - just not sure how to write the code to get 2 different classes of images.

Eliminate 95% of the weeds in your lawn by mowing 3 inches or higher. Then plant tiny ads:

Smokeless wood heat with a rocket mass heater

https://woodheat.net