CSS billedgalleri

Indholdsfortegnelse

    Vis indholdsfortegnelse

CSS kan bruges til at oprette et billedgalleri.

Cinque Terre
Add a description of the image here
Forest
Add a description of the image here
Northern Lights
Add a description of the image here
Mountains
Add a description of the image here

Billedgalleri

Følgende billedgalleri er oprettet med CSS:

Eksempel

<html>
<head>
<style>
div.gallery {
  margin: 5px;
    border: 1px solid #ccc;
    float: left;
  width: 180px;
}

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

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

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

  <div class="gallery">
  <a target="_blank" href="img_5terre.jpg">
    
  <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  
  </a>
  <div class="desc">Add a description of the image here</div>
  </div>
<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    
  <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  
  </a>
  <div class="desc">Add a description of the image here</div>
  </div>
<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    
  <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  
  </a>
  <div class="desc">Add a description of the image here</div>
  </div>
<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    
  <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  
  </a>
  <div class="desc">Add a description of the image here</div>
  </div>

</body>
</html>

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

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

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

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="img_5terre.jpg">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Flere eksempler

Responsivt billedgalleri

Sådan bruger du CSS-medieforespørgsler til at skabe et responsivt billedgalleri, der vil se godt ud på desktops, tablets og smartphones.

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  border: 1px solid #ccc;
}

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

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

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Responsive Image Gallery</h2>

<h4>Resize the browser window to see the effect.</h4>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_5terre.jpg">
      <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_lights.jpg">
      <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_mountains.jpg">
      <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  <p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>

</body>
</html>

Avanceret: Klikbare modale billeder (JS)

Et eksempel på hvordan man bruger JavaScript sammen med CSS til at vise klikkede billeder i en modalboks.

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
/* The Image Box */
div.img {
  border: 1px solid #ccc;
}

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

/* The Image */
div.img img {
  width: 100%;
  height: auto;
  cursor: pointer;
}

/* Description of Image */
div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

/* Add Responsiveness */
.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

/* 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;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  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 {transform:scale(0)} 
  to {transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0.1)} 
  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;
}

/* Responsive Columns */
@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
  .modal-content {
    width: 100%;
  }
}

@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}

/* Clear Floats */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2 style="text-align:center">Advanced Image Gallery</h2>

<div class="responsive">
  <div class="img">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
    <div class="desc">Cinque Terre</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    <div class="desc">Forest Bridge</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="img_lights.jpg" alt="Northern Lights" width="300" height="200">
    <div class="desc">Northern Lights, Norway</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="img_mountains.jpg" alt="Mountains" width="300" height="200">
    <div class="desc">Beautiful Mountains</div>
  </div>
</div>

<div class="clearfix"></div>

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">�</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// 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";
}

// Get all images and insert the clicked image inside the modal
// Get the content of the image description and insert it inside the modal image caption
var images = document.getElementsByTagName('img');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;
for (i = 0; i < images.length; i++) {
  images[i].onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.nextElementSibling.innerHTML;
  }
}
</script>

<div style="padding:6px;">
  <p>This example combines CSS (animation and media queries) and JavaScript, to create a responsive image gallery that will enlarge an image when it is clicked on.</p>
</div>

</body>
</html>