hi xin chào mọi người nha, nay thì mình xin quay lại với chuyên mục share code của chúng ta sau một tuần mình đã offline để ôn thi.
và code ngày hôm nay của chúng ta là sẽ làm một cái lightbox ảnh dạng trượt
với code này thì nó thích hợp cho những bạn nào làm review về hình của android thì sẽ cần trình chiếu nhiều hình ảnh. và để cho các hình ảnh đó được ngắn ngọn cho người nhìn thì mình đã viết cái code dạng ảnh kiểu tược để mọi người có thể dễ dàng quan sát hình ảnh một cách chiết hơn. mọi người cũng có thể xem qua demo bên dưới nhé.
Demo
Share code
okii thì đây là code cho mọi người có thể tạo một hộp lightbox hình ảnh dạng trượt nhé
Bước 1: đăng nhập vào blogger --> chủ đề --> chỉnh sửa HTML
Bước 2: tìm đến thẻ ]]></b:skin> và dán đoạn CSS bên dưới vào phái trên thẻ đó cho mình.
/*css slider by kimidev.site*/
.kimidev .slides {
display: flex;
white-space: nowrap;
width: 100%;
flex-direction: row;
overflow: auto;
scroll-behavior: smooth;
padding: 20px 0 0;
}
.kimidev .kimidev-content img {
border-radius: 7px;
max-height: 225px;
max-width: 720px;
margin: 0 5px;
scroll-snap-align: start;
}
Bước 3: nhiệm vụ bây h của bạn là đặt mã này vào nơi mà bạn muốn hiển thị lightbox ảnh dạng trượt ngang thui là được nhé.
<div class="kimidev">
<div class="slides">
<!-- [Link ảnh 1] -->
<div class="kimidev-content"><img aria-hidden="true" src="link_ảnh"></div>
<!-- [Link ảnh 2] -->
<div class="kimidev-content"><img aria-hidden="true" src="link_ảnh"></div>
<!-- [Link ảnh 3] -->
<div class="kimidev-content"><img aria-hidden="true" src="link_ảnh"></div>
<!-- [Link ảnh 4] -->
<div class="kimidev-content"><img aria-hidden="true" src="link_ảnh"></div>
</div>
</div>
Lưu ý: nhớ thay link src thành link hình ảnh của bạn mong muốn nhé.
các bạn cũng có thể sử dụng công cụ này để upload hình ảnh một cách nhanh chống nhé.
upload ảnh k2upload ảnh k1
okii thì đó là toàn bộ kiến thức mà mình muốn chia sẽ đến thất cả các bạn. cảm ơn tất cả mọi người đã theo dõi. chúc mọi người thành công
nếu như có thắc mắc gì thì cứ comment bên dưới mình sẽ giải đáp cho mọi người.
