Subscribe Now

Trending News

Bài viết

CSS, HTML, JavaScript, jQuery, Lập trình

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

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:

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!

Tổng hợp Khuyến mãi, Coupon Dediserve 2020 (Special)

Bài viết liên quan

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments