displaying images properly and javascript

by

ok so, I have a website that I want to put all of my photos on, and so far I have a portrait section, however, it doesn’t display properly, I want it in rows just so it looks neat and tidy, and also when you click on the image it opens it up bigger at the bottom of the page when an image is clicked, I want the page to automatically go down to the image, but also I want it to open a different image, so I can have the high res being displayed at the bottom, and I know for this is all CSS and javascript, but I’m not overly too sure about these.

also, could even have it so on computer it puts all the images in a line that you can scroll across, after you have clicked the picture and got the big one up, then when you click the x on the big picture it puts them back into columns

here is the website so you can see what I want to do. click here to go to the portrait page I’m on about

and here is the code

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
.text {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 5px 5px 5px #ababab;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.link {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.link:hover {
  color: grey;
  font-weight: normal;
  text-decoration: none;
}

.text2 {
  font-family: Comic Sans MS;
  font-size: 1em;
  display: inline;
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 200px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
  font-family: Comic Sans MS;
  font-size: 2em;
}

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 25%;
  padding: 10px;
}

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  position: relative;
  display: none;
}

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
<!DOCTYPE html>
<html amp lang="en">

<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <meta name="viewport" content="width=device-width" />
  <meta property="og:description" content="Tyler Rawlings Photography">
  <meta property="og:url" content="https://tylerphotography.tk">
  <meta property="og:title" content="Tyler Rawlings Photography">
  <meta name="theme-color" content="#D500FF">
  <meta content="Tyler Rawlings Photography" property="og:title">
  <meta name="og:site_name" content="">
  <meta name="twitter:title" content="Tyler Rawlings Photography">
  <meta name="twitter:description" content="Tyler Rawlings Photography">
  <meta content="Tyler Rawlings Photography" property="og:description">
  <meta property="og:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="twitter:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="og:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="robots" content="index, follow">
  <title>Tyler Rawlings Photography - About</title>

  <link rel="icon" href="/static/icon.ico" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">
</head>

<body>
  <center>
    <p class='text' style="font-family:Comic Sans MS; font-size: 3em;">Tyler Rawlings</p>
    <p class='text' style="font-family:Comic Sans MS; font-size: 2em;">Photography</p>
    <br>
    <br>
    <a class='link' href='/'>
      <p class='text2'>Home</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/about'>
      <p class='text2'>About</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/equipment'>
      <p class='text2'>Equipment</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='https://www.instagram.com/drumsnaps' target='_blank'>
      <p class='text2'>Instagram</p>
    </a>
    <br>
    <br>
    <p class='text' style="font-family:Comic Sans MS; font-size: 2em;">Portraits</p>
    <br>

    <div class="row">

      <div class="column">
        <img src="./static/nancysc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/decsadsc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/decsc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/joesc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/dadsc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/paisleysc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/deccorn.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/grandpop.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/robinsmoke.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/danny.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/james.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/taxman.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/strangerthingsjoe.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

    </div>

    <div class="container">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
    </div>



  </center>
</body>

</html>
Contents hide
Answers:
Method 1
Method 2
Method 3

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I changed some things in your HTML and CSS – maybe it helps:

  1. Added a <base href="..."> tag to the <head> section to make the example working here (now it displays the images)
  2. Replaced div class row by class image-container
  3. Made image-container a flex layout container with wrapping
  4. Replaced div class column by class image
  5. Added some new CSS to the bottom
    • The <div> elements hosting the images have a fixed size now and hide the overflow. This way we get a nice grid
    • Applied a max-width to the <img> elements and removed the inline style width: 100%. This way the images keep the ratio.
  6. Made the “preview” div element an absolutely positioned overlay. Removed the class attribute and assigned an id with appropriate ID selector in the CSS code

You can play a little bit with the width/height values in the CSS to change the size of the thumbnail images.

Please have a look at this working example:

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  document.getElementById('container').style.display = "block";  
}
.text {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 5px 5px 5px #ababab;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.link {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.link:hover {
  color: grey;
  font-weight: normal;
  text-decoration: none;
}

.text2 {
  font-family: Comic Sans MS;
  font-size: 1em;
  display: inline;
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 200px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
  font-family: Comic Sans MS;
  font-size: 2em;
}

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 25%;
  padding: 10px;
}

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}





/* New CSS */

.image-container {
  display: flex;
  flex-wrap: wrap;
}

.image {
  width: 200px;
  height: 200px;
  margin: 10px;
  overflow: hidden;
  cursor: pointer;
}

.image img {
  max-width: 200px;
}

#container {
  position: absolute;
  left: calc(50% - 300px);
  top: 10%;
  width: 600px;
  padding: 20px;
  background-color: white;
  overflow: hidden;
}
<!DOCTYPE html>
<html amp lang="en">

<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <base href="https://tyler.photography/" rel="nofollow noreferrer noopener">
  <meta name="viewport" content="width=device-width" />
  <meta property="og:description" content="Tyler Rawlings Photography">
  <meta property="og:url" content="https://tylerphotography.tk">
  <meta property="og:title" content="Tyler Rawlings Photography">
  <meta name="theme-color" content="#D500FF">
  <meta content="Tyler Rawlings Photography" property="og:title">
  <meta name="og:site_name" content="">
  <meta name="twitter:title" content="Tyler Rawlings Photography">
  <meta name="twitter:description" content="Tyler Rawlings Photography">
  <meta content="Tyler Rawlings Photography" property="og:description">
  <meta property="og:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="twitter:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="og:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="robots" content="index, follow">
  <title>Tyler Rawlings Photography - About</title>

  <link rel="icon" href="/static/icon.ico" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">
