Trouble with Fancybox 2 and CSS classes not applying correctly

Despite my previous successful experiences with fancybox, I am currently facing an issue where the CSS styling is not being applied as expected. The large images appear grouped correctly, but without any styling, causing them to shift to the right after appearing centered initially.

Upon inspecting the elements via web tools, it seems that the CSS classes are not being properly applied to the fancybox elements, which might be causing the alignment issues. Despite double-checking the script and css inclusion, the problem persists.

As someone not well-versed in javascript, I have tried searching for solutions online but have come up empty-handed so far. Any assistance provided would be greatly appreciated.

Link:

Thank you in advance for any help offered.

jquerycssfancyboxfancybox-2

Answer №1

It seems that the fancybox css file is present, but for some reason the fancybox css settings are not being properly applied to the box. Why could this be?

The way you are loading your fancybox css is like this:

<link rel="stylesheet" href="http://www.example.com/fancybox2/jquery.fancybox.css" media="print" type="text/css" />

HOWEVER, if you see the attribute :

media="print"

... it indicates that the fancybox styles will only take effect when (and if) you decide to print your document. This doesn't seem very logical, does it?

To fix this issue, simply change media="print" to media="screen"

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

Ready document not triggering at the anticipated time

I've developed a website where all the pages are loaded using ajax. When I load the first page, I check if jQuery is loaded by using: if (window.jQuery) { alert('jQuery is loaded'); } Every time this script runs, it successfully alert ...

jqueryajax

Expand the clickable area of the checkbox

Is it possible to make clicking on an empty space inside a table column (td) with checkboxes in it check or uncheck the checkbox? I am limited to using only that specific td, and cannot set event handlers to the surrounding tr or other tds. The functional ...

javascriptjqueryhtml

The JSON data may be improperly formatted

My script is not functioning correctly, it returns about 20 undefined values before finally displaying the full_name: function retrieveUserInfo(phrase) { $.ajax({ url: 'get_staff_details.aspx?rand=' + Math.random(), type: &ap ...

jqueryjsonasp.net-3.5

The Double Trigger of Ajax Notifications

Can anyone help me figure out why the alert is firing twice? The code snippet involves a checkbox with the class .onoffswitch. <script type="text/javascript"> $(document).ready(function(){ $('.onoffswitch').click(function(){ ...

jqueryajax

What is the best approach to modifying the color of a menu item in the sidebar upon clicking it using Material-UI in a React application?

I am a beginner with this framework and my goal is to change the color when clicking on a Menu Item in the Sidebar. For example, clicking on the table component should change the table name and icon to white color. Could someone please help me figure out h ...

javascripthtmlcssreactjsmaterial-ui

How to disable or enable a submit button in jQuery 1.8

Recently, I upgraded from jquery version 1.5.2 to 1.9 and encountered an issue with my disabled buttons not functioning properly. The buttons should become enabled after the form fields are filled out, allowing the user to either remove or save the infor ...

javascriptjquery

Show the JSON data returned through an AJAX request

I'm encountering an issue with displaying the response obtained from the code provided below. Can someone assist me in showing the response on my page as retrieved from this code: $(document).ready(function () { console.log("ready!"); $(&apos ...

jqueryajax

Transition effects should be applied solely to the foreground text color, not to the background image

Is there a way to specifically apply the css3 transition effect only to the text color? Imagine having a readmore class with a transition effect defined like this: .readmore { colour: red; -webkit-transition: all .3s ease-out; -moz-transition ...

htmlcss

The dropdown feature in Bootstrap 4 only works once in a Rails application

After updating to Bootstrap 4.0.0, setting it up in Rails 5.1.5 based on the README from their github, and adding it to the package.json for yarn, I encountered an issue. Here is the setup in gemfile : gem 'bootstrap', '~> 4.0' gem ...

jqueryruby-on-railsdrop-down-menubootstrap-4yarnpkg

Ensure that the accordion in jQuery remains open while navigating

I am currently developing a jQuery accordion feature where clicking on an 'li' element will both navigate and close the accordion. However, I need the accordion to stay open after navigating. Can someone please advise me on how to achieve this? T ...

jqueryaccordion

jQuery DataTables covering a CSS-anchored menu bar

My webpage has a pinned navigation menu bar at the top and some tables with interactive features using jQuery's DataTables. However, after implementing jQuery, I encountered an issue where the tables cover the menu when scrolling down, making it uncli ...

javascriptjqueryhtmlcssdatatable

Display WooCommerce notifications when using the AJAX add to cart feature

Looking to enhance my WooCommerce shop by incorporating AJAX functionality for the add to cart feature, I stumbled upon this incredibly useful tutorial which worked seamlessly. However, after implementing the solution, I noticed that the WooCommerce notic ...

phpjqueryajaxwordpresswoocommerce

How to reference color variables from code behind in ASP and use them in CSS files

I have a total of 3 files dedicated to my Login-Screen: Login.aspx, Login.aspx.cs, and LoginStyle.css Upon the execution of the Page_Load method, I retrieve various data from the current system, including the theme-color represented as a string (e.g., #00 ...

cssasp.netcode-behind

Unable to create a flawless circle using Canvas

No matter how hard I try, drawing a perfect circle seems impossible for me. Every time I attempt it, all I manage to create is an ellipse. Check out this code snippet I put together as an example: function canvasClicked(number) { var c = "canvas" + nu ...

javascripthtmlcsscanvas

The functionality of jQuery Serialize() seems to be malfunctioning when used in an Ajax

This is my AJAX request $(document).ready(function(){ $("#register-submit").click(function(){ var formData = {hotelname: $('#hotelName').val(), contactType: $('#contactType').val(), contactNumber: $('#contactNumber ...

jqueryjsonpostserialization

There seems to be a connection issue between my Jquery and HTML, as they

I've hit a roadblock because my jQuery isn't connecting and I can't seem to figure out why. It's been stumping me for hours. Here is the HTML code snippet from exercise6.html: <!DOCTYPE html> <html lang="en> <h ...

javascriptjqueryhtml

What is the best way to eliminate extra space at the bottom of glide.js?

Looking for assistance to eliminate the whitespace at the bottom of an image or slider. Can anyone help? Here is a preview of the image: https://i.stack.imgur.com/mEYY3.png If you'd like to take a look, here is the project code link: I had to down ...

javascripthtmlcssglidejs

Implementing a FadeOut effect for the clicked link

When clicking on each link, I want the same link to fadeOut() after clicking on the ok button in the myalert() function. If clicked on cancel, it should not fadeOut(). How can I achieve this using the myalert() function? For example: http://jsfiddle.net/M ...

javascriptjquery

Guide on how to append input field data to a table using jQuery

My current project involves working with a table, and I have encountered some challenges along the way. Typically, I have 4 input fields where I can input data that is then sent to the table in my view. However, if I exceed 4 values and need to add more, I ...

javascriptjqueryhtmlcss

Swap Text Inside String - JS

I have a challenge where I need to extract an ID from an HTML element and then replace part of the extracted word. For instance: HTML <input type="checkbox" id="facebookCheckbox"></div> JavaScript var x = document.getElementById("facebookCh ...

javascripthtmlcssreplace