Keep fancybox items in their designated spot

When the window is opened at full size, everything looks fine. However, when you resize the window horizontally, the thumbnails shift and disappear. I want them to remain fixed in their position like the large pop-up image so that users can still see them by scrolling vertically.

Can anyone offer assistance with this issue?

JSFIDDLE: http://jsfiddle.net/ny9ytae5/4/

Here is the HTML code:

<a caption="<h2>Image Header</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>" rel="Sold" class="fancybox" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a>

        <a class="fancybox hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a>

        <a class="fancybox" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>

        <a class="fancybox hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>

UPDATE: I discovered that removing the following line from jquery.fancybox-thumbs.js solved the problem:

'left': Math.floor($(window).width() * 0.5 - (obj.group.length / 2 * this.width + this.width * 0.5))

However, this solution only works if the browser is opened at full size. If the user opens the site in a small window, the thumbnails still do not appear.

javascriptjqueryhtmlcssfancybox

Answer №1

Here is a simple solution for your needs:

HTML:

<div class="container">
     <!-- Your content goes here -->
</div>

CSS:

.container{
    width: 100%; /* Set to any desired width */
    -webkit-overflow-scrolling: touch; /* Mobile optimization */
    overflow-x: auto;
    white-space: nowrap;}

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 hard coding permissions in the frontend considered an effective approach?

I'm in the process of creating an inventory management system that allows admin users to adjust permissions for other employees. Some permissions rely on others to function properly, and I need to display different names for certain permissions on the ...

javascripthtmlangularuser-permissions

AngularJS: Understanding the difference between ng-show and using display:none

I recently encountered a scenario where I needed to hide an HTML element by default using CSS. Here's how I did it: HTML: <div class="box"> </div> CSS: .box { display: none; } However, I wanted to be able to show and hide the elem ...

javascriptcssangularjsng-show

The proper way to insert data in JavaScript and PHP

Hello. I have a new function to add a row in my form. However, I recently added a second input field and I am unsure of how to correctly insert it. Below is my JavaScript code: <script type="text/javascript" src="jquery.js"></script> <scri ...

javascriptphpsqlinputinsert

When a form is submitted, the PHP file is opened in a new page instead of running the script

I have developed a contact form that needs to be validated through ajax PHP before being sent via PHP email. However, upon clicking submit, the page refreshes and redirects to a new page: mypage.com/form_process.php Additionally, the stylesheet is not l ...

phpjqueryajaxwordpress

Can content projection be utilized from a child component in Angular?

Keep in mind, this example could be achieved without using content projection. I am just showing a simplified version here. Imagine having a component that displays lists of names in two separate elements: import { Component } from '@angular/core&ap ...

htmlangulartypescript

Problems with jQuery UI datepicker and current date

My goal is to configure the jQuery UI datepicker so that the minimum date allowed is today, and the maximum date is at least 18 years from now. If a user chooses a date less than 18 years ago, an error message should be displayed: $('#dateofbirth&apo ...

jqueryjquery-uijquery-ui-datepicker

Interact with PHP by utilizing Jquery to update or remove data using the PUT

I'm running into an issue while trying to utilize Jquery.ajax() with PUT and DELETE methods. I am sending data with the request, but on the PHP side, when I print the request, it shows up empty. $.ajax({ url: 'ajax.php', type: 'DELETE& ...

phprestjquery

Card Alignment with Bootstrap

I need help aligning the last two elements in the card. I want the first one (a button) to be on the left, and another element (a Div with multiple social icon images) on the right side. Can someone provide guidance on how to achieve this layout? <!D ...

htmlcsstwitter-bootstrapbootstrap-5

Embed video with a custom thumbnail in an iframe

Hello everyone! I'm a first-time user on stackoverflow seeking some help. Currently, I am using Dreamweaver to work with HTML and CSS in order to build a website. My task involves sourcing a video from a television archive and embedding it onto my si ...

htmlcssiframedreamweaver

Creating a rotating wheel using JavaScript that is activated by a key press event

I need some help with implementing a keystroke event in this code so that the spinning wheel can start based on a key press, like the spacebar. Any suggestions on how to achieve this? I have found an event code for keystrokes in JavaScript: document.body. ...

javascripthtml

Tips for avoiding re-rendering during onclick event handling

let content=useRef(); let toHide=useRef(); useEffect(()=>{ content.current=document.querySelectorAll('.content'); toHide.current=document.querySelectorAll('.hide'); toHide.current?.[0].addEventListener("cli ...

htmlreactjs

Generating additional react-select dropdowns depending on the selection made in the initial dropdown menu

I am currently working on a travel website. I am in need of a dropdown menu for users to select the number of children they will be traveling with, with options for 1, 2, or 3. If the user chooses 1 child, then an additional react-select element should ...

javascriptreactjs

C# - Implementing JavaScript Object manipulation in .NET Core

As I was browsing, I noticed many similar questions from years ago. Let's kick off this discussion with a simple JavaScript example showcasing how easy it is to modify, read, and write properties in objects using this language. Take a look at the cod ...

javascriptc#jsondynamicexpandoobject

What is the best way to assign dynamic values for array destruction?

Is there a way for me to avoid manually writing out six lines by implementing a loop to retrieve all six values from one line instead? console.log(array[0].name.LINE1) console.log(array[0].name.LINE2) console.log(array[0].name.LINE3) console.log(array[1].n ...

javascriptnode.jsarraysreactjsreact-native

Is it possible to extract information from a form's POST request without relying on the traditional "action" attribute within form elements?

Last night, I was experimenting with ExpressJS and discovered something interesting when working with a simple code snippet: app.post('/contact', function(req, res, next) { res.send('Congratulations! You have submitted the form'); }) ...

javascriptformsexpressaxios

Type the query into the search bar on the website, hit the submit button, and receive the search results

Is there a way to dynamically pass any query string (from any oracle table, not hardcoded) from a webpage form/field to the database and have the webpage display a table/grid of the results without predefining columns or table names? Current examples I&apo ...

javascriptnode.jsspringangularspring-boot

Creating a full-height page with collapsible content using Bootstrap 4 and flex

I'm attempting to create a collapsible div with a fixed height within a full-height page using flex and bootstrap 4 (also encountering the same issue with bootstrap 3). The current code snippet functions correctly on Firefox, but encounters a problem ...

csstwitter-bootstrapflexboxbootstrap-4

Even after refreshing the page, Chrome stubbornly insists on showing the old data

I've been working on a single-page application where one page triggers server requests every time it loads. After making changes and deploying them, I noticed that the live version of the application was not reflecting the updates. Even though the cha ...

javascriptangularjsgoogle-chromev8spidermonkey

Difficulty in packaging JavaScript resources within Laravel Project

Having trouble setting JS functions as global in my project: In the 'resources\js"', I have: numerosALetras.js: /////////////////////////// function unidades_nal(n){ ... } function decenas_nal(n){ ... } function centenas_nal(n){ ...

javascriptphplaravelvite

Angular: merging animations with scope updates

If you're curious to see some code, check it out here: some code My inquiry pertains to using Angular to blend a change in data triggered by a click with a fade in/fade out animation. I've managed to implement content changes on click and anima ...

javascriptangularjsanimation