JS hay đầy đủ hơn với tên gọi là Javascript. Nó một ngôn ngữ lập trình được tạo ra vào năm 1995 bởi Brendan Eich tại Netscape. Mục đích ban đầu để nâng cao khả năng tương tác của trang web với người sử dụng. Thông thường mã javascript được nhúng vào trong trang web, và được thực thi bởi trình duyệt. Nhưng cho đến ngày nay thì nó được sử dụng khá rộng rãi trong vấn đề kết hợp với PHP để tạo ra một trang web có tính năng hay và tạo ra những hiệu ứng chuyển động khá là đẹp.
Chính vì để làm đẹp bữa nay Thịnh chia sẻ với các bạn cách nhúng JS vào block mặc định NukeViet. Cụ thể là block module.newscenter và mình sẽ tạo chuyển động cho các tin nằm phía dưới. Lưu ý là đoạn mã php mình sẽ không thêm bớt gì cả mà chỉnh tiến hành trên html vì thế sẽ không có cấu hình hiển thị bao nhiêu tin trên một slide mà mình sẽ đặt mặc định luôn. Nếu bạn nào muốn thay đổi số hiển thị trên một slide thì mình sẽ ghi rõ trong bài.
Sau đây là các bước thực hiện.
- Trước tiên bạn cần tiến hành tải về js, css, html mẫu của bộ js chuyển động dành cho slide dạng tin mà bạn cần. Ở đây mình dùng OwlCarousel. Link cụ thể tải về trên github: Link. Lưu ý bạn lấy bản master nhé, nếu bạn muốn khá phá thì dùng bản alpha đang trong quá trình phát triển.
- Tiếp đến giải nén để có được các file bên trong và bạn lấy file
- owl.carousel.css
- owl.theme.css
- owl.transitions.css
bỏ vào thư mục css của themes.
File owl.carousel.js thì bạn cho vào thư mục js của themes. Ngoài ra bạn cũng cần lấy file ảnh để tạo nút next và preview nếu cần cho vào thư mục images của themes.
- Tiếp đến bạn tìm tới file có tên gọi là block_newscenter.tpl. File này chính là file html để hiển thị cho block module.newscenter mà mình lấy ví dụ.
- Bạn mở nó ra để xem code bằng bất cứ trình soạn thảo văn bản nào và nhúng đoạn mã gọi file js và css sau vào trong file đó. Lưu ý bên trong thẻ đóng mở <!– BEGIN: main –> <!– END: main –>
<link rel="stylesheet" media="screen" type="text/css" href="{NV_BASE_SITEURL}themes/{TEMPLATE}/css/owl.carousel.css" /> <link rel="stylesheet" media="screen" type="text/css" href="{NV_BASE_SITEURL}themes/{TEMPLATE}/css/owl.theme.css" /> <link rel="stylesheet" media="screen" type="text/css" href="{NV_BASE_SITEURL}themes/{TEMPLATE}/css/owl.transitions.css" /> <script type="text/javascript" src="{NV_BASE_SITEURL}themes/{TEMPLATE}/js/owl.carousel.js"></script>Trong đó biến NV_BASE_SITEURL là biến mặc định của hệ thống NukeViet, {TEMPLATE} là biến đã được truyền giá trị tên themes ở trong file php của block.
- Tiếp đến bạn tìm tới khu vực mở đóng thẻ <!– BEGIN: othernews –> <!– END: othernews –> bạn xóa cho mình thẻ “col-md-6″ của bootstrap và cũng trong thẻ đóng mở othernews bạn thêm bên ngoài nó cho mình một thẻ div và trong thẻ này bạn đặt id=”owl-news” được kết quả như sau.
<div id="owl-news" > <!-- BEGIN: othernews --> <div class="margin-bottom-news"> <a href="{othernews.link}" <!-- BEGIN: tooltip -->data-placement="{TOOLTIP_POSITION}" data-content="{othernews.hometext}" data-img="{othernews.imgsource}" data-rel="tooltip"<!-- END: tooltip --> title="{othernews.title}" ><img src="{othernews.imgsource}" alt="{othernews.title}" class="img-thumbnail-news" width="{blocknews.width}"/>{othernews.titleclean60}</a> </div> <!-- END: othernews --> </div> - Tiếp theo bạn tiến hành viết lệnh Javascript để thực thi đoạn mã trên vào trước đoạn mã <!– END: main –> như sau:
<script type="text/javascript"> $(document).ready(function() { $("#owl-news").owlCarousel({ autoPlay: 3000, slideSpeed : 500, paginationSpeed : 500, itemsCustom : [ [0, 1], [450, 3], [600, 4] ], navigation:true, afterInit : function(elem){ var that = this that.owlControls.prependTo(elem) } }); }); </script> - Như vậy là xong, bây giờ bạn có thể goi thêm đường dẫn sang một file css khác để viết đoạn code css cho đẹp slide hoặc chuyển đoạn mã thực thi javascript sang một file js khác.
Lưu ý: trong đoạn javascript có thông số [0, 1], [450, 3], [600, 4] tức là ở màn hình nhỏ hơn 450 sẽ hiển thị một tin, ở màn hình 450 trở lên sẽ hiển thị 3 tin, ở màn hình 600 cho tới max là 4 tin hiển thị.
Sau khi xong thì nó sẽ hơi mộc mạc theo OwlCarousel. Vì thế nếu bạn muốn đẹp sẽ cần phải viết thêm css cho nó.
Ở link download dưới mình đã chỉnh hình css cho nó đẹp hơn cũng như gom code để cho nó gọn gàng hơn.
Link download: GitLab
Xong, quá đơn giản luôn, đến đây chắc các bạn đã hiểu cách làm. Mọ thắc mắc các bạn để lại bình luận dưới để mọi người cùng thảo luận!