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

Mã giảm giá AZDIGI

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.

Loại bỏ tham số phiên bản trong WordPress từ các tập tin JS và CSS
Chia sẻ Theme WordPress Simple Article For Personal Blog
18 bức ảnh cho thấy sức mạnh vạn năng của đồng tiền!

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!

Chia sẻ bài viết với:

COMMENTS

WORDPRESS: 0
Sunwah PearlHồ Tràm CoastarCoastar Hồ TràmCoastar EstatesKhu dân cư Nguyễn BìnhKDC Nguyễn BìnhDự án Nguyễn BìnhNam Việt ÁNine SouthĐất Hòa XuânĐất nền Hòa XuânDat Hoa XuanDat nen Hoa Xuan