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

[ad_1]

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" 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ự.

Tại đây, đánh dấu cho phương thức với các thuộc tính của chúng tôi tại chỗ:

  

Chúng ta có thể bỏ đánh dấu băng chuyền ngay tại đó, kiểu Voltron!

  
  

Trông giống như rất nhiều mã, phải không? Một lần nữa, nó về cơ bản trực tiếp từ các tài liệu Bootstrap, chỉ với các thuộc tính và hình ảnh của chúng tôi.

Bước 3: Xử lý kích thước hình ảnh

Đây là điều cần thiết, nhưng nếu hình ảnh trong băng chuyền có các kích thước khác nhau, chúng ta có thể cắt chúng bằng CSS để giữ mọi thứ nhất quán. Lưu ý rằng chúng tôi đang sử dụng Sass ở đây.

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

Bước 4: Tối ưu hóa hình ảnh

Bạn có thể nhận thấy rằng đánh dấu sử dụng cùng một tệp hình ảnh trong bộ sưu tập như chúng ta làm trong phương thức. Điều đó không cần phải là trường hợp. Trên thực tế, đó là một ý tưởng tốt hơn để sử dụng các phiên bản hình ảnh nhỏ hơn, hiệu quả hơn cho bộ sưu tập. Chúng tôi sẽ tiếp tục thổi bùng các hình ảnh lên phiên bản kích thước đầy đủ của chúng trong chế độ, vì vậy, không cần phải có chất lượng tốt nhất ở phía trước.

Điểm hay của phương pháp Bootstrap ở đây là chúng ta có thể sử dụng các hình ảnh khác nhau trong bộ sưu tập so với phương thức. Họ không loại trừ lẫn nhau khi họ phải trỏ đến cùng một tệp.

Vì vậy, tôi đã đề nghị cập nhật đánh dấu thư viện bằng các hình ảnh chất lượng thấp hơn:

  

Thật đó!

Trang web nơi tôi sử dụng trang này đã có Bootstrap theo chủ đề. Điều đó có nghĩa là tất cả mọi thứ đã được phong cách để spec. Điều đó nói rằng, ngay cả khi bạn chưa có Bootstrap theo chủ đề, bạn vẫn có thể dễ dàng thêm các kiểu tùy chỉnh! Với phương pháp này (Bootstrap so với plugin), việc tùy chỉnh không gây đau đớn vì bạn có toàn quyền kiểm soát đánh dấu và kiểu dáng Bootstrap tương đối thưa thớt.

Tại đây, bản demo cuối cùng:

[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *