0

I have been asked to create an image gallery for a test website. I am currently trying to make an image gallery based on the code here: http://www.w3schools.com/howto/howto_css_modal_images.asp I was trying to see if it was possible to split the images into 4 columns instead of having all the images in a single column (11 images in each column)

The gallery look that I am going for is like this example gallery. The look of the gallery has been inspired by flexbox but I needed the pop up images to appear which is why I have based the code on w3schools modal images with some changes. I have been trying for a while now with no luck. Not sure if I have been staring at the code for too long but was hoping if someone can have a look and point me in the right direction please.

This is my code so far

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* Style the Image Used to Trigger the Modal */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0 4px;
}

.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    flex: 25%;
    max-width: 25%;
    padding: 4px;
    }

.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;
    width: 80%;
    max-width: 700px;
}

/* Add Animation - Zoom in the Modal */
.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%;
    }
}
</style>
</head>
<body>

<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Trigger the Modal -->
<img class="myImg" src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1cfqbl28ezKPikIXApzZQOEUPwKm2AKrr" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1I-bDFOoYZ-XUZkwDxRJmtiR_7DGVn_Eb" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1DU-S82guX9KooYyfDavkg1M_kpXAVrs1" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=10PElUch6-oxpjga6Pe6PoHd2VUXZkUfu" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1HAh9siwne5Fa39G2qIppry-aHrrFRrzb" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1TwVoVT9UxlmmQO125b-lD7kbswYqCdgy" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1YBHz72VKXRNUPge-h8pQvuVotim7LUq5" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1DU-S82guX9KooYyfDavkg1M_kpXAVrs1" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1y9uOpY2Uwht88vdYBJV8BD1FenayFQpr" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1cfqbl28ezKPikIXApzZQOEUPwKm2AKrr" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1I-bDFOoYZ-XUZkwDxRJmtiR_7DGVn_Eb" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1DU-S82guX9KooYyfDavkg1M_kpXAVrs1" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=10PElUch6-oxpjga6Pe6PoHd2VUXZkUfu" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1HAh9siwne5Fa39G2qIppry-aHrrFRrzb" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1TwVoVT9UxlmmQO125b-lD7kbswYqCdgy" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1YBHz72VKXRNUPge-h8pQvuVotim7LUq5" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1DU-S82guX9KooYyfDavkg1M_kpXAVrs1" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1y9uOpY2Uwht88vdYBJV8BD1FenayFQpr" alt="Trolltunga, Norway" width="300" max-width="300">

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">
</div>

<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 img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    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>

</style>
</head>
<body>

<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 img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    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>
uzi
  • 1
  • 1

1 Answers1

1

Have you considered using css columns (see: https://developer.mozilla.org/en-US/docs/Web/CSS/columns)

Wrap your image elements inside a div and style it as follows:

.image-container {
  width: 100%;
  columns: 4;
}

The only other change I made to your code was to set the max-width of the images to 100% (which is relative to the column width), dropped the flex rules, and reduced the padding slightly to give a smaller gap.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* Style the Image Used to Trigger the Modal */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0 4px;
}

.image-container {
  width: 100%;
  columns: 4;
}

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

    max-width: 100%;
    padding: 1px;
    }

.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;
    width: 80%;
    max-width: 700px;
}

/* Add Animation - Zoom in the Modal */
.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%;
    }
}
</style>
</head>
<body>

<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Trigger the Modal -->
<div class="image-container">
<img class="myImg" src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1cfqbl28ezKPikIXApzZQOEUPwKm2AKrr" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1I-bDFOoYZ-XUZkwDxRJmtiR_7DGVn_Eb" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1DU-S82guX9KooYyfDavkg1M_kpXAVrs1" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=10PElUch6-oxpjga6Pe6PoHd2VUXZkUfu" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1HAh9siwne5Fa39G2qIppry-aHrrFRrzb" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1TwVoVT9UxlmmQO125b-lD7kbswYqCdgy" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1YBHz72VKXRNUPge-h8pQvuVotim7LUq5" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1DU-S82guX9KooYyfDavkg1M_kpXAVrs1" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1y9uOpY2Uwht88vdYBJV8BD1FenayFQpr" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1cfqbl28ezKPikIXApzZQOEUPwKm2AKrr" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1I-bDFOoYZ-XUZkwDxRJmtiR_7DGVn_Eb" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1DU-S82guX9KooYyfDavkg1M_kpXAVrs1" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=10PElUch6-oxpjga6Pe6PoHd2VUXZkUfu" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1HAh9siwne5Fa39G2qIppry-aHrrFRrzb" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1TwVoVT9UxlmmQO125b-lD7kbswYqCdgy" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1YBHz72VKXRNUPge-h8pQvuVotim7LUq5" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1DU-S82guX9KooYyfDavkg1M_kpXAVrs1" alt="Trolltunga, Norway" width="300" max-width="300">

<img class="myImg" src="https://docs.google.com/uc?export=download&id=1y9uOpY2Uwht88vdYBJV8BD1FenayFQpr" alt="Trolltunga, Norway" width="300" max-width="300">
</div> <!-- end image-container div -->
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">
</div>

<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 img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    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>

</style>
</head>
<body>

<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 img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    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>
Dave Pritlove
  • 2,601
  • 3
  • 15
  • 14
  • OMG, thank you so much, I knew I was missing something really small, can't believe I didn't work this out. Thank you again – uzi Apr 21 '22 at 02:03