Tìm kiếm nhanh

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

Thảo luận trong 'Hỗ trợ modules' đăng bởi nhimthulinh, 22/06/2016 06:21.

  • nhimthulinh

    nhimthulinh

    Điều hành viên Quản trị diễn đàn

    Đ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).

    [ATTACH=full]1[/ATTACH]

    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ànhshadowbox 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ở filethemes/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ở filethemes/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,....

    Nguồn bài viết: mynukeviet.net

     

    Tệp đính kèm:

Chia sẻ trang này

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