Hướng dẫn chèn Javascript hiển thị ảnh Before và After

Ngồi rảnh rỗi lò mò up mấy cái ảnh lên website thì nhớ đến lúc trước có thấy cái Slide ảnh kiểu before | after nhìn khá hay. Hình như trên Wordpress. Thế là lại lò mò search trên mạng.

May ra thấy có đoạn javascript na ná mà hình như chưa hoàn thiện lắm. Thôi kệ, mod lại cho template nhìn cho chất.

Đoạn javascript này chưa hoàn thiện nên mỗi bài viết chỉ chèn được 1 slide hình. Tuy vậy, code có thêm chức năng bấm vào link sẽ tự động thay 2 cái link ảnh hiện tại thành 2 cái link ảnh khác. Xem chi tiết demo bên dưới.


Hướng dẫn:

Bước 1: Chèn đoạn css này vào trước thẻ </b:skin>:

/*-- slide before & after --*/

div.beforeandafter{display: block;overflow: hidden;position: relative;width: 100%;}@media (max-width:426px) and (min-width:1px) {div.beforeandafter{min-height:240px}}@media (max-width:640px) and (min-width:427px) {div.beforeandafter{min-height:360px}}@media (max-width:854px) and (min-width:641px) {div.beforeandafter{min-height:480px}}@media (max-width:1920px) and (min-width:855px) {div.beforeandafter{min-height:720px}}div.beforeandafter img{max-width: none !important;height:100% !important;object-fit: cover;}div.before, div.after{height: 100%;left: 0;overflow: hidden;position: absolute;top: 0;transition: width 0.2s ease-in-out;width: 100%;z-index: 100;}div.after{z-index: 1;}div.drag{background: white;cursor: col-resize;display: block;height: 100%;left: 100%;position: absolute;top: 0;transition: left 0.2s ease-in-out;width: 2px;z-index: 1001;}div.drag div.draghandle{background: darkred;background: -moz-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);background: -ms-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);background: -o-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);background: radial-gradient(ellipse at center, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);background: rgb(169,3,41);background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));background: -webkit-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);border-radius: 2px;box-shadow: 0 0 5px gray;filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );height: 20%;position: absolute;text-align: center;width: 16px;}div.before span.caption, div.after span.caption{background: black;bottom: 10px;color: white;display: block;font: bold 12px Germand;padding: 5px;position: absolute;right: 10px;width: 90px;}div.before span.caption{left: 10px;right: auto;}div.before span.caption a, div.after span.caption a{color: lightyellow;text-decoration: none;}

/*-- slide before & after --*/

Bước 2: Tải file Javascript này về rồi up lên hosting hoặc Github.

Bước 3: Chèn đoạn html này vào vị trí đặt slide. Nhớ thay link ảnh cho phù hợp.

<div id="baf" class="beforeandafter">
 <div class="before">
  <img src="[url-img-01]" />
 </div>
 <div class="after">
  <img src="[url-img-02]" />
 </div>
</div>
Lưu ý: Để chèn được nút thay đổi ảnh thì tải code bên dưới về rồi thay cho code ở bước 3.
 

Để lại bình luận bên dưới nếu bạn gặp trở ngại. Chúc bạn thành công.

0/BÌNH LUẬN

BẠN ĐANG CHẶN QUẢNG CÁO

Vui lòng tắt plugin Adblock trong trình duyệt và phần mềm diệt virus (nếu có) sau đó nhấn vào

Disable Adblock & Reload

để tiếp tục hỗ trợ trang web đang phát triển này