Hướng dẫn chèn slider hình ảnh vào giữa nội dung bài viết.

26/08/2016
Làm thế nào để chèn một slider hình ảnh vào giữa nội dụng bài viết? Mình nhớ đây là một câu hỏi của thành viên trên cộng đồng nukeviet.

NukeViet sử dụng trình soạn thảo ckeditor, Để có thể chèn một slider hình ảnh ở vị trí bất kỳ vào giữa nội dung bài viết. chúng ta có thể thực hiện nhiều cách như viết thêm plugin, functions. Nhưng cách đơn giản và tiện lợi nhất cho người sử dụng là chèn thêm plugin cho trình soạn thảo nổi tiếng này. Cụ thể ở đây là plugin slideshow cho ckeditor. Xem thêm thông tin plugin tại http://ckeditor.com/addon/slideshow

Xem Video Hướng Dẫn

x


1. Một số lưu ý

Bạn phải kiểm tra lại version của plugin có tương thích và được hỗ trợ với CKEditor hay không. Cụ thể ở đây mình áp dụng cho bản CKEditor đã được tích hợp sẵn nukeviet 4.0.29.

  • Chương trình này tích hợp sẵn 2 thư viện java là  "adgallery" tại http://adgallery.codeplex.com, và với "Fancybox" tại : http: // fancybox.net/
  • Có thể plugin này sẽ không hoạt động tốt trên IE9 trở xuống

2. Hướng dẫn cài đặt

Truy cập vào địa chỉ plugin, click Download để tải về plugin http://ckeditor.com/addon/slideshow
  • Giải nén và copy thư mục slideshow vào /assets/editors/ckeditor/plugins/
  • Mở /assets/editors/ckeditor/config.js. Tìm config.extraPlugins và thêm slideshow nối thêm vào danh sách. Ví dụ sau khi thêm sẽ được config.extraPlugins = 'video,eqneditor,switchbar,tbvdownload,googledocs, slideshow ';
  • Lưu lại tập tin. Cấu hình thành công
Đăng nhập quản trị admin trong website nukeviet. Xóa cache trở lại với trình soạn thảo, bạn đã thấy icon của plugin. Việc upload file thực hiện tương tự như những module khác.
 
icon them slider anh


Xuất hiện thêm icon của plugin slideshow trên trình soạn thảo

giao dien them slider
Giao diện chèn thêm slider cho bài viết

Các bạn có thể xem thêm video bên trên để xem cách xem như thế nào.
 

3. Bước cuối ngoài site

Bổ sung đoạn code sau vào cuối file theme/them-cua-ban/modules/news/detail.tpl ( cho module tin tức) hoặc nhúng nơi nào bạn muốn hiển thị slider đó sau khi chèn.

<link rel="stylesheet" type="text/css"	href="/assets/editors/ckeditor/plugins/slideshow/3rdParty/ad-gallery/jquery.ad-gallery.css" />
<script type="text/javascript" src="/assets/editors/ckeditor/plugins/slideshow/3rdParty/ad-gallery/jquery.ad-gallery.min.js"></script>

 <script type="text/javascript">
  $(function() {
	var galleries = $('.ad-gallery').adGallery();
    setTimeout(function() {
      galleries[0].removeImage(1);
    }, 2000);
  });
  </script>


Lời cuối: chúc các bạn luôn vui vẻ, học tập tốt và đón xem những bài hướng dẫn tiếp theo. Thân Ái

 

 

Tác giả bài viết: Thúc Vinh

Tổng số điểm của bài viết là: 10 trong 2 đánh giá

Xếp hạng: 5 - 2 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

  • hung dung hung dung

    Lỗi không hiện khung hình slideshow mà hiện làm 3 ảnh dọc thế này

    http://sv1.upsieutoc.com/2016/11/05/loi.jpg

    05/11/2016 23:37
  • wanwulee wanwulee

    Mình cũng bị lỗi giống như bạn Long. và bị 1 lỗi nữa là khi click vào hình nó kg phóng lớn hình lên, demo trong trình soạn thảo thì có phóng lớn hình, nhưng ngoài site thì kg. Bạn fix giùm với ạ

    04/09/2016 22:17
  • Long Long

    plugin bị lỗi ko hiện hình thứ 2, như trong bài hướng dẫn này chèn 5 hình nhưng chỉ hiện ngoài web có 4 hình, hình thứ 2 ko hiện, bạn nào sửa code lại được ko? cảm ơn!

    01/09/2016 15:18
    • Thúc Vinh

      @Long Chào bạn. Bạn có thể cho demo xem ạ? Bạn bị vướng ở chỗ nào?

      02/09/2016 23:12
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây