Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Gallery Snippet Trong Thiết Kế Web (Phần 2)

Gallery Snippet Trong Thiết Kế Web (Phần 2)


Ngày 24 Tháng 4 Năm 2020

Gallery Image Trong Thiết Kế Web (Phần 2)

Hôm nay chúng ta sẽ đi tìm hiểu cách thiết kế gallery bằng cách kết hợp HTML, CSS, Javascript nhé.

Gallery là bộ sưu tập để hiển thị hình ảnh của bạn trên trang web. Việc đưa nó vào trang web giúp làm nổi bật các sản phẩm một cách sáng tạo để thu hút, giữ chân khách hàng lâu hơn ở trang của bạn. Mình thường sử dụng hình ảnh theo châm ngôn Hình ảnh nhiều hơn ngàn lời nói. Nó cũng làm khách hàng ghi nhớ thương hiệu cũng như sản phẩm của bạn hơn và ngoài ra nó cũng tốt trong việc SEO webite trên các công cụ tìm kiếm như Google hoặc Bing... Tuy vậy bạn cần một số lưu ý là bạn nên chỉ chọn sản phầm thực tế để sử dụng trong gallery giúp tăng khả năng tin tưởng của khách hàng, hình ảnh của bạn nên được tối ưu để giảm kích thước nhằm tăng tốc độ tải trang trên cả máy tính và điện thoại.Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Ví Dụ Gallery Trong Trang Web

Sau khi hiểu sơ lược về gallery thì sau đây mình sẽ giới thiệu một số component này giúp bạn có sự lựa chọn tốt nhất để phù hợp với mục đích cũng như thiết kế, bố cục trang web của bạn.

Pop-up/Overlay:

Xây dựng bộ sưu tập hình ảnh phần 1 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Daily UI #016 | Pop-up/Overlay by Julie Park (@juliepark) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Pop-up/Overlay.

Responsive CSS Grid Masonry Gallery:

Xây dựng bộ sưu tập hình ảnh phần 2 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Responsive CSS Grid Masonry Gallery by vhanla (@vhanla) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Responsive CSS Grid Masonry Gallery.

Responsive Image Gallery with jQuery Lightbox:

Xây dựng bộ sưu tập hình ảnh phần 3 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Responsive Image Gallery with jQuery Lightbox by Melinda Golden (@mmgolden) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Responsive Image Gallery with jQuery Lightbox.

Photo Gallery:

Xây dựng bộ sưu tập hình ảnh phần 4 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Photo Gallery by Mark Glissmann (@mglissmann) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Photo Gallery.

Slide-out Scrolling Gallery:

Xây dựng bộ sưu tập hình ảnh phần 5 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Slide-out Scrolling Gallery by Teegan Lincoln (@teeganlincoln) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Slide-out Scrolling Gallery.

Gallery:

Xây dựng bộ sưu tập hình ảnh phần 6 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Gallery by Katherine Kato (@kathykato) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Gallery.

Scrolling & Looping Gallery:

Xây dựng bộ sưu tập hình ảnh phần 7 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Scrolling & Looping Gallery - Vanilla HTML/CSS/JS - ES5 - No Touch Events by Phil Flanagan (@phileflanagan) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Scrolling & Looping Gallery.

Accessible Off-canvas Grid Gallery:

Xây dựng bộ sưu tập hình ảnh phần 8 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Accessible off-canvas grid gallery by Joe Watkins (@joe-watkins) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Accessible Off-canvas Grid Gallery.

LightGallery:

Xây dựng bộ sưu tập hình ảnh phần 9 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen lightGallery by Sachin choolur (@sachinchoolur) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: LightGallery.

Bootstrap 4 Lightbox Gallery:

Xây dựng bộ sưu tập hình ảnh phần 10 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Bootstrap 4 Lightbox Gallery by Som Nayak (@nsom) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Bootstrap 4 Lightbox Gallery.

Accordion Image Gallery:

Xây dựng bộ sưu tập hình ảnh phần 11 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Accordion Image Gallery by Stefan C. (@stefcharle) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Accordion Image Gallery.

Hexagon Gallery:

Xây dựng bộ sưu tập hình ảnh phần 12 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Hexagon Gallery by Gabriela Johnson (@gabrielajohnson) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Hexagon Gallery.

Simple Image Gallery:

Xây dựng bộ sưu tập hình ảnh phần 13 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen Simple Image Gallery with magnific-popup.js by Nino (@JiiB) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Simple Image Gallery.

CSS Gallery:

Xây dựng bộ sưu tập hình ảnh phần 14 html,css, js

Đây là đoạn code và khi hiển thị trên web của component gallery này nhé:

See the Pen CSS Gallery by badalsaibo (@heyDante) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: CSS Gallery.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian thiết kế Gallery trong việc phát triển trang web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!