Encase your image in a stylish frame using fancyBox 3

How can I enhance the appearance of image-slides in fancyBox 3?

So far, I have experimented with the following code:

<style>
  .fancybox-placeholder {
     padding: 40px;
     background: #fff;
  }
  .fancybox-image {
     position: static;
  }
</style>
<a href="img.jpg" data-fancybox><img src="thumb.jpg"></a>

While this works well for viewing and navigating between slides, it lacks visual appeal during the open/close transition of the fancyBox.

To see this in action, visit this CodePen link.

I am curious if there is a more effective way to implement a frame in fancyBox 3 that maintains a polished appearance when opening and closing the slide/gallery. Unfortunately, my search through the documentation did not yield any helpful information on this topic.

Answer №1

Give this a try - it might be helpful for you.

$("[data-fancybox]").fancybox({
  "onComplete": function() {
    console.log('open');
    $('.fancybox-placeholder').css('padding', '40px');
  },
  "beforeClose": function() {
    console.log('close');
    $('.fancybox-placeholder').css('padding', '');
    // fancybox is closed, run myOtherFunct()
  }
});
.fancybox-placeholder {
  background: #fff;
}

.fancybox-image {
  position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/js/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/css/jquery.fancybox.min.css" rel="stylesheet" />

<h1>Enhance Your Images with fancyBox Frames</h1>
<p>
  <a href="https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg" data-fancybox="images">
    <img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" />
  </a>

  <a href="https://c2.staticflickr.com/6/5499/30972532232_051e1dc57e_h.jpg" data-fancybox="images">
    <img src="https://c2.staticflickr.com/6/5499/30972532232_e9a298a0c5_m.jpg" />
  </a>

  <a href="https://c1.staticflickr.com/9/8021/29345513551_0c565462d8_k.jpg" data-fancybox="images">
    <img src="https://c1.staticflickr.com/9/8021/29345513551_16024a89e3_m.jpg" />
  </a>
</p>

<p>By clicking on the images, you can open them in fancyBox. Note how the white frame around the image may appear too wide initially, but smooths out during zooming. After zoom completion, the frame adjusts to the correct width.</p>
<p>How can I create a stylish frame around an image in fancyBox 3 without sacrificing transitions? Refer to the CSS code for insights into my current solution.</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bug in Responsive Mega Menu Detected

Hey everyone, I've got a Mega Menu below for you to check out! <div id="menu-wrapper"> <ul class="nav"> <li><a href='#'>Brands</a> <div> <div class="nav-colu ...

The complete enclosure within the brackets

I am trying to enclose a div with text inside in brackets. I want the entire text (the div) to be surrounded by brackets. Here is an example of what I am looking for: https://i.sstatic.net/k4QRF.png I considered using border properties like top, bottom, ...

adjust back side height of flip box does not function on IE web browser

I'm currently working on flipping a div/box, and while it's functioning correctly, I'm facing an issue with the height of the back side exceeding that of the front side. This causes the flipped div to always push down to the next element (e. ...

Issues with Collapse Feature on Bootstrap 3 Navbar

I need your help with a problem I'm facing. The navigation bar is not collapsing when I click the link in mobile view. Check out this video for more details: https://www.youtube.com/watch?v=2dBpcFMjqY0 ...

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

Currently, I am utilizing angular in combination with Kendo ui. Is there a way to modify the dimensions of the switch button in Kendo UI Angular using CSS? ...

What could be causing the closest() method in my JavaScript code to not locate the nearest class?

I've encountered an issue while dynamically creating new classes with input fields in my project. For some reason, when I try to remove a previous row, nothing happens. Can anyone help me troubleshoot this problem? Here is the JavaScript code that I ...

Adjusting the navigation image as it passes through various div elements during scrolling

Is it possible to dynamically change an image in the navigation bar based on the user's scroll position? For example, I want pic1 to be displayed when the page content is at the top, then switch to pic2 once the user reaches the footer, and then back ...

Vibrant Reverberation of Color

When creating a table connected to a MySQL database, I encountered an issue with changing the text color inside the rows. How can I display the text in white within the table? I attempted to use <style = color #34242, but it didn't produce the des ...

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

The CSS property -webkit-user-select does not seem to be functioning as intended

I'm currently working on a website optimized for iPads and I'm looking to avoid the copy and paste bubble that pops up when users touch and hold on an image. I want something to trigger on touchstart and ontouchend events instead. Below is my HT ...

Switch the color of an element when onmouseout occurs

I am currently working on a C# web application that includes an asp:Calendar: <asp:Calendar ID="cal_ReserveDate" runat="server" DayStyle-ForeColor="DarkBlue" DayHeaderStyle-BackColor="#FEF6CB" DayStyle-Height="25" DayStyle-F ...

Inconsistent display of Bootstrap tooltip upon mouseover

Utilizing an icon from Font Awesome to showcase text in a tooltip upon mouseover with Bootstrap, I encountered an issue where the tooltip only displays when hovering over the left half of the icon. This discrepancy occurs on both Edge and Chrome browsers, ...

Adding CSS files to a JSP page in a Struts2 application

Hello, I am currently learning Java and working on a Struts2 project. I have added a stylesheet in the following path: /WEB-INF/common/css/style.css and also included Bootstrap in this directory: /WEB-INF/common/css/bootstrap/bootstrap.min.css I ...

Issues with Bootstrap's "img-fluid" class functionality

I recently started the web development course by Colt Steele and ran into an issue while working on the "Museum of Candy project" (I made some modifications to it). The problem is that I am using a widescreen monitor, and when I expand my window, the image ...

How can I ensure that the size of the Dropdown Menu Item matches its parent in both Bootstrap and CSS styles?

I am working on a navigation bar that has a dropdown menu which appears on hover. I want the size of the dropdown menu items to match the size of the parent element. Here is an image for reference: https://i.stack.imgur.com/oNGmZ.png Currently, the "One ...

Creating a loader for a specific component in Angular based on the view

Creating a loader for each component view is crucial when loading data from an API. Here is the current structure of my components within my <app-main></app-main>: <app-banner></app-banner> <app-data></app-data> <app ...

CSS: Dynamically adjusting height based on parent element's current height

I'm seeking clarification on the topic at hand. Why am I unable to simply use the following code: <div style="min-height: 100vh"> <div style="height: 100%"> </div> </div> When I implement this code, ...

Sorry, but we are experiencing difficulties processing your request at the moment. HTTP ERROR 500: We are unable to locate the

My code seems to be functioning correctly when connecting to the database, but I'm encountering an error. Here is the code snippet: <?php include 'header.php'; ?> <!DOCTYPE html> <html> <head> <t ...

Applying Compiled CSS file in Node.js using Express and SASS not working as expected

Recently, I've delved into utilizing NodeJS with Express to serve my pug files. In addition, I decided to incorporate the "express-sass-middleware" to compile and serve the scss/css files in my project. While everything seems to be functioning as expe ...

PHP - WebCalendar - Show or Hide Field According to Selected Item in Dropdown List

Working with the WebCalendar app found at to make some personalized adjustments to how extra fields function. I've set up two additional fields: one is a dropdown list of counties, and the other is a text field. Within the dropdown list, there is an ...