Hướng dẫn tạo Featured Post với Jquery - 8 September 2010 - All 4 You
Saturday, 21-Jan-2017, 7:13 PM
Welcome Guest | RSS
Main » 2010 » September » 8 » Hướng dẫn tạo Featured Post với Jquery
4:19 PM
Hướng dẫn tạo Featured Post với Jquery

Bằng cách sử dụng JQuery bạn có thể tạo cho mình một tiện ích bài nổi bật – Features Post tự động trình diễn slide 4 bài đang do bạn upload các thông tin về URL, hình ảnh và đoạn miêu tả với kích thước mặc định 600px x 240px.

Jquery Slideshow_wm(Hình minh họa tiện ích Featured Post)

Bạn có thể thực hiện một cách dễ dàng như sau:

 Cách 1

Bước 1: Truy cập vào CP.

- Vào Site pages

Bước 2: Chèn mã CSS.

- Tìm kiếm đoạn code: </head>

- Thay thế </head> bằng đoạn mã sau:

Code 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> 

<script type='text/javascript'> 
//<![CDATA[ 

$(document).ready(function() { 

//Execute the slideShow, set 6 seconds for each images 
slideShow(3000); --> thay đổi thời gian hiển thị slide ở đây


}); 

function slideShow(speed) { 


//append a LI item to the UL list for displaying caption 
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); 

//Set the opacity of all images to 0 
$('ul.slideshow li').css({opacity: 0.0}); 

//Get the first image and display it (set it to full opacity) 
$('ul.slideshow li:first').css({opacity: 1.0}); 

//Get the caption of the first image from REL attribute and display it 
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); 
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); 

//Display the caption 
$('#slideshow-caption').css({opacity: 0.7, bottom:0}); 

//Call the gallery function to run the slideshow 
var timer = setInterval('gallery()',speed); 

//pause the slideshow on mouse over 
$('ul.slideshow').hover( 
function () { 
clearInterval(timer); 
}, 
function () { 
timer = setInterval('gallery()',speed); 

); 



function gallery() { 


//if no IMGs have the show class, grab the first image 
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); 

//Get next image, if it reached the end of the slideshow, rotate it back to the first image 
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); 

//Get next image caption 
var title = next.find('img').attr('title'); 
var desc = next.find('img').attr('alt'); 

//Set the fade in effect for the next image, show class has higher z-index 
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); 

//Hide the caption first, and then set and display the caption 
$('#slideshow-caption').animate({bottom:-70}, 300, function () { 
//Display the content 
$('#slideshow-caption h3').html(title); 
$('#slideshow-caption p').html(desc); 
$('#slideshow-caption').animate({bottom:0}, 500); 
}); 

//Hide the current image 
current.animate({opacity: 0.0}, 1000).removeClass('show'); 



//]]> 
</script> 

