Nhân tiện có bạn email nhờ mình làm demo Slide hình ảnh nên post lên đây để chia sẻ với mọi người
Có rất nhiều Plugin của jQuery giúp chúng ta tạo ra slideshow nhanh chóng với nhiều hiệu ứng đẹp. Một trong số đó là jQuery Cycle.
jQuery cycle là một plugin gọn nhẹ giúp chúng ta tạo ra các slideshow động trên trang web với nhiều hiệu ứng đẹp, không chỉ tạo ra slide hình ảnh, jQuery cycle có thể slide bất cứ phần tử html nào mà bạn muốn, như một đoạn văn bản chẳng hạn…
Hôm nay chúng ta sẽ sử dụng jQuery cycle để tạo Slideshow hình ảnh như sau:
Slideshow hình ảnh với jQuery cycle plugin
PS: Bổ sung Slide tin tức giống Zing.VN, nếu bạn quan tâm có thể xem demo và Download
XEM DEMO Xem Demo Slide tin tức (Zing)
Download Demo (102.3 KiB, 3,622 Lượt tải)
Download Demo Slide tin tức (206.1 KiB, 3,154 Lượt tải)
Lưu ý: jQuery cycle là một plugin của jQuery, nên để chạy được plugin này bạn cần thư viện jQuery, nếu chưa có bạn có thể vào jquery.com để Download
1, Tiếp theo bạn Download jQuery cycle tại đây: http://malsup.com/jquery/cycle/download.html
2, Chèn thư viện jQuery và jQuery cycle vào thẻ <head> của website
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script>
3, Trong thành phần <body> của HTML chúng ta tạo mã HTML của Slideshow như sau:
<div id="slide">
<img src="imgs/1.jpg" alt="Picture 1" />
<img src="imgs/2.jpg" alt="Picture 2" />
<img src="imgs/3.jpg" alt="Picture 3" />
<img src="imgs/4.jpg" alt="Picture 4" />
<img src="imgs/5.jpg" alt="Picture 5" />
</div>
<div id="slide-nav"></div>
jQuery cycle sẽ chọn các thành phần là con của <div id=”slide”> (không phải thành phần cháu trong cấu trúc DOM) để đưa vào vòng lặp. Ở đây chúng ta chọn được 5 thành phần <img> để tạo slide.
Thành phần <div id=”slide-nav”> là nơi chúng ta sẽ hiện thị phân trang (paging) của Slideshow, phân trang này sẽ tự động thêm vào tương ứng với số lượng hình ảnh của chúng ta
4, Tiếp tục thêm đoạn mã sau trong thẻ <head> để tạo slider:
<script type="text/javascript">
$(document).ready(function(){
$("#slide").cycle({
//Các tùy chọn của jQuery cycle
fx: 'fade', //Hiệu ứng
speed: 1000, //Tốc độ diễn ra hiệu ứng 1/1000s
timeout: 3000, //Thời gian thay đổi giữa các trong 3s
pager: '#slide-nav' //Tạo phân trang
});
});
</script>
Bạn có thể xem các tùy chọn của jQuery cycle tại đây: http://jquery.malsup.com/cycle/options.html
Xem thêm các hiệu ứng tại đây: http://jquery.malsup.com/cycle/browser.html
5, Cuối cùng, thêm một chút CSS để dịnh dạng Slideshow, mình sẽ không đề cập nhiều đến CSS, bạn có thể định dạng theo ý bạn, chỉ lưu ý một chút:
- Slideshow (div id=”slide”) sẽ có position là relative
- Các Slide (<img>) sẽ có position là absolute
Mã CSS cho demo trên:
* { margin: 0; padding: 0 }
body { font: 14px arial }
#wrapper { width: 800px; margin: 0 auto; margin-top: 50px }
#slide, #slide-nav {background: #000; padding: 10px; width: 480px; height: 195px}
#slide img { top: 10px !important; left: 10px !important }
#slide-nav {height: 20px}
#slide-nav a{ background: #eee; margin-right: 4px; padding: 1px 5px; text-decoration: none; border: 2px solid green; color: green}
#slide-nav a.activeSlide{background: green; color: #fff}
KẾT LUẬN
Qua bài học này chúng ta đã tạo được một slideshow hình ảnh rất nhanh chóng với jQuery cycle plugin.
Bạn có thể truy cập http://jquery.malsup.com/cycle/ để xem nhiều demo hơn và tìm hiểu thêm về plugin này, chúc bạn sẽ có nhiều ứng dụng thú vị với nó.
Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter 
Đinh Văn Phường (4)
Nguyen Van Than (2)
Ban xe dap the thao (1)
Bùi Văn Thiêm (1)
{ 20 comments… read them below or add one }
Anh PT ơi, anh có thể viết 1 bài hướng dẫn về RegEx được không ạ
PHP ý anh ạ.
Đề tài này hơi hóc búa đấy nhé, em có thể tìm hiểu trên google trước, nếu khó khăn gì em có thể email cho anh để trao đổi thêm, khi nào rảnh anh sẽ viết về RegEx. Hiện tại EW cũng chưa chuyển sang để viết về PHP được, vì còn đang loay hoay ở jQuery
mấy cái bbcode của VBB hình như cũng có cái này
BBcode khác Regex nhé bạn
BBcode là những shortcode để định dạng, chèn mã HTML vào bài viết…
Regex là biểu thức chính quy dùng trong việc khớp mẫu, kiểm tra tính hợp lệ của dữ liệu, như kiểm tra có đúng định dạng email hay không…
Hơ . em không rõ nhưng cái mycode Mybb mà e hay nghịch có cái này
Regular Expression *: \[b\](.*?)\[/b\]
Replacement *: $1
Nên e nghĩ nó có dây mơ dễ má đến mycode
Ah, cái này là sử dụng Regex trong PHP để xử lý và lấy giá trị của BBcode sau đó chuyển qua HTML em ah. Như ví dụ của em \[b\](.*?)\[/b\] thì sẽ lấy được tất cả giá trị của BBcode [b]giá trị[/b] và chuyến thành <b>giá trị</b> để hiện thị lên website.
Để tạo được 1 slide ảnh tương tự như trên với nhiều hiệu ứng tùy chọn cực đẹp cũng có rất nhiều cách, mình xin giới thiệu với các bạn 1 cách cực kỳ đơn giản, cách này thích hợp với bất kì ai, chỉ cần biết đọc chữ, không cần có bất kỳ 1 kiến thức nào về PHP hay jQuery… Đó là sử dụng các phần mềm tạo Slide ảnh, sau khi tạo xong Public nó ra PHP hay HTML là công việc đã hoàn tất.
Một số phần mềm mình biết như sau:
1)wowslide
2)visuallightbox
3)Sothink_JavaScript_Web_Scroller
4)Benvista PhotoZoom Pro
5)AAA photo Album (phần mềm này tương đối hay và dễ sử dụng)
Vì cũng ít sử dụng cách này để làm nên cũng k tìm hiểu nhiều, các bạn tìm hiểu thêm trên Google với từ khóa “phần mềm tạo slide ảnh cho web”
Web bây giờ nói chung cũng như web 2.0 nói riêng hạn chế dùng flash, flash chủ yếu dùng khi cần thiết thôi .với lại làm web mà lại ko cần biết php,jquery thì chắc chỉ có dùng wyswyg mà kéo thả
).
Rất đồng tình với ý kiến của Thanh, wyswyg thì chỉ đạt được mục đích nhưng lại không hiểu được cơ chế của nó, khi gặp trục trặc sẽ khó sửa chữa nếu không biết hand code.
Theo HHV thì cũng không hẳn như vậy, tùy theo góc nhìn thôi. Với coder mà nói thì không hiểu không được, nhưng đối với một số ngừoi dùng đơn giản thì không hiểu đôi khi lại là cái lợi
) lol không phải nặng đầu
Hì, cũng đồng ý với HHV luôn, những bạn không chuyên và không phải là coder thì có thể sử dụng những soft hỗ trợ trên.
Cám ơn bạn Xuân Hồng…
hiii
Cái này thực chất cũng sẽ hỗ trợ nhiều cho anh em trong công việc, đồng ý là phải biết code tuy nhiên nếu đã biết code rồi, sử dụng các phần mềm trên thì cũng đã tiết kiệm cho mình rất nhiều thời gian viết từ đầu. Chỉ cần dùng chúng xong, code lại theo ý nữa thì hoàn thiện và rất nhanh chóng. Nếu k biết code thì khỏi cần chỉnh, sử dụng ngay cũng OK lắm
Hình như cái slide show tin tức Zing lúc trước chưa có mà ta
Lúc đầu thì chưa có, sau này mới bổ sung em ah
anh ơi tại sao em dùng jquery up lên mạng mà nó hiện thị hết cả ảnh ra, ko hiện slide nhu ở nhà hix, anh xem hộ em nha http://maiyeuem.net63.net/news/index.htm
Anh ơi anh chỉ giùm em ở file fash này có chèn cái biểu tượng ở trên góc bên trái liệu có cách nào xóa đi không anh.Em tải một cái template miễn phí về để học code nhưng đến lúc định dùng thì thấy cái này nhìn không ổn .Em đã thử dùng phần mềm sothink biên tập lại nhưng khi nó xuất file ra rồi thì lại không biết cách để tổng hợp lại.Mong anh chỉ giùm
Cảm ơn anh nhiều.
Link: http://www.mediafire.com/?8qhdih4zvb961lh (1.5 Mb)
http://www.mediafire.com/?v1snum5hn6swt9h (Trình biên tập ngược )
Anh ơi anh cho em hỏi em làm các buớc tạo Slideshow như anh huớng dẫn sao không đuợc vậy anh.Nó chỉ hiển thị phần hiệu ứng ảnh thui còn phân trang sao không có. Anh có thể demo clip hướng dẫn cụ thể lại không? Mong anh giúp đỡ, xin cám ơn
Hi em,
Em download demo xuống rồi so sánh với code của mình xem lỗi ở chỗ nào nhé.
Thân,
Cảm ơn rất nhiều !! Những bài viết của bạn rất hữu ích.