Animated JavaScript Slideshow - 12 November 2010 - All 4 You
Thursday, 23-Feb-2017, 11:06 AM
Welcome Guest | RSS
Main » 2010 » November » 12 » Animated JavaScript Slideshow
2:55 PM
Animated JavaScript Slideshow

Sửa lại rồi paste đoạn code sau vào nơi bạn muốn hiển thị nha.

Chú ý: ảnh chính size 500x300 là đẹp nhất. Tuy nhiên, mình đã cố định height ảnh chính là 300 rồi, do vậy, bạn chú ý edit width ảnh <= 500px nha. Nếu không ảnh sẽ bị "chờm" ra ngoài slide trông rất xấu. 

Còn ảnh thumbnail thì mình đã cố định có height là 75px rồi nha, nên bạn không phải lo resize lại ảnh, có thể dùng link url của ảnh chính cho ảnh thumbnail cũng được.

Code
<link rel="stylesheet" href="http://all4u.dmon.com/CSS/style8.css" /> 

<ul id="slideshow"> 
<li><h3>Title 1</h3><span>1.jpg</span><p>Nd 1</p><a href="#"><img src="thumb_1.jpg" height=75 alt="Chú thích ảnh 1" /></a></li> 
<li><h3>Title 2</h3><span>2.jpg</span><p>Nd 2</p><img src="thumb_2.jpg" height=75 alt="chú thích ảnh 2" /></li> 
<li><h3>Title 3</h3><span>3.jpg</span><p>Nd 3</p><a href="#"><img src="thumb_3.jpg" height=75 alt="chú thích ảnh 3" /></a></li> 
<li><h3>Title 4</h3><span>4.jpg</span><p>Nd 4</p><a href="#"><img src="thumb_4.jpg" height=75 alt="chú thích ảnh 4" /></a></li> 
<li><h3>Title 5</h3><span>5.jpg</span><p>Nd 5.</p><img src="thumb_5.jpg" height=75 alt="chú thích ảnh 5" /></li> 
<li><h3>Title 6</h3><span>6.jpg</span><p>Nd 6</p><a href="#"><img src="thumb_6.jpg" height=75 alt="chú thích ảnh 6" /></a></li> 
<li><h3>Title 7</h3><span>7.jpg</span><p>Nd 7</p><a href="#"><img src="thumb_7.jpg" height=75 alt="chú thích ảnh 7" /></a></li> 
<li><h3>Title 8</h3><span>8.jpg</span><p>Nd 8</p><a href="#"><img src="thumb_8.jpg" height=75 alt="chú thích ảnh 8" /></a></li>
</ul> 

<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div></div>

<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>

<div id="slideright" title="Slide Right"></div>
</div></div>

<script type="text/javascript" src="http://all4u.dmon.com/Js/compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>

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

Category: Featured Post - Image Gallery | Views: 1491 | Added by: Jinn | Rating: 0.0/0
Total comments: 7
7  
Hello there, just required you to know I he added your <a href="http://yekucbm.com">intnreet</a> site to my Google bookmarks due to your layout. But seriously, I feel your web website has 1 in the freshest theme I??ve came across. It extremely helps make looking at your website significantly easier.

6  
Hello, just required you to know I he added your ireenntt site to my Google bookmarks due to your layout. But seriously, I think your world wide web website has 1 in the freshest theme I??ve came across. It extremely helps make studying your web site significantly easier.

5  
Your article was execlelnt and erudite.

4  
Mình thích slideshow này mà có điều sao mình chèn vào thì k được như vậy, hình nó cứ xếp thành hàng dọc áh. buồn

3  
Đúng là đoạn code có vấn đề thật. Có lẽ do “xung” với cái gì đó. Nhưng vào giao diện khác, ví dụ, đoạn code để feather trang Home Page --> login ở giao diện Home page thì 0 được, nhưng vào mục blog thì login bình thường.

2  
Web của mình dùng cái này. Nhưng hình như bị ảnh hưởng đến vấn đề login thì phải. Bỏ đoạn code đi thì login vô tư. Cho đoạn code vào thì chịu chết. Không biết có đúng không nữa?

1  
Bạn thử lại đoạn code đi nha.

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