Скачать или смотреть How to Change Link title to data-caption in Fancybox 3 Using JavaScript

Discover an easy solution to transform link `title` attributes into `data-caption` attributes for Fancybox 3. Enhance your gallery displays effortlessly!
---
This video is based on the question https://stackoverflow.com/q/65566420/ asked by the user 'user2957822' ( https://stackoverflow.com/u/2957822/ ) and on the answer https://stackoverflow.com/a/65566880/ provided by the user 'Onkar' ( https://stackoverflow.com/u/7121507/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Fancybox 3 change link title to data-caption

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Change Link title to data-caption in Fancybox 3 Using JavaScript

Fancybox 3 is a powerful tool for adding attractive galleries and lightboxes to your website. It provides various options to enhance user experience. One common question among developers is how to change the title attribute of a link into a data-caption attribute that Fancybox can easily utilize. This guide delves into this problem and provides a simple JavaScript solution.

Understanding the Problem

In a typical Fancybox setup, you might have links that look like this:

[[See Video to Reveal this Text or Code Snippet]]

Here, the title attribute provides a description that you want to display when a user opens the lightbox. However, Fancybox 3 requires a data-caption attribute to show captions alongside images.

Objective

Your goal is to achieve a transformation where:

If a link has a title attribute, that title should be copied over to a new data-caption attribute.

If the title is empty or not assigned, no changes are required.

The desired output should look like this:

[[See Video to Reveal this Text or Code Snippet]]

The Solution

Let’s look at how you can accomplish this with a simple JavaScript code snippet using jQuery.

Step-by-Step Guide

Ensure jQuery is Included:
Make sure you have included jQuery in your HTML. You can add it using a CDN link:

[[See Video to Reveal this Text or Code Snippet]]

Add the JavaScript Snippet:
Use the following JavaScript code to iterate through each link that has the data-fancybox attribute set to "gallery". This code checks for the title attribute and, if it exists, assigns its value to the data-caption attribute.

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

jQuery Selector: The $('a[data-fancybox="gallery"]') selects all anchors that are part of the Fancybox gallery.

.each() Method: This function iterates over each selected element.

Attribute Check: The condition if($(this).attr('title') != '') checks if the title attribute is not empty.

Set data-caption: If the title exists, $(this).attr('data-caption', $(this).attr('title')) sets the value of data-caption to match the title.

Conclusion

By implementing the JavaScript code above, you can seamlessly convert any link titles into data captions for Fancybox 3. This small adjustment not only enhances your gallery's functionality but also improves the overall user experience by ensuring that captions are displayed alongside photos in the lightbox.

Feel free to reach out if you have more questions or need further assistance with Fancybox implementation. Happy coding!