[Module News] Hướng dẫn thêm chức năng mở ảnh bài viết trong Shadowbox

Chủ nhật - 10/05/2015 07:47
Đoạn code dưới đây giúp bạn thêm chức năng xem tất cả ảnh trong bài viết ở dạng popup (Shadowbox).
[Module News] Hướng dẫn thêm chức năng mở ảnh bài viết trong Shadowbox

Thực hiện trên NukeViet 4

Bước 1: NukeViet 4 đã bỏ thư viện shadowbox ra khỏi hệ thống, nên bạn cần download lại thư viện này.
Download shadowbox:  https://github.com/mjackson/shadowbox
Giải nén tập tin vừa download, đổi tên thư mục source thành shadowbox sau đó copy thư mục này vào assets/js/. Khi đó, sẽ tồn tại đường dẫn assets/js/shadowbox

Bước 2: 
Mở file themes/default/modules/news/detail.tpl (Các theme khác làm tương tự)
Tìm
<!-- END: main -->
Thêm lên trên:
<link href="/assets/js/shadowbox/shadowbox.css" type="text/css" rel="stylesheet"/>
<script src="/assets/js/shadowbox/shadowbox.js" type="text/javascript"></script>
<script>
	$(".bodytext img").wrap(function() {
		var $_this = $(this).parent();
		$_this.html('<a href="' + $(this).attr("src") + '" rel="shadowbox[{NEWSID}]" title="' + $(this).attr("alt") + '">' + $_this.html() + '</a>');
	}); 
</script>

Thực hiện trên NukeViet 3

NukeViet 3 đã có thư viện shadowbox, nên không cần tải thêm như ở NukeViet 4
Mở file themes/default/modules/news/detail.tpl (Các theme khác làm tương tự)
Tìm
<!-- END: main -->
Thêm lên trên
<script type="text/javascript">
	$('#news_detail img').wrap(function() {
		var $_this = $(this).parent();
		$_this.html('<a href="' + $(this).attr("src") + '" rel="shadowbox[{NEWSID}]" title="' + $(this).attr("alt") + '">' + $_this.html() + '</a>');
	}); 
</script>

Khi click vào ảnh trong bài viết, ảnh trong bài viết sẽ hiển thị trong hộp Shadowbox. Nếu bài viết có nhiều ảnh, thì sẽ có nút bấm để chuyển qua ảnh tiếp theo.

Trang xem chi tiết bài viết của news mặc định đã load sẵn thư viện Shadowbox, nên ở bài viết này không đề cập đến việc chèn thư viện. Nếu giao diện các bạn chưa load thư viện Shadowbox thì cần bổ sung.

Với hướng dẫn này các bạn có thể làm tương tự cho các thư viện khác, như colorbox, lightbox,....
Chú ý: Việc đăng lại bài viết này trên ở website hoặc các phương tiện truyền thông khác mà không ghi rõ nguồn http://mynukeviet.net - Trung tâm ứng dụng NukeViet là vi phạm bản quyền.

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

Xếp hạng: 4.8 - 20 phiếu bầu
Click để đánh giá bài viết
Rao vặt Đà Nẵng là công cụ mới giúp bạn dễ dàng mang thông tin đến với người xem. Qua đây người dùng có thể đăng tin miễn phí, về các chủ đề như rao vặt, việc làm Đà Nẵng,... lên website mà không phát mất một loại phí nào. 

  Ý kiến bạn đọc

  • Tieo Do Quoc
    Có cách nào cố định kích thước khi xem hình ảnh thì tốt quá, vì có hình lớn hình nhỏ xem đôi lúc cũng khó ak a
      Tieo Do Quoc   10/04/2017 06:42
    • @Tieo Do Quoc bạn thử chưa? Cái này nó tự điều chỉnh kích thước
        Administrator   13/04/2017 09:29
  • Nguyễn Quang Trọng
    Em đã làm được và rất OKE ạ
      Nguyễn Quang Trọng   20/12/2015 09:02
    • @Nguyễn Quang Trọng Có phải lại cá mập cắn cáp không mà sáng nay vào mấy dịch vụ của google xoay như chong chóng
        Administrator   20/12/2015 09:04
  • Thien An
    Em đang sử dụng nukeviet 3.4 cũng không được anh Triển ơi, a xem lại code thử
      Thien An   24/06/2015 18:42
    • @Thien An làm đúng như hướng dẫn chưa bạn. Cho mình xin cái demo xem sao.
        Administrator   24/06/2015 19:16
  • Nguyễn Tất Thắng
    Chức năng này không hiển thị shadowbox được Triển à?
      Nguyễn Tất Thắng   14/06/2015 09:43
  • Nguyễn Tất Thắng
    Bản v4.0.17 không sử dụng được nhỉ?
      Nguyễn Tất Thắng   29/05/2015 09:31
    • @Nguyễn Tất Thắng để em check lại rồi cập nhật lại sau nha. Em đang ở HN nên bận quá
        Administrator   14/06/2015 12:47

Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.

Powered by NukeViet - a product of VINADES.,JSC