Fancybox 5: Correctly listen to navigation events and execute custom functions

This tutorial explains in detail how to correctly listen to the navigation events of the image library (such as "next picture") in Fancybox 5 and execute custom JavaScript functions. This article will distinguish between the configuration options of `Fancybox.bind` and the event listening mechanism of `Fancybox.on`, and demonstrate how to avoid common syntax errors and logic misunderstandings through sample code to ensure that your custom logic is accurately triggered during Fancybox navigation.

When building interactive web pages, you often need to respond to user actions. When using a lightbox plug-in like Fancybox to display images or content, it is a common requirement to listen to its internal navigation events (such as the user clicking on the "next" image) and execute custom logic. This article will delve into the method of correctly achieving this goal in Fancybox 5, focusing on the correct usage of configuration options and event listening.

Understanding the event model of Fancybox 5

Fancybox 5 provides two main ways to interact with its instances:

1. Fancybox.bind() configuration options : used to set the behavior and appearance of a Fancybox instance when initializing it. These options are usually static, such as animation duration, whether the button should be shown or not, etc. Some options may accept functions as values, but this is generally to provide dynamic configuration, not as an event handler.
2. Fancybox.on() event listener : This is a mechanism used by Fancybox to listen to specific events in its life cycle. When a specific behavior occurs on the Fancybox instance (such as opening, closing, switching to the next image, loading completion, etc.), the corresponding events will be triggered, and we can register callback functions through Fancybox.on() to respond to these events.

Confusing these two mechanisms is a common reason why custom logic doesn't perform as expected.

Common mistakes and analysis of their causes

Many developers may try to directly define a property named next in the configuration object of Fancybox.bind() to listen for the "next" event, as shown below:

 Fancybox.bind("[data-fancybox]", {
    next: function() {
        return(console.log('Next called'); // Syntax error and incorrect method}
});

There are two main problems with the above code:

1. Syntax error : The console.log('Next called') statement is missing a closing parenthesis, and the usage of the return statement is not standard here. The correct function body should be console.log('Next called'); or return console.log('Next called');.
2. Logic error : More importantly, next is not a standard property in the Fancybox.bind configuration object for listening to navigation events. Even if the syntax is correct, putting it here will not get called as an event handler. Fancybox.bind is mainly used to bind selectors and set initialization options, rather than registering global event listeners.

The correct way to listen to the "next picture" event: use Fancybox.on()

In order to execute a custom function when Fancybox navigates to the next image, we should use the Fancybox.on() method. This method allows us to globally listen to specific events triggered by the Fancybox instance.

Here's the correct way to listen for the "next" event:

 // 1. Initialize the Fancybox instance and bind the element Fancybox.bind("[data-fancybox]", {
    // Other Fancybox configuration options can be set here // For example: speed: 300, loop: true
});

// 2. Listen to the "next" event of Fancybox Fancybox.on("next", (fancybox, slide) => {
    console.log("Fancybox navigates to the next picture!");
    console.log("Current slide data:", slide);
    //Execute your custom logic here // For example: update page statistics, load related content, etc.});

Code analysis:

• Fancybox.bind("[data-fancybox]", {}): This part of the code is responsible for initializing Fancybox and binding all elements with data-fancybox attributes as Fancybox triggers. You can add other configuration options here as needed.
• Fancybox.on("next", (fancybox, slide) => { ... })：
  • Fancybox.on() is the method to register event listeners.
  • The first parameter "next" specifies the name of the event to be listened to. Fancybox provides a variety of events, such as change (when the slide changes), close (when the Fancybox is closed), done (when the content is loaded), etc.
  • The second parameter is a callback function that will be executed when the "next" event is triggered.
  • The callback function receives two parameters:
    • fancybox: The current Fancybox instance object, through which you can access Fancybox's API and properties.
    • slide: An object representing the current slide, including detailed information about the currently displayed content, such as slide.src (content source), slide.index (slide index), etc.

Complete example

For better demonstration, here is a complete HTML structure and JavaScript code that shows how to set up Fancybox and listen for the "next" event:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fancybox 5 event listening tutorial</title>
    <!-- Introducing Fancybox CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css">
    <style>
        body { font-family: sans-serif; margin: 20px; }
        .gallery-item { display: inline-block; margin: 10px; border: 1px solid #eee; padding: 5px; }
        .gallery-item img { width: 150px; height: 100px; object-fit: cover; cursor: pointer; }
    </style>



    <h1>Fancybox 5 navigation event listening</h1>
    <p>Click on the image to open Fancybox, then try clicking the "Next" button. </p>

    <div class="gallery">
        <a data-fancybox="my-gallery" href="https://lipsum.app/id/1/800x600" class="gallery-item">
            <img src="/static/imghw/default1.png" data-src="https://lipsum.app/id/1/150x100" class="lazy" alt="Picture 1">
        </a>
        <a data-fancybox="my-gallery" href="https://lipsum.app/id/2/800x600" class="gallery-item">
            <img src="/static/imghw/default1.png" data-src="https://lipsum.app/id/2/150x100" class="lazy" alt="Picture 2">
        </a>
        <a data-fancybox="my-gallery" href="https://lipsum.app/id/3/800x600" class="gallery-item">
            <img src="/static/imghw/default1.png" data-src="https://lipsum.app/id/3/150x100" class="lazy" alt="Picture 3">
        </a>
    </div>

    <!-- Introducing Fancybox JS -->
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
        //Initialize Fancybox
        Fancybox.bind("[data-fancybox=&#39;my-gallery&#39;]", {
            // You can add some global configuration, for example:
            // speed: 400,
            // loop: true
        });

        // Listen to the "next" event Fancybox.on("next", (fancybox, slide) => {
            console.log("----------------------------------------");
            console.log("Fancybox navigation event: The next picture is triggered!");
            console.log("Current slide index:", slide.index);
            console.log("Current slide source (src):", slide.src);
            // Other custom operations can be performed here // For example: sending GA events, updating UI elements, etc. document.title = `Fancybox - Picture ${slide.index 1}`; // Example: Update page title});

        // You can also listen to other events, such as "change" (when the content changes)
        Fancybox.on("change", (fancybox, slide) => {
            console.log("----------------------------------------");
            console.log("Fancybox content change event is triggered!");
            console.log("Current slide index:", slide.index);
        });

        // Listen to the "close" event Fancybox.on("close", () => {
            console.log("----------------------------------------");
            console.log("Fancybox has been closed!");
            document.title = "Fancybox 5 event listening tutorial"; //Restore page title});
    </script>

In the above example, when you open Fancybox and click the "Next" button, the browser's console will output the corresponding log information, and the title of the page will also be updated accordingly, clearly demonstrating the effect of Fancybox.on("next", ...).

Notes and Summary

1. Consult official documentation : Always refer to Fancybox's official documentation ( https://global.php.cn/link/ac1195357ddafa8192abdf6fb2dde004 ) to learn about all available event names, their parameters, and best practices.
2. Distinguish between bind and on : It is clear that Fancybox.bind is used for initialization and configuration, while Fancybox.on is used for event listening.
3. Syntax Correctness : Make sure the syntax of your JavaScript code is correct, especially the matching of function definitions and parentheses.
4. Event parameters : Note that each event callback function may receive different parameters. For example, the next and change events will pass in the fancybox instance and the slide object, while the close event may not pass in any parameters or only the fancybox instance.

By following these guidelines, you can effectively listen to various events and integrate custom logic in Fancybox 5 to create a more dynamic and responsive user experience.

The above is the detailed content of Fancybox 5: Correctly listen to navigation events and execute custom functions. For more information, please follow other related articles on the PHP Chinese website!