为FancyBox添加自定义按钮并绑定点击事件获取当前图片src

Hey there! Adding a custom button to FancyBox's toolbar (right alongside slideShow, fullscreen, and close) to grab the current image's src is straightforward. Let me walk you through the exact steps:

Step 1: Initialize FancyBox with Your Custom Button #

FancyBox lets you customize the toolbar via the toolbar configuration option. You can insert your custom button directly between the built-in ones:

// Bind FancyBox to your gallery elements
Fancybox.bind("[data-fancybox]", {
  // Customize the toolbar order and add your button
  toolbar: [
    "slideShow",
    "fullscreen",
    // Your custom "Get Image Src" button
    {
      name: "getImageSrc", // Unique identifier for the button
      // Icon: Use an SVG or font icon (this is a "link" icon example)
      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>',
      // Click handler to get the current image's src
      click: function (fancyboxInstance) {
        // Get the currently active slide
        const currentSlide = fancyboxInstance.current;
        
        // Make sure we're dealing with an image slide
        if (currentSlide.type === "image") {
          const imageSrc = currentSlide.src;
          
          // Do whatever you need with the src here
          console.log("Current Image Source:", imageSrc);
          alert(`Current image URL: ${imageSrc}`);
          // Example: Copy to clipboard
          // navigator.clipboard.writeText(imageSrc).then(() => alert("Src copied to clipboard!"));
        }
      }
    },
    "close"
  ]
});

What's happening here: #

• The toolbar array defines the order of buttons. We've inserted our custom button between fullscreen and close.
• The name property gives your button a unique class (e.g., fancybox-button--getImageSrc) for styling.
• The icon can be any HTML—use an SVG (like above) or a font icon (e.g., Font Awesome's <i class="fa fa-copy"></i> if you have it loaded).
• The click function receives the FancyBox instance, so you can access current to get the active slide's data. We check if it's an image first to avoid errors with other content types (like videos).

Step 2: Style the Button to Match FancyBox's UI #

To make your button blend in with the default FancyBox toolbar, add a little CSS:

/* Match default button styles */
.fancybox-button--getImageSrc {
  color: inherit;
  padding: 8px;
  transition: background-color 0.2s ease;
}

/* Hover effect like other buttons */
.fancybox-button--getImageSrc:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

Step 3: Example HTML Markup #

Make sure your gallery links use the data-fancybox attribute so FancyBox picks them up:

<!-- Gallery images -->
<a href="path/to/full-image-1.jpg" data-fancybox="my-gallery">
  <img src="path/to/thumbnail-1.jpg" alt="First image">
</a>
<a href="path/to/full-image-2.jpg" data-fancybox="my-gallery">
  <img src="path/to/thumbnail-2.jpg" alt="Second image">
</a>

Quick Notes #

• If you're using a different version of FancyBox (v3 vs v4), double-check the API docs for minor syntax differences—but the core approach of customizing the toolbar remains similar.
• If you want to handle non-image content, adjust the if (currentSlide.type === "image") check to suit your needs.
• You can extend the click handler to do more than just log the src—like copying it to the clipboard, opening it in a new tab, etc.

内容的提问来源于stack exchange，提问作者Pezhvak