Issue with Fancybox's close button not being displayed when using a different template

On one of my pages, I'm trying to use two different FancyBox styles for different elements. To accomplish this, I have included the tpl option and made adjustments to the stylesheet. Here is what I currently have:

$(document).ready(function() {
$(".login").fancybox({
    closeClick  : false,
    closeBtn : true,
    tpl: {
        wrap     : '<div class="fancybox-wrap1" tabIndex="-1"><div class="fancybox-skin1"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
        closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>'
        }
    });
});

In my CSS file, I have added new styles for .fancybox-wrap1 and .fancybox-skin1. The styles are working well, but I encountered an issue where the "close" button completely disappears on the FancyBox with the modified template. I have tried both including and omitting the closeBtn from the tpl, but it doesn't seem to change anything.

You can view a demo here. In the future, I will need different background images for the FancyBox, not just background-color, which is why I am making these modifications.

I would greatly appreciate any assistance in figuring out what I might be doing incorrectly. Thank you!

javascriptcssfancybox

Answer №1

Ensuring that your .fancybox-skin1 div has the necessary fancybox-skin class applied is crucial for seamless functionality. By referencing Fancybox code version 2.1.2, specifically line 884, you can observe how the skin is identified through this class:

$.extend(coming, {
                skin  : $('.fancybox-skin',  coming.wrap),
                outer : $('.fancybox-outer', coming.wrap),
                inner : $('.fancybox-inner', coming.wrap)
            });

This reference is then utilized to add the closeBtn element, as seen in line 1440:

// Create a close button
            if (current.closeBtn) {
                $(current.tpl.closeBtn).appendTo(F.skin).bind('click.fb', F.close);
            }

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

Is there a way to dismiss a modal window from the parent?

How can I close a modal window from its parent? This task seems quite challenging to accomplish. Essentially, I am opening a non-modal window. In some cases, the user may open a modal window from this non-modal window. If I close the non-modal window, I al ...

javascripthtmlmodal-dialogmodalpopupsnon-modal

How can I display an iframe element only if it exists within an object in Angular?

I'm currently exploring options to specifically display the iframe element within a block of HTML content being sent to my Angular application. While I can use a *ngIf directive in my template to check for the presence of the tag, I am unsure of how ...

javascriptangulartypescript

Uncover the content of a base64 encoded string and convert it into

A JSON response has been linked on the user's request to retrieve an excel document. The structure of the response is as follows: { "format": // file extn ----only xls "docTitle": //file name "document" :// base 64 encoded data } The attem ...

javascriptangulartypescript

Exploring the World of Dynamic Table ID Access in Rails 5 with Coffeescript

Within my Index view, I have a table that I want to dynamically populate with an ID. This is what I've attempted so far: id="table_<%= @controller_name %>" The method in my controller looks like this: def get_controller_name @controller_nam ...

javascriptruby-on-railscoffeescript

Is it possible to use jQuery to refresh only a section of the page and modify the URL at the same time?

There is a page (http://myflashpics.com/picture/p9e0) that displays user information along with a small thumbnail on the side. Currently, when clicking on the image, it redirects to a different page and the sidebar reloads as well. I am curious if it' ...

javascriptjqueryajax

The functionality of .map() in Javascript is non-existent

I am completely new to this community (and JavaScript is also new for me), so I apologize in advance for asking some very basic questions. I have an HTML page with various images, all of which share a common class. After using getElementsByClassName, I obt ...

javascriptarrays

Add an event listener to a dynamically created div block through jQuery when it is clicked

When the page loads, a dynamic div appears that is visible to the user and in Firebug, but is not available in the page source. The content within this div changes dynamically. I am attempting to bind a click event to this div so that when a user clicks o ...

javascriptjqueryhtml

"Encountering a Challenge with Setting Up Forms on

I've recently started learning to code and I'm facing an issue with my form appearing stretched out. You can view it here: I initially thought it was due to margins, so I increased them. Then, I tried adjusting the width to 50%, but that didn&ap ...

htmlcssforms

What steps should I take to address a problem involving a callback function?

I'm currently working on an application that aims to connect users with friends based on specific questions they answer. However, I keep encountering an error message stating "TypeError [ERR_INVALID_CALLBACK]: Callback must be a function" when the cod ...

javascriptjsonapiecmascript-6

Using jQuery to Activate Genuine Events

Is it true that jQuery's trigger() only executes event handlers bound with jQuery? I have some modules that utilize native browser event binding. Although the solution from works for me, I'm curious if there is a built-in way in jQuery to handle ...

javascriptjqueryjquery-events

`Troubleshooting: Inability to chain selectors for custom styling in Next JS module`

When I chain selectors in a CSS file, the styles don't seem to apply as expected. I'm importing the styles into the component and it only applies for the main class. For example: import styles from './Home.module.css' const Home = () = ...

cssnext.js

The issue with the callback function not being triggered within a self-repeating loop

As I work on creating a user-script to incorporate a trailer video into a website, I encountered an issue with the callback function in my script. The goal is to filter the real source of the video from different URL formats, but for some reason, the callb ...

javascript

Creating a dynamic canvas with a three-dimensional model using three.js: A step-by-step guide

I'm currently developing a website where I have integrated a canvas element to display a 3D object (specifically, a cube) using three.js. The canvas is housed within a div, following the guidelines found in various documentation. The issue arises wh ...

javascriptcsshtmlthree.js

Consolidate and then transfer to a different database

How can I insert the data returned from my aggregate (controller function) into another collection called User? Here is the schema for the User: const userSchema = new mongoose.Schema({ firstName: { type: String, required: [true, &ap ...

javascriptnode.jsmongodbmongoose

I am having trouble scrolling through the main content when the side-drawer is open. How can I fix this issue?

When the sidebar is opened, I am facing issues with the main content scroll and certain fields such as select options and search bar not functioning properly. I have included the main content in the routes from which it is being loaded. However, the scroll ...

javascripthtmlcssreactjsmaterial-ui

Ways to designate a tab as active

Having trouble styling the active tab in my tabbed menu created with Bootstrap. The active class seems to only affect the first tab. How can I make it work for all tabs? Check out this screenshot for reference. Below is the code snippet: <script ...

javascriptjqueryhtmlcsstwitter-bootstrap

Javascript tabs with clickable links

I have created a page with a series of thumbnails that reveal content below when clicked. The content is positioned absolutely and set to display:none, with javascript changing this for each thumbnail. (I am not very familiar with javascript and learned t ...

javascript

Ensuring the value of a v-text-field in Vuetify using Cypress

I am currently developing an end-to-end test suite using Cypress for my Vue and Vuetify frontend framework. My goal is to evaluate the value of a read-only v-text-field, which displays a computed property based on user input. The implementation of my v-tex ...

javascriptvue.jscypressvuetify.js

Unable to fetch information from the local host using an AJAX request and PHP script

I'm having trouble retrieving the <p> elements echoed in my PHP script. I need a solution that allows me to style these <p> nodes using a JavaScript function without refreshing the page. Can someone help me with this issue? Here is my PHP ...

javascriptphpajax

Is there a way to access and read the console log of a specific website using Python code? I am looking to extract messages such as "ok" and "connected

Seeking guidance on how to interpret console log output for a specific website while automating with Python. Struggling to extract live console data through Selenium, as there's no built-in function for reading logs in real-time. Although I can acces ...

javascriptpythonpython-2.7apiselenium