Scroll To Top

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

Đăng lúc: Chủ nhật - 21/08/2016 02:28 |  NukeViet | : Phạm Văn Phương | Đã xem: 328 |   0

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

Đ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).
selection 271 800 393
 

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[131]" 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[131]" 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,....

Nguồn tin: mynukeviet.net

 Bài viết thuộc chuyên mục: NukeViet

 

Tip:Bài viết, video, hình ảnh, vui lòng gửi về địa chỉ email: tienthanh1966@gmail.com, phavaphu@gmail.com hoặc capphiha@gmail.com


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

Click để đánh giá bài viết
 Từ khóa: tất cả

  Ý kiến bạn đọc

DANH NGÔN
Nếu bạn yêu hai người cùng một lúc, thì tôi khuyên bạn hãy chọn người thứ hai. Nếu người thứ nhất đủ hoàn hảo thì bạn sẽ không để ý đến bạn thứ hai đâu. Tin tôi đi!
kenhbgyoutube

 

 

 

 

 

 

BÌNH LUẬN MỚI NHẤT - TIN TỨC
BÌNH LUẬN MỚI NHẤT - WINDOWS
MỖI LÚC MỘT NỤ CƯỜI
Thống kê truy cập
  • Đang truy cập67
  • Máy chủ tìm kiếm8
  • Khách viếng thăm59
  • Hôm nay13,684
  • Tháng hiện tại180,584
  • Tổng lượt truy cập2,864,119
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