Hộp thư ưa thích: Thêm chú thích và những thứ khác

Question

Tôi muốn biết cách tôi có thể thêm nhiều hơn tiêu đề (ví dụ: chú thích hoặc liên kết) vào hộp thư ưa thích. Tôi biết rằng nếu tôi thêm tiêu đề = "Bla", nó sẽ hiển thị trong hộp. Nhưng nếu tôi thêm một cái gì đó như caption = "Blabla" vào liên kết hình ảnh của tôi, tôi cần mã nào trong jquery.fancybox.js để kéo thẻ chú thích đó?

Answer 1

Bạn không cần phải gây rối với tệp gốc jquery.fancybox.js vì bạn có thể thêm tùy chọn này trong tập lệnh hộp thư ưa thích tùy chỉnh của riêng bạn.

Nếu bạn đang sử dụng HTML5 DOCTYPE, bạn có thể sử dụng thuộc tính data-* cho bạn chú thích để bạn có thể có HTML này:

<a class="fancybox" href="images/01.jpg" data-caption="This is the caption" >Open fancybox</a> 

Sau đó thiết lập kịch bản Fancybox tùy chỉnh của bạn và nhận được data-caption sử dụng beforeShow callback như

$(document).ready(function() { 
$('.fancybox').fancybox({ 
    beforeShow : function(){ 
    this.title = $(this.element).data("caption"); 
    } 
}); 
}); // ready 

Điều đó sẽ ghi đè lên title và thay vào đó hãy sử dụng data-caption.

Mặt khác, bạn có thể muốn giữ lại các thuộc tính title và xây dựng của title Fancybox kết hợp cả hai, title và data-caption thuộc tính như vậy, cho HTML này

<a class="fancybox" href="images/01.jpg" title="This is the title" data-caption="This is the caption">Open fancybox</a> 

Sử dụng kịch bản này

$(document).ready(function() { 
$('.fancybox').fancybox({ 
    beforeShow : function(){ 
    this.title = this.title + " - " + $(this.element).data("caption"); 
    } 
}); 
}); // ready 

Ngoài ra, bạn cũng có thể nhận được caption/title từ một phần tử HTML khác trong tài liệu của mình (ví dụ: <div>) có thể có liên kết hoặc oth er Các phần tử HTML. Kiểm tra các bài viết cho các ví dụ mã: https://stackoverflow.com/a/9611664/1055987 và https://stackoverflow.com/a/8425900/1055987

LƯU Ý: này là dành cho Fancybox v2.0.6 +

Answer 2

Cũ câu hỏi, nhưng nhờ câu trả lời JFK của tôi phát hiện ra rằng, với phiên bản mới nhất của fancybox bạn có thể thêm chú thích đơn giản bằng cách nhập một giá trị trong thuộc tính title="" (theo mặc định). Chỉ cần đảm bảo nó được đưa vào phần tử <a> với lớp fancybox.