Loading post navigation ...
 
 

Pro page

22
Nhận xét

Tiện ích "Bài viết mới nhất - có ảnh thumbnail" kết hợp với hiệu ứng slide từ jQuery

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Widget Recent Posts Using jQuery
[FD's BlOg] - Sau một lần lục lọi, tìm kiếm trên mạng được một hiệu ứng từ jQuery, mình đã quyết định áp dụng nó cho tiện ích "Bài viết mới - có kèm ảnh thumbnail" mà website VietWebGuide đã phổ biến. Để áp dụng jQuery vào widget "Recent Posts" của VWG, mình có chỉnh sửa đôi chút từ file JavaScript của VWG.


Xem hình minh họa:





Xem demo của thủ thuật gốc:
http://fandung.110mb.com/JS-files/recent-post-Jquery/demo/recent-post.html

Như các thủ thuật trước, để đơn giản, bạn hãy tạo 1 Widget HTML/Javascript và copy tất cả code bên dưới vào :

// Code javascript
<script src="http://data.fandung.com/js/jquery-1.2.6.min.js" type="text/javascript">
</script>

<script type="text/javascript">
$(document).ready(function(){

var first = 0;
var speed = 700;
var pause = 3500;

function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}

function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}

interval = setInterval(removeFirst, pause);
});
</script>

// Code CSS
<style type="text/css">

#listticker{
height:300px;
width:400px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:6px 6px 6px 6px;;
background:#fff;
}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
height:60px;
padding:5px;
list-style:none;
}
#listticker a{
color:#000000;
margin-bottom:
}
#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:2px;
padding:4px;
border:solid 1px #DEDEDE;
}
</style>

// Code HTML
<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://vietwebguide.googlepages.com/LDP08-06-11-01.png";
imgr[1] = "http://vietwebguide.googlepages.com/LDP08-06-11-02.png";
imgr[2] = "http://vietwebguide.googlepages.com/LDP08-06-11-03.png";
imgr[3] = "http://vietwebguide.googlepages.com/LDP08-06-11-04.png";
imgr[4] = "http://vietwebguide.googlepages.com/LDP08-06-11-05.png";

showRandomImg = true;
tablewidth = 392;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";

imgwidth = 60;
imgheight = 60;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";

text = "no";

showPostDate = false;

summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";

numposts = 15;

home_page = "http://www.fandung.com/";

</script>
<script src="http://data.fandung.com/js/recent-post-Jquery/recentposts_thumb_5.js" type="text/javascript"></script>

- Có thể các link Javascript của mình load chậm, nên các bạn có thể download về và up lên host nào load nhanh hơn.
- Chú ý điều chỉnh các code màu đỏ (độ rộng) cho hợp lý
- http://www.fandung.com : thay bằng địa chỉ của blog bạn.
- Và một điều lưu ý cuối cùng : chiều cao của ảnh thumbnail (imgheight = 60;) và chiều cao của thẻ <li> (height:60px;) fải bằng nhau.

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


Enter your mail address:

22

Ác Quỷ

Đẹp wá :x. FanDũng có nhìu bài viết về jQuery nhỉ? Cái nào cũng hay fết. Vote 5* zdị :D

fandung

Sự kết hợp này có thể nói là chưa có blog nào có .(theo như mình biết :D)

LouLou

đúng là cái loulou mong muốn. thanks bác fandung nhiều quá, site em cũng đang xài jquery thêm cái này vào tuyệt thật
àh bác fandung , lần trước em thấy bác giới thiệu cái slideshow TabNews = jwery, em có ý là bác xem có cách nào làm cho cái TabNews đó tự động lấy tiêu đề và hình của bài viết để show lên giống như recent post lần này được k? chứ cứ phải làm thủ công bất tiện wá

fandung-tester

@LouLou: mình cũng có nghĩ tới việc này, khi nào thàn công sẽ post lên. :D

fandung-tester

@LouLou:mình đã test thủ thuật mà bạn nói, đã hiển thị tốt các bài viết, nhưng còn phần trình diễn thì lại bị lỗi.

Nó chạy 1 hồi thì bị trục trặc, và mỗi lần trục trặc với những lỗi khác nhau.
Có lẽ là ghép chung nhiều đọan Javascript lại với nhau nên nó mới bị lỗi như vậy.
Thiệt là ko biếtlàm sao...

fandung-tester

Mọi người có thể xem thử demo ở đây, coi có bị lỗi như của mình không.

Thủ thuật tạo TabNews (jQuery) - tự cập nhật bài viết mới:
http://fd-tester.blogspot.com

LouLou

bác FD ơi em vào http://fd-tester.blogspot.com xem rùi xem các bài viết xoay vòng từ đầu đến cuối được 2 vòng thì .... cảm giác mọi thứ đang hoạt động ko khớp nhau
dù sao đây cũng là thành công bước đầu rùi. em ủng hộ bác mong bác sớm hoàn thành widget này

fandung

chưa tìm được cách khắc phục. không biết có thể sửa đc lỗi này ko. ~x(

LouLou

bác fandung ơi bây h` em chỉ muốn show những bài mới của 1 nhãn thì làm thế nào nhỉ ??? giúp em zới

Phan Dũng

@LouLou: bạn có thể xem bài viết này sẽ thực hiện được

http://fandung.blogspot.com/2009/06/tao-cac-tab-chuyen-muc-noi-bat-cho-blog.html

Huy

not good :(

Huy

Mấy cái link script up lên host em chẳng chạy được :(

fandung-tester

Sao??? up lên host của em chạy ko đc à ??? Nếu không chạy đuợc thì cứ xài link của anh đưa cũng đc.

fandung-tester

@Naturo:

Lưu ý với bạn 1 điều nữa là, file javascript có liên quan tới code CSS vì thế không nên đổi tên của các id, class.

FreeStyle

thủ thuật này cũng hay đó :D

Unknown

Cái của mình xài cool hơn nhiều :D

Unknown

Sẵn đây quảng cáo thêm template mới của mình: http://comedown-vi.blogspot.com :D

Unknown

FD cho tớ hỏi là muốn cho nó nền trong suốt thì làm thế nào ? Tự dưng nền mình đang màu tối nó lại chơi màu trắng khó xơi quá. À tiện cho tớ hỏi là không hiểu sao template của tớ nó lại mất phần comments. Cậu chỉ tớ với :((
Cảm ơn trc nhé !
Blog của tớ: http://www.duyanhblog.com

ChoiBlogs.blogspot.com

thanks anh FanDung.Com

TUE
TUE
Unknown

Không thành công bạn à



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home