<style type="text/css"> 
ul.slideshow { 
list-style:none; 
width:600px; 
height:240px; --> thay đổi kích thước slide (nhớ thay đổi thêm mấy mục ở dưới nữa nhá)

overflow:hidden; 
position:relative; 
margin:0; 
padding:0; 
font-family:Arial,Helvetica,Trebuchet MS,Verdana; 


ul.slideshow li { 
position:absolute; 
left:0; 
right:0; 

ul.slideshow li.show { 
z-index:500; 

ul img { 
width:600px; 
height:240px; --> thay đổi kích thước ảnh

border:none; 

#slideshow-caption { 
width:600px; 
height:70px; --> thay đổi kích thước thanh đen (thanh hiện Title, miêu tả) 

position:absolute; 
bottom:0; 
left:0; 
color:#fff; 
background:#000; 
z-index:500; 

#slideshow-caption .slideshow-caption-container { 
padding:5px 10px; 
z-index:1000; 

#slideshow-caption h3 { 
margin:0; 
padding:0; 
font-size:16px; 

#slideshow-caption p { 
margin:5px 0 0 0; 
padding:0; 

</style> 
</head>


- Lưu lại mẫu.

Bước 3: Tạo tiện ích Featured Post

- Paste đoạn code sau vào nơi bạn muốn hiển thị Featured:

Code 

<ul class="slideshow">

<li><a href="Link bài 1"><img src="Link ảnh bài 1" title="Tiêu đề bài 1" alt="Đoạn text miêu tả bài 1 ." /></a></li>

<li><a href="Link bài 2"><img src="Link ảnh bài 2" title="Tiêu đề bài 2" alt="Đoạn text miêu tả bài 2 ." /></a></li>

<li><a href="Link bài 3"><img src="Link ảnh bài 3" title="Tiêu đề bài 3" alt="Đoạn text miêu tả bài 3 ." /></a></li>

<li><a href="Link bài 4"><img src="Link ảnh bài 4" title="Tiêu đề bài 4" alt="Đoạn text miêu tả bài 4 ." /></a></li>

</ul>


- Bạn thay đổi các  thông tin đánh dấu màu trong đoạn code trên là xong.


 Cách 2

Dùng đoạn code sau:

Code 

<link href="http://all4u.dmon.com/CSS/s3slider1.css" rel="stylesheet" type="text/css" media="screen">

<link href="http://all4u.dmon.com/CSS/featured1.css" rel="stylesheet" type="text/css" media="screen"> 

<script src="http://all4u.dmon.com/Js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="http://all4u.dmon.com/Js/s3Slider.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() { 

   $('#s3slider').s3Slider({ 

      timeOut: 4000 

   });

});

</script>

<div id="s3slider"> <ul id="s3sliderContent">

<li class="s3sliderImage"> <a href=""><img src="1.jpg" /></a> <span><h1>Title 1</h1>ND 1</span> </li>

<li class="s3sliderImage"> <a href=""><img src="2.jpg" /></a> <span><h1>Title 2</h1>ND 2</span> </li>

<div class="clear s3sliderImage"></div> </ul></div>


 Cách 3




Code 

<link rel="stylesheet" href="http://all4u.dmon.com/CSS/layout.css" type="text/css" media="screen" charset="utf-8" /> 

<link rel="stylesheet" href="http://all4u.dmon.com/CSS/jd.gallery.css" type="text/css" media="screen" charset="utf-8" /> 

<script src="http://all4u.dmon.com/Js/mootools-1.2.1-core-yc.js" type="text/javascript"></script> 

<script src="http://all4u.dmon.com/Js/mootools-1.2-more.js" type="text/javascript"></script> 

<script src="http://all4u.dmon.com/Js/jd.gallery.js" type="text/javascript"></script> 

<script src="http://all4u.dmon.com/Js/jd.gallery.transitions.js" type="text/javascript"></script> 

<script type="text/javascript"> 

function startGallery() {

var myGallery = new gallery($('myGallery'), {

timed: true

});

}

window.addEvent('domready',startGallery);

</script> 

<div class="content"> 

<div id="myGallery"> 

<div class="imageElement"><h3>Title 1</h3><p>Mô tả 1</p><a href="#" title="open image" class="open"></a><img src="1.jpg" class="full" /><img src="1.jpg" class="thumbnail" /></div> 

<div class="imageElement"><h3>Title 2</h3><p>Mô tả 2</p><a href="#" title="open image" class="open"></a><img src="2.jpg" class="full" /><img src="2.jpg" class="thumbnail"/></div> 

<div class="imageElement"><h3>Title 3</h3><p>Mô tả 3</p><a href="#" title="open image" class="open"></a><img src="3.jpg" class="full" /><img src="3.jpg" class="thumbnail" /></div>

<div class="imageElement"><h3>Title 4</h3><p>Mô tả 4</p><a href="#" title="open image" class="open"></a><img src="4.jpg" class="full" /><img src="4.jpg" class="thumbnail" /></div> 

<div class="imageElement"><h3>Title 5</h3><p>Mô tả 5</p><a href="#" title="open image" class="open"></a><img src="5.jpg" class="full" /><img src="5.jpg" class="thumbnail" /></div> 

<div class="imageElement"><h3>Title 6</h3><p>Mô tả 6</p><a href="#" title="open image" class="open"></a><img src="6.jpg" class="full" /><img src="6.jpg" class="thumbnail" /></div> 

</div> </div> 


Cách 4



Code 

<script type="text/javascript" src="http://www.queness.com/resources/html/slideshow/js/jquery-1.3.1.min.js"></script> 
<script src="http://all4u.dmon.com/Js/FeaturedContent.js" type="text/javascript"></script>
<link href="http://all4u.dmon.com/CSS/FeaturedContent.css" rel="stylesheet" type="text/css" media="screen"> 

<div id="gallery"> 
<a href="#" class="show"><img src="1.jpg" alt="Title ảnh" width="580" height="360" title="" alt="" rel="<h3>Title 1</h3>ND 1 "/> </a> 
<a href="#"> <img src="2.jpg" alt="Title 2" width="580" height="360" title="" alt="" rel="<h3>Title 2</h3>ND 2 "/> </a> 
<a href="#"> <img src="3.jpg" alt="Title 3" width="580" height="360" title="" alt="" rel="<h3>Title 3</h3>ND 3"/> </a> 
<a href="#"> <img src="4.jpg" alt="Title 4" width="580" height="360" title="" alt="" rel="<h3>Title 4</h3>ND 4"/> </a> 
<a href="#"> <img src="5.jpg" alt="Title 5" width="580" height="360" title="" alt="" rel="<h3>Title 5</h3>ND 5"/> </a> 

<div class="caption"><div class="content"></div></div> 
</div>

- Thay đổi độ rộng của ảnh thì thay đổi width đoạn code trên nhé.

- Thay đổi height của ảnh thì down file FeaturedContent.css về sửa height trong đoạn sau nha:

Code 

#gallery {

position:relative;

height:360px

- Thay đổi chiều cao của opacity (ô đen mô tả), thời gian của slide thì down file js về sửa nha.

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



Category: Featured Post - Image Gallery | Views: 873 | Added by: all4u | Tags: Featured Post | Rating: 0.0/0
Total comments: 1
1  
說道:<li><a href="" title="Home page">Home<a href="" title="Subscribe by RSS">RSS<img src="/images/banner.jpg" alt="banner" /><div class="post" id="post-"><?php wp_link_pages('Pages: ', '', 'number'); ?><?php edit_post_link('Edit', '', ''); ?><!-- -->Filed under: 404 Error: The page you're looking for is not here.阿湯說:你好,目前沒有時間可以協助修改哦,現在修改CYC也都是採收費制了.

Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page