https://baobacninhtv.vn/js/article-image.js

1// Thay thế toàn bộ nội dung file article-image.js bằng đoạn này (Version 10)
2
3(function($) {
4    
5    // Đảm bảo mã chỉ chạy khi DOM đã sẵn sàng (jQuery ready)
6    $(document).ready(function () {
7
8        // --- BƯỚC 0: KIỂM TRA FANCYBOX ĐÃ TẢI CHƯA ---
9        if (typeof Fancybox === 'undefined' || typeof Fancybox.show !== 'function') {
10            console.error("Lỗi: Fancybox V4 chưa được tải hoặc không được định nghĩa khi DOM đã sẵn sàng. Vui lòng kiểm tra lại thứ tự tải file fancybox.umd.js.");
11            return; 
12        }
13
14        const imageBlockSelector = '.news-details__content table.center';
15        
16        // --- BƯỚC 1: Thu thập dữ liệu Gallery và gắn data-index ---
17        const galleryData = [];
18        const imageBlocks = document.querySelectorAll(imageBlockSelector);
19
20        imageBlocks.forEach(function(table, index) {
21            const img = table.querySelector('img');
22            const captionElement = table.querySelector(".image_desc p");
23            
24            if (img) {
25                const imageUrl = img.src;
26                const captionText = captionElement ? captionElement.textContent.trim() : '';
27
28                // Thêm dữ liệu vào mảng cho FancyBox.show()
29                galleryData.push({
30                    src: imageUrl,
31                    caption: captionText
32                });
33
34                // Gán data-index vào TABLE
35                table.setAttribute('data-index', index);
36            }
37        });
38        
39        // --- BƯỚC 2: Gán sự kiện click ---
40        
41        // Loại bỏ tất cả các sự kiện click FancyBox hoặc click cũ trên các phần tử này
42        $(imageBlockSelector).off('click.fancybox').off('click').find('img').off('click.fancybox').off('click');
43        
44        // Gắn sự kiện click mới vào tất cả các bảng ảnh
45        $(imageBlockSelector).on('click', function(e) {
46            
47            // Ngăn chặn hành vi mặc định và lan truyền sự kiện
48            e.preventDefault(); 
49            e.stopPropagation(); 
50            
51            // Lấy ra phần tử bảng (table) gần nhất đã được gán data-index
52            const clickedTable = $(e.currentTarget).closest(imageBlockSelector + '[data-index]');
53            
54            if (clickedTable.length) {
55                const clickedIndex = parseInt(clickedTable.attr('data-index'));
56                
57                // Mở FancyBox V4 bằng API Fancybox.show()
58                Fancybox.show(galleryData, {
59                    startIndex: clickedIndex, // Mở đúng ảnh được click
60                    groupAll: true,
61                    hash: false,
62                    selector: false 
63                });
64            }
65        });
66
67        console.log(`[article-image.js Fix V10] Đã thiết lập lại FancyBox cho ${galleryData.length} ảnh.`)
68    });
69
70})(jQuery);