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

How to use HTML, CSS and jQuery to create a picture gallery with filtering function

With the development of the Internet, more and more people are beginning to have their own Photo gallery to store and display your own photos. In order to better manage and display images, we can use HTML, CSS and jQuery to create an image gallery with filtering capabilities. This article will detail how to implement this feature, with specific code examples.

1. HTML Structure

First, we need to create a basic HTML structure to display the image gallery. We can use the div element as a container for the entire image gallery, and use the ul list to display photos.

<div id="gallery">
  <ul class="image-list">
    <li class="image-item">
      <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
    </li>
    <li class="image-item">
      <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
    </li>
    <li class="image-item">
      <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3">
    </li>
    <!-- 更多图片项 -->
  </ul>
</div>

2. CSS Styles

Next, let’s add some basic styles to the image gallery. You can use CSS to style, layout, and animate images.

#gallery {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.image-item {
  width: 300px;
  margin-bottom: 20px;
}

.image-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  transition: transform 0.3s;
}

.image-item img:hover {
  transform: scale(1.1);
}

3. Filtering function implementation

Now, we will implement the filtering function. For example, we can filter based on the tags or categories of images. We can add a filter button group above the picture gallery. When the user clicks the button, only pictures of the corresponding category will be displayed.

<div id="filters">
  <button class="filter-button" data-filter="all">全部图片</button>
  <button class="filter-button" data-filter="nature">自然风景</button>
  <button class="filter-button" data-filter="travel">旅行摄影</button>
  <button class="filter-button" data-filter="food">美食</button>
</div>

In JavaScript, we will use jQuery to handle button click events and show or hide images based on filter conditions.

$(document).ready(function() {
  $('.filter-button').click(function() {
    var filter = $(this).data('filter');
    if (filter === 'all') {
      $('.image-item').show();
    } else {
      $('.image-item').hide();
      $('.image-item[data-category="' + filter + '"]').show();
    }
  });
});

In the above code, we first obtain the filter conditions for clicking the button. If the filter condition is "all", all picture items are displayed. Otherwise, we use jQuery's hide() method to hide all image items, and the show() method to show image items that match the filter criteria.

4. Image tags and categories

For the filtering function to take effect, we need to add the corresponding tag or category to each image item. You can add a data-category attribute to the li element to identify the category of the image.

<li class="image-item" data-category="nature">
  <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
</li>

In the data-category attribute, we can use any category value to match the filter criteria of the button.

To sum up, we can create a picture gallery with filtering function through simple HTML, CSS and jQuery code. Users can easily browse images while sorting and filtering according to their preferences. Hope this article helps you!

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