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.

DEMO DOWNLOAD

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

• CSS: Lightbox
• JS: Lightbox Plus jQuery

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());
	    }
	});
});

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