JS – UI hỗ trợ so sánh 2 tấm hình – Image Splitter View

Hi các bạn,

Mình từng thấy cái UI này trước đó, nay có time nên build luôn 1 cái library để tiện sử dụng :v

Về tính năng cơ bản thì như tấm hình dưới đây :v

JS - UI hỗ trợ so sánh 2 tấm hình - Image Splitter View
Demo nè

Cái UI này sẽ rất hay cho những webpage mà ta làm về so sánh, ví dụ:

  • So sánh sản phẩm
  • So sánh hình ảnh chụp qua cam

Đi vào cài đặt và sử dụng nào :D. Rất là đơn giản và nhanh gọn lẹ thoy.

1/ Cài đặt

Truy cập vào Repo của mình ở link này: https://github.com/sethsandaru/js-image-splitter-view

Các bạn có thể clone hay vào mục “Release” để tải về.

Sau đó cần include 2 files này vào web page của bạn:

<link rel="stylesheet" href="css/image.splitter.view.css" />
<script src="js/jquery.image.splitter.view.js"></script>

Lưu ý:

  • Bạn phải có JQuery và JQuery UI, cả 2 đều fải dc include vào webpage trước khi include cái library nha

2/ Sử dụng

Cần phải prepare HTML structure như sau:

<div class="splitter-container" id="splitterContainer">
        <div>
            <img class="img-responsive" src="img1.png">
        </div>
        <div>
            <img class="img-responsive" src="img2.png">
        </div>
    </div>

(Lưu ý: class cho hình của bạn fải chắc chắn full width – 100% nhé, như mình đang xài class img-responsive của bootstrap)

Dùng JQuery để init như sau:

<script>
	$(document).ready(function() {
		$("#splitterContainer").imageSplitter();
	});
</script>

Kết quả sau khi inited – JS – UI hỗ trợ so sánh 2 tấm hình – Image Splitter View:

JS - UI hỗ trợ so sánh 2 tấm hình - Image Splitter View

3/ Màu mè chút cho cái Splitter Control

Thêm class như sau vào cái container để màu mè chút nè:

  • .is-primary
  • .is-success
  • .is-info
  • .is-warning
  • .is-danger
<div class="splitter-container is-primary" id="splitterContainer">

Kết quả:

JS - UI hỗ trợ so sánh 2 tấm hình - Image Splitter View

(Mặc định là màu hồng đó nha)

4/ Kết luận về JS – UI hỗ trợ so sánh 2 tấm hình – Image Splitter View

Mong rằng với library này nó có thể giúp bạn tiếp cận dc UI này nhanh nhất có thể =))

Lưu ý cuối khi sử dụng: Các bạn phải đảm bảo 2 tấm hình của bạn nó same nhau như sau:

  • Full-width (100% page-width)
  • Width bằng nhau
  • Height bằng nhau

Không thì tỉ lệ nó break control là cao lắm nhé 😀

Cám ơn các bạn đã quan tâm theo dõi topic này – JS – UI hỗ trợ so sánh 2 tấm hình – Image Splitter View

# JS – UI hỗ trợ so sánh 2 tấm hình – Image Splitter View

facebook
google+
Seth Phát

Seth Phát

Mình là Phát - biệt danh Seth Phát. Hiện đang là một Sr. Full-Stack Engineer. Mình là một người yêu thích và đam mê lập trình và hiện tại đang theo về phần Web là chủ yếu. Mạnh Back-end và khá Front-end, vẫn đang theo đều cả 2 :v. Còn gì bằng khi được làm những thứ mà mình yêu thích, đam mê ;)

Leave a Reply

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

Bình luận qua Facebook