How to create a responsive image gallery using HTML, CSS and jQuery-JS Tutorial-php.cn

How to create a responsive image gallery using HTML, CSS and jQuery

王林

Release： 2023-10-27 16:19:50

Original

1381 people have browsed it

How to create a responsive image gallery using HTML, CSS and jQuery

Foreword:
With the popularity of mobile devices, responsive design has become a modern One of the important standards of web design. In this article, we’ll cover how to create a responsive image gallery using HTML, CSS, and jQuery. This image gallery allows us to display and elegantly handle images of various sizes on different devices and provide interactive features.

HTML structure:
First, we need to create a basic HTML structure for the image gallery. Below is a simple HTML template that you can modify according to your needs.

<!DOCTYPE html>
<html>
<head>
  <title>响应式图片库</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="gallery">
    <div class="image">
      <img src="image1.jpg" alt="Image 1">
      <div class="overlay">
        <a href="image1.jpg" target="_blank">查看大图</a>
      </div>
    </div>
    <!-- 添加更多图片 -->
  </div>
</body>
</html>

Copy after login

CSS styling:
Next, we need to style the image gallery using CSS. Below is a simple CSS example that you can modify to suit your needs.

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.image {
  position: relative;
  margin: 10px;
  flex: 1 0 calc(25% - 20px);
}

.image img {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overlay a {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  padding: 10px 20px;
  border: 2px solid #fff;
  transition: background-color 0.3s ease;
}

.overlay:hover {
  opacity: 1;
}

.overlay:hover a {
  background-color: #fff;
  color: #000;
}

Copy after login

jQuery Interaction:
Finally, we use jQuery to add some interactive features to the image gallery. The following code example shows how to toggle the size of an image when clicked.

$(document).ready(function() {
  $(".image").click(function() {
    $(this).toggleClass("enlarged");
  });
});

Copy after login

In this example, we use jQuery's .toggleClass() function to switch the style class name "enlarged" when the image is clicked. We can add the .enlarged class to the CSS style to adjust the size of the clicked image.

.enlarged {
  flex: 0 0 50%;
}

Copy after login

In this way, when the user clicks on an image, it will be enlarged to half of its original size.

Conclusion:
By using HTML, CSS and jQuery, we can easily create a responsive image gallery. In this image gallery we can display and process images of various sizes and provide interactive features for each image. I hope this article helped you create your own responsive image gallery!

The above is the detailed content of How to create a responsive image gallery using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!