Jump to content

bartonlewis

Members
  • Content count

    5
  • Joined

  • Last visited

Community Reputation

0 Neutral

About bartonlewis

  • Rank
    Newbie
  • Birthday May 3

Contact Methods

  • Website URL
    www.bartonlewisfilm.com

Profile Information

  • Gender
    Male
  • Location
    Brooklyn, NY

Previous Fields

  • Languages
    html, css
  1. bartonlewis

    multiple size definitions for modal images

    Are duplicate postings not allowed? I don't see that listed in guidelines/netiquette. I posted it here because I didn't get an answer to my last post on the css page, which was basically to ask someone to modify the code I had provided to show me what I needed to do. I am not sufficiently versed in javascript to do this, athough I attempted it. I thought perhaps the query was more suited to the JavaScript page, which is why I duplicated it here.
  2. I found code for opening thumbnails using modal images at w3schools here: https://www.w3schools.com/howto/howto_css_modal_images.asp This code works well for me except for one problem: while most of the images display well on screen defining a width of 60%, which enables the image to fill the screen top to bottom, some of the images are panoramas and this 60% width restriction creates very short images top to bottom. I would like a separate definition for the panoramas that enables them to fill 90% of the width of the screen. I am not an experienced javascript user so I don't know how to do this. Can anyone help? I have attached the file with html, css and js in it. Thank you. so.html
  3. bartonlewis

    multiple width/height values for modal images

    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.
  4. bartonlewis

    multiple width/height values for modal images

    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"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <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> <section class="gallery"> <div><img id="myImg" class="photobox" src="http://bartonlewisfilm.com/img_157-229_tb.jpg" alt="157-229, 96th St., IND Eighth Ave. Line" width="187" height="142" /></div> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">&times;</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> <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("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>
  5. 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.
×