▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

TẠO SLIDESHOW ẢNH (Kiểu 2)

Bài trước, tôi đã giới thiệu cho các bạn cách tạo slideshow ảnh kiểu 1 (Xem TẠI ĐÂY). Tiếp tục bài này tôi xin giới thiệu thêm cách TẠO SLIDESHOW ẢNH (kiểu 2).
Ở kiểu 2 này, các ảnh này sẽ được trình diễn "chạy" từ bên phải qua bên trái, khi bạn rê chuột vào thì ảnh sẽ "dừng" lại và hiện ra dòng chú thích nhỏ cho ảnh. Khi bạn bấm vào "nó" sẽ dẫn bạn đến trang liên kết mà bạn muốn.
Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.




Xem thử


Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.


<script type="text/javascript">
//Specify the slider's width (in pixels)
var sliderwidth="500px"
//Specify the slider's height
var sliderheight="300px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[1]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[2]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[3]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[4]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>


Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, trong đó sliderwidth (Độ rộng của Slidershow) sliderheight (Chiều cao của Slidershow) sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này
leftrightslide[n+1]='<a href="địa chỉ liên kết"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'.
Trong đó n là số thứ tự của ảnh cuối cùng...
Dán tiếp phía dưới theo thứ tự tăng dần
Ví dụ: ở đoạn code trên Slideshow sẽ có tất cả 5 ảnh được tính từ số 0 đến số 4, bây giờ tôi muốn slideshow có tất cả 10 ảnh thì code sẽ giống như vầy:
 <script type="text/javascript">
..............................
..............................
leftrightslide[0]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[1]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[2]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[3]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[4]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[5]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[6]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[7]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[8]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[9]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'

...............................
..............................
</script>
Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

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


▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

27 nhận xét:

MinhThang_pdav nói...

Cảm ơn Dũng rất nhiều, đây là cái mình cần.
Chúc bạn vui vẻ!!!

dungheineken nói...

Mình cũng cám ơn bạn đã ghé tham quan và ủng hộ dunghennessy
Chúc bạn vui khoẻ và hạnh phúc

저 는 이 미 석 임 니 다 nói...

Nhờ bạn chỉ dùm mình: Làm thế nào để tải một slideshow ảnh từ một trang web về máy?

dungheineken nói...

Nếu slide show ảnh được làm bằng code HTMl như kiểu trên thì bạn không thể tải về máy tính được, chỉ khi nào SlideShow bằng Flash thì bạn mới tải về được bạn ạ!!!

저 는 이 미 석 임 니 다 nói...

vậy tải về bằng cách nào? Mình muốn sao chép flash đó sang website của mình!

dungheineken nói...

Nếu đang sử dụng trình duyệt FireFox thì bạn tham khảo bài này:
http://dungheineken.blogspot.com/2011/04/tai-video-va-game-flash-de-dang-voi.html

Honda nói...

tại sao trên slide của mh cứ hiện lên dòng chữ này hả bạn?
Read more: TẠO SLIDESHOW ẢNH (Kiểu 2) | dunghennessy
Under Creative Commons License: Attribution Share Alike
mh xóa đi thì slide ko lên nữa. Khó hiểu ghê

dungheineken nói...

Bạn copy code dán vào notepad và xoá những dòng chữ này đi rồi hãy áp dụng cho vào blog...

Honda nói...

mình đã cho vào notepad như bạn chỉ dẫn nhưng vẫn ko đc. Nó vẫn ko hiển thị slide. Còn cách nào khác nữa ko bạn ơi?

dungheineken nói...

Vậy chắc là do code này xung đột với một code nào đó ở blog của bạn rồi...

Hiếu Nguyễn Quang nói...

Cho Mình hỏi nếu muốn tải những bài viết mới nhất thì làm thế nào bạn

dungheineken nói...

Bài viết mới nhất nào??? Ở đâu hả bạn Hiếu Nguyễn Quang???

Hiếu Nguyễn Quang nói...

bạn cho mình hỏi chút nếu mình muốn nó tự co ảnh về một kích thước mặc định thì làm thế nào bạn ơi

dungheineken nói...

Ở đây mình chỉ thay đổi được chiều cao của ảnh ở mục height mà thôi (không thể để về mặc định được)

Dung Minh Nguyen nói...

Cho tôi hỏi "địa chỉ liên kết " là địa chỉ gì? Mình có thể bỏ trống được kg? Link ảnh thì mình có rồi.Cảm ơn bạn.

dungheineken nói...

Link liên kết là khi mình bấm vào hình ảnh thì nó sẽ dẫn đến một trang Web/blog nào đó mà mình đã liên kết đến (chủ yếu dùng để quảng cáo), nếu không thích thì bạn bỏ trống cũng được, không sao cả

Hair Black nói...

dũng ơi chỉnh kích thước chiều cao ngắn lại được không?

dungheineken nói...

Thì bạn chỉnh độ cao ở dòng lệnh màu đỏ phía trên cùng đó (sileheight)...

Vinh Quang nói...

chào bạn, mình add cái widget thứ nhất thì thành công.Nhưng khi add thêm cái widget thứ 2 thì nó làm cái widget thứ nhất bị ảnh hưởng theo. có cách nào khắc phục không bạn, vì trang chủ mình có nhiều phân đoạn, mình muốn làm nhiều cái widget như thế này.

dungheineken nói...

Các Widget sẽ chịu ảnh hưởng lẫn nhau, vì vậy mình không thể tạo nhiều widget này trên cùng một trang được bạn ạ!!!

duong thy nói...

Anh ơi. E muốn slideshow bắt đầu từ tận cùng trang từ phải qua trái thì sửa chỗ nào? Em lấy đoạn của a paste vào mà nó lại hiện ra từ giữa trang :(

Dung PHAM HOANG nói...

Em thay đổi ở dòng lệnh sliderwidth (màu đỏ ở trên cùng) với số lớn hơn (bằng với chiều ngang của blog) là Ok

duong thy nói...

Da em cam on anh nhieu. Em lam duoc roi :D

duong thy nói...

Cai slide nay no bi gioi han so luong hinh ha a? E lam toi hinh 20 thi van hien len, con lam toi hinh 21 thi no bien mat luon cai slide roi?

Dung PHAM HOANG nói...

Không có, em thử làm lại xem sao (hay em xoá nhầm chỗ nào rồi đó), thử lại nha

Thinh Nguyen nói...

Anh Dũng ơi, em tạo slide kieu 2 nay xong roi. nhưng khi xem lại thì bị lỗi ko hiển thị hình, còn lúc mới làm thì hình vẫn hiển thị và chạy bình thường. làm sao khắc phục dc anh nhi?

Dung PHAM HOANG nói...

Lúc đầu "chạy" được, bây giờ thì "không"??? Sao kỳ vậy.
Em xem lại các link hình xem nào? Chắc do link hình bị sai rồi (nhớ rằng địa chỉ hình phải nằm trong dấu ngoặc kép nha!!!)

Đăng nhận xét

 
Powered by by: Blogger