</head>

<body>
  <center>
    <p class='text' style="font-family:Comic Sans MS; font-size: 3em;">Tyler Rawlings</p>
    <p class='text' style="font-family:Comic Sans MS; font-size: 2em;">Photography</p>
    <br>
    <br>
    <a class='link' href='/'>
      <p class='text2'>Home</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/about'>
      <p class='text2'>About</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/equipment'>
      <p class='text2'>Equipment</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='https://www.instagram.com/drumsnaps' target='_blank'>
      <p class='text2'>Instagram</p>
    </a>
    <br>
    <br>
    <p class='text' style="font-family:Comic Sans MS; font-size: 2em;">Portraits</p>
    <br>

    <div class="image-container">

      <div class="image">
        <img src="./static/nancysc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/decsadsc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/decsc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/joesc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/dadsc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/paisleysc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/deccorn.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/grandpop.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/robinsmoke.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/danny.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/james.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/taxman.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/strangerthingsjoe.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

    </div>

    <div id="container" style="display: none">
      <div onclick="this.parentElement.style.display='none'" class="closebtn">&times;</div>
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
    </div>
  </center>
</body>

</html>

Method 2

For the same size pictures, try to put them in same width and height, for example, make a css class .img { height: 160px;width: auto;} Try this, and put margins for spacing between them.
Sorry if this doesnt help, i think this is your problem, good luck with it 😀

Method 3

/*
  find the dialog...
*/
let dialog=document.querySelector('dialog');

/* 
  simple object that defines methods for opening/closing a dialog 
  but also adds 2 event listeners specifically to close the modal
  if the user clicks on the modal or loses focus
*/
let modal={
  open:()=>{
      if( dialog.showModal ) dialog.showModal();
      else dialog.setAttribute('open',true);
      
      dialog.addEventListener('click',(e)=>{
        modal.close()
      });
      dialog.addEventListener('blur',(e)=>{
        modal.close()
      });
  },
  close:()=>{
      if( dialog.close )dialog.close();
      else dialog.removeAttribute('open');
  }
}; 

/* 
  assign an event listener to each div within the `.row` container
  - invoke the modal on click and set the properties of the child 
  elements.
*/
document.querySelectorAll('.columns > .column').forEach(n=>n.addEventListener('click',function(e){
  let img=this.querySelector('img')
  dialog.querySelector('img').src=img.src;
  dialog.querySelector('div').textContent=img.src;
  modal.open();
}));
/* unmodified rules */
.text {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 5px 5px 5px #ababab;
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.link {
  color: black;
  font-weight: bold;
  text-decoration: none;
}
.link:hover {
  color: grey;
  font-weight: normal;
  text-decoration: none;
}
.text2 {
  font-family: Comic Sans MS;
  font-size: 1em;
  display: inline;
}
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 200px;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
  font-family: Comic Sans MS;
  font-size: 2em;
}
* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 25%;
  padding: 10px;
}
.column img {
  opacity: 0.8;
  cursor: pointer;
}
.column img:hover {
  opacity: 1;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.container {
  position: relative;
  display: none;
}
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}















/* new rules */
dialog::backdrop{
  background:rgba(0,0,0,0.85)
}
.columns{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
}
.columns > .column{
  margin:1rem!important;
  width:300px;
}
dialog[open]{
  border:5px solid black;
  border-radius:1rem;
  padding:1rem;
  
  min-width:500px;
  min-height:300px;
  
  display:block;
  z-index:10;
}
dialog[open] img{
  margin:1rem;
  outline:1px solid grey;
}
dialog[open] div{
  margin:0.25rem 0;
  color:blue;
}
.column > img{
  width:200px;
}
<center>
  <!--
  
    rather than using <br> tags to create layout
    or adding inline styles to elements that 
    should all be handled in CSS. The aim always
    is to separate presentation, style and behaviour
    by using separate files to help with maintenance
    and development. 
    
    The fewer tags you can use the 
    quicker a page will load  (might be hard to 
    discern sometimes)
    
    Leverage the power in CSS to control the layout!
    
  -->
  
  
    <p class='text'>Tyler Rawlings</p>
    <p class='text'>Photography</p>
    
    <a class='link' href='/'>Home</a>
    <a class='link' href='/about'>About</a>
    <a class='link' href='/equipment'>Equipment</a>
    <a class='link' href='//www.instagram.com/drumsnaps' target='_blank'>Instagram</a>

    <p class='text' >Portraits</p>


    <div class="row columns">

      <div class="column">
        <img src="//placekitten.com/300/500?image=1" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=2" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=3" alt="Portraits" />
      </div>      
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=4" alt="Portraits" />
      </div>      
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=5" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=6" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=7" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=8" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=9" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=10" alt="Portraits" />
      </div>
      
    </div>
    
    
    
    <dialog>
        <img />
        <div id='imgtext'></div>
    </dialog>
    
</center>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x