Tạo một thư viện hình ảnh phương thức với các thành phần Bootstrap

Bạn đã bao giờ nhấp vào hình ảnh trên trang web mở ra phiên bản lớn hơn của hình ảnh có điều hướng để xem các ảnh khác chưa?

Một số người gọi nó là cửa sổ bật lên. Những người khác gọi nó là một hộp đèn. Bootstrap gọi nó là một phương thức. Tôi đề cập đến Bootstrap vì tôi muốn sử dụng nó để tạo ra cùng một thứ. Vì vậy, hãy để Lừa gọi nó là một phương thức từ đây trở đi.

Tại sao Bootstrap? bạn có thể hỏi. Chà, một vài lý do:

• Tôi đã sử dụng Bootstrap trên trang web mà tôi muốn có hiệu ứng này, vì vậy không có thêm chi phí nào về tài nguyên tải.
• Tôi muốn một cái gì đó mà tôi có thể kiểm soát hoàn toàn và dễ dàng về thẩm mỹ . Bootstrap là một phiên bản rõ ràng so với hầu hết các plugin phương thức mà tôi đã gặp.
• Chức năng tôi cần khá đơn giản. Có rất nhiều thứ có thể đạt được bằng cách mã hóa mọi thứ từ đầu. Tôi coi thời gian tôi tiết kiệm được sử dụng khung Bootstrap sẽ có lợi hơn bất kỳ nhược điểm tiềm năng nào.

Tại đây, nơi mà chúng tôi sẽ kết thúc:

Hãy để Lướt qua đó, từng chút một.

Bước 1: Tạo lưới thư viện ảnh

Hãy bắt đầu với việc đánh dấu cho bố cục hình ảnh lưới. Chúng ta có thể sử dụng hệ thống lưới Bootstrap ván cho điều đó.

Bây giờ chúng ta cần các thuộc tính dữ liệu để làm cho những hình ảnh đó tương tác. Bootstrap xem xét các thuộc tính dữ liệu để tìm ra các yếu tố nào nên tương tác và những gì chúng nên làm. Trong trường hợp này, chúng tôi sẽ tạo ra các tương tác mở thành phần phương thức và cho phép cuộn qua các hình ảnh bằng cách sử dụng thành phần băng chuyền.

Về những thuộc tính dữ liệu đó:

1. Chúng tôi sẽ thêm data-toggle = "modal" và data-target = "# exampleModal" vào phần tử cha (# gallery ]). Điều này làm cho nó để nhấp vào bất cứ điều gì trong bộ sưu tập sẽ mở ra phương thức. Chúng ta cũng nên thêm giá trị mục tiêu dữ liệu ( #exampleModal ) làm ID của chính phương thức, nhưng chúng ta sẽ làm điều đó một khi chúng ta có được đánh dấu phương thức.
2. Hãy thêm data-target = "# carouselExample" và thuộc tính data-slide-to cho mỗi hình ảnh. Thay vào đó, chúng tôi có thể thêm chúng vào trình bao bọc hình ảnh, nhưng chúng tôi sẽ đi cùng với hình ảnh trong bài đăng này. Sau đó, chúng tôi sẽ muốn sử dụng giá trị mục tiêu dữ liệu ( #carouselExample ) làm ID cho băng chuyền, vì vậy hãy lưu ý rằng khi chúng tôi đến đó. Các giá trị cho dữ liệu trượt đến được dựa trên thứ tự của các hình ảnh.

Ở đây, những gì chúng ta có được khi kết hợp chúng lại với nhau:

Quan tâm đến việc biết thêm về các thuộc tính dữ liệu? Kiểm tra hướng dẫn Thủ thuật CSS cho họ.

Bước 2: Thực hiện chế độ hoạt động

Đây là một băng chuyền bên trong một phương thức, cả hai đều là các thành phần Bootstrap tiêu chuẩn. Chúng tôi chỉ làm tổ bên trong cái kia ở đây. Khá nhiều công việc sao chép và dán thẳng từ tài liệu Bootstrap.

Tại đây, một số phần quan trọng cần theo dõi:

1. ID phương thức phải khớp với mục tiêu dữ liệu của phần tử thư viện.
2. ID băng chuyền phải khớp với mục tiêu dữ liệu của hình ảnh trong bộ sưu tập.
3. Các slide băng chuyền phải khớp với hình ảnh của bộ sưu tập và phải theo cùng một thứ tự.

  





 × 







 Đóng 



  

  





 × 





















 
 Trước đó 


 
 Tiếp theo 





 Đóng 



  

  // Sử dụng các điểm dừng Bootstrap để thống nhất.
$ bootstrap-sm: 576px;
$ bootstrap-md: 768px;
$ bootstrap-lg: 992px;
$ bootstrap-xl: 1200px;

// Cắt hình thu nhỏ.
#bộ sưu tập {
  img {
    chiều cao: 75vw;
    object-fit: cover;
    
    @media (chiều rộng tối thiểu: $ bootstrap-sm) {
      chiều cao: 35vw;
    }
    
    @media (chiều rộng tối thiểu: $ bootstrap-lg) {
      chiều cao: 18vw;
    }
  }
}

// Cắt hình ảnh trong coursel
.carousel-item {
img {
chiều cao: 60vw;
object-fit: cover;

@media (chiều rộng tối thiểu: $ bootstrap-sm) {
chiều cao: 350px;
}
}
}