Home Web design JavaScript Slider hình ảnh trong bài viết đơn giản mà đẹp với jQuery

Slider hình ảnh trong bài viết đơn giản mà đẹp với jQuery

3 min read
0
0
5
Slider hình ảnh trong bài viết đơn giản mà đẹp với jQuery

Một bài viết thông thường có một số hình ảnh minh họa, bằng một thủ thuật jQuery đơn giản, các bạn có thể biến chúng thành một slider ảnh tuyệt đẹp.

1. Chuẩn bị thư viện:

2. Viết code:

HTML: Ví dụ div chứa bài viết của mình có id là “post”, và trong div có 3 hình ảnh

<div id="post">
    <img src="my-url1" alt="my-alt1" title="my-title1" /><br>
    <img src="my-url2" alt="my-alt2" title="my-title2" /><br>
    <img src="my-url3" alt="my-alt3" title="my-title3" /><br>
</div>

JavaScript: Đoạn code này sẽ có thêm chức năng add class vào thẻ img để responsive và border hình ảnh cho đẹp hơn

$(document).ready(function(){
    $('#post img').each(function () {
	    $(this).addClass("img-thumbnail img-responsive example-image");
	    var url = $(this).attr("src");
	    var anchor = $(this).prev().is("a");
	    if (!anchor) {
	        $(this).wrap($('<a>', {
	            href: url
	        }));
	    }
	    $(this).parent().addClass("example-image-link");
	    $(this).parent().attr("data-lightbox", "example-set");
	    var title = $(this).attr("title");
	    if (typeof title != typeof undefined && title != false) {
	        $(this).parent().attr("data-title", title);
	    }
	    else {
	        $(this).parent().attr("data-title", $(document).find("title").text());
	    }
	});
});

3. Demo và Download:

Các bạn nên xem Demo và Download mã nguồn về để tiện áp dụng.

Demo Download

Chúc các bạn thành công!

Load More Related Articles
Load More By Dong
Load More In JavaScript