Thứ Hai, 23 tháng 6, 2014
Số lượt xem bài này:
Làm Slideshow có chú thich với HTML cho Blog
Để làm Slideshow cho ảnh riêng lẻ thì có vô số phần mềm chuyên dụng (Proshow Gold, Bolide Slideshow Creator...) nhưng nếu như chỉ cần để nhúng vào Blog ta có thể chỉ cần sử dụng cách làm Slideshow với code HTML thôi !
Có lần tôi đã hướng dẫn các bạn làm Slideshow với code HTML ( các bạn có thể kích vào dòng chữ màu cành bên trái để xem lại)
Tuy vậy trong bài đó chỉ làm Slideshow đơn thuần mà không có chú thích cho ảnh nên lúc xem người đọc không biết ảnh đó là gì. Vì vậy hôm nay tôi chia sẽ cho các bạn cách làm Slideshow từ ảnh riêng lẻ có kèm theo chú thích nhé !
Một số lưu ý như sau:
- Bạn phải tập hợp các ảnh mà bạn muốn làm Slideshow rồi Upload (tải lên) một dịch vụ nào đó cho link trực tiếp như Photobucket, Dropbox...). Nên nhớ là phải điều chỉnh các ảnh cho kích thước đồng đều trước lúc tải lên mạng ! Để có một slide đẹp thì ngay công việc chọn ảnh đồng đều là quan trọng !
- Chú thích cho ảnh không nên quá dài (2 dòng thôi), nếu không slide không hiện hết đâu.
- Bạn chỉ chèn được 1 slide trong bài viết thôi, nếu không sẽ xẩy ra xung đột (Slide thứ 2 không hiện được).
- Chú thích cho ảnh không nên quá dài (2 dòng thôi), nếu không slide không hiện hết đâu.
- Bạn chỉ chèn được 1 slide trong bài viết thôi, nếu không sẽ xẩy ra xung đột (Slide thứ 2 không hiện được).
Để tạo slide có kèm chú thích cho ảnh, các bạn dùng đoạn code nhúng mẫu sau đây và thay thế những chỗ cần thiết cho Slideshow của mình (link ảnh, màu chữ chú thích của ảnh kích thước ảnh..)
Các bạn chỉ cần thay:
- URL nếu cần gắn liên kết : là địa chỉ trang web nào đó mà bạn muốn khi kích vào ảnh đang hiện hành trong trình chiếu thì trang đó sẽ được mở ra. Cái này nếu không cần thì bạn có thể bỏ qua
- Link ảnh 1, Link ảnh 2... là link ảnh trực tiếp của ảnh mà các bạn đã tải lên dịch vụ ở bước trước. Cái này bắt buộc phải có
- Có bao nhiêu ảnh trong Slideshow thì các bạn thêm bấy nhiêu dòng <a href="URL nếu cần gắn liên kết"><img src="Link ảnh 1" alt="Chú thích cho ảnh"></a> vào nhé
Trong code trên những chỗ cần thiết để bạn thay đổi cho hợp vởi ý mình tôi đã có chú thích bên cạnh để các bạn dễ thay đổi thông số ở những dòng code đó !
Ngoài ra nếu bạn nào am hiểu hơn về HTML thì có thể chỉnh sửa ở file.js trong code để có thể điều chỉnh khoảng cách dừng lại lâu hơn để người xem có thời gian đọc hết những chú thích dài trong Slideshow.
Lưu ý là chỉnh sửa file.js phải rất thận trong nếu không code nhúng sẽ không hoạt động. Chỉnh sửa xong các bạn phải tải lên dịch vu như DropBox để có link file.js này ! Nếu không am hiểu lắm các bạn tạm dùng file.js của tôi cho nhàn (chắc không làm bạn vừa ý lắm với Slideshow của riêng mình).
- Sau khi đã làm các bước thay đổi trên, các bạn copy đoạn code này và nhúng vào bài viết ở chế độ HTML rồi xuất bản là OK !
Các bạn hãy xem tôi làm DEMO ở phía dưới (ảnh hơi dài, các bạn kéo xuống phía dưới để xem chú thích)
7 nhận xét
thông tin bổ ít lắm thank bạn nha, nhưng mình chưa chỉnh đc ảnh = với khung slider có cách nào k vạy bạn?
Để ảnh đồng dều bạn nên chọn sơ lược trước những ảnh có kích thước ban đầu gần giống nhau (cả rrộng và dài),sau đấy dùng phần mềm Photoscape để thay đổi kích thước ảnh hàng loạt với menu Batch Editor của nó.
Trong code mẫu mình cho kích thước khung hình cho ảnh là: rộng x cao : 500x218. Vì vậy lúc thay đổi kích thước cho ảnh hàng loạt ở Photoscape bạn cũng nên chỉnh kích thuwớc ảnh gần như thế nhé
có thể tăng tốc độ hiênt thị chú thích ko bạn nó lâu quá
Bạn tăng chỉ số trong ngoặc ở mục này
#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
Nhà hàng ngon biển Hải Tiến
Nha hang ngon bien Hai Tien
Khach san o bien hai tien
Ô tô vinh nghệ an
Là đại lý chính thức của Công ty ô tô Việt Nam
Vị trí toạ lạc tại Số 1 TP Vinh ô tô VINH Nghệ an rất tiện lợi để Quý khách đến xem xe, mua xe, lái thử, bảo hành, bảo dưỡng…
Giá tốt nhất với các chương trình khuyến mãi đặc biệt từ Hãng và Đại lý.
Tư vấn tận tình sẽ giúp Quý khách tìm được chiếc xe phù hợp với nhu cầu.
Thủ tục mua xe trả góp nhanh chóng, trả trước chỉ 20%, lãi suất thấp.
Lái thử tận nhà, nhanh chóng trải nghiệm xe ô tô mà không tốn thời gian.
Bảo hành, bảo dưỡng và sửa chữa theo tiêu chuẩn chất lượng toàn cầu.
Cung cấp phụ tùng ô tô chính hãng.
Trong quá trình tìm hiểu xe, nếu gặp bất cứ thắc mắc nào liên quan tới thông số kĩ thuật, giá chính thức cũng như khuyến mãi hấp dẫn nhất mời quý khách liên lạc với tôi – Ms Nga –TOYOTA VINH, với kinh nghiệm hơn 5 năm bán hàng, tôi tin rằng sẽ giúp quý khách tìm được chiếc xe ưng ý nhất.
Mobile: 0911 711 588
https://mercedesbenzvinh.com.vn/
https://hondavinhnghean.com/
https://ototoyotavinh.com/
http://hyundaidunglac.com/
http://hyundaivinhnghean.com/
http://hyundaidunglac.com.vn/
http://raovatxunghe.com/
http://diadiemnghean.com/
https://dailyotovietnam.com/
http://diadiemhatinh.net/
Đăng nhận xét
1- Nhận xét chỉ nên liên quan đến bài đăng, phải có tính chất xây dựng và có văn hóa !
2- Để chèn biểu tượng cảm xúc vào nhận xét, các bạn nhập các ký hiệu bên dưới của hình vào phần viết nhận xét.
3- Việc nhập tài khoản Google của bạn và nhập 2 từ xác minh trước lúc gửi nhận xét là bắt buộc !
4- Các bạn có thể chèn Video trên Youtube hay ảnh bằng cách dán link của video (trên thanh địa chỉ) hay link ảnh trực tiếp ở khung soạn thảo nhận xét !
5-Các bạn có thể post code trong nhận xét nhưng phải mã hóa code trước ! Để mã hóa code các bạn vào đây