Looking for a Plugin that Can Responsively Display Images in a Vertical Layout - Does One Exist using Jquery

Looking for a gallery slider plugin that is responsive both horizontally and vertically. Have tried Flexslider1/2, Galleria, and others but they do not adjust to vertical resizing. Changing the CSS did not help.

If you resize the browser horizontally with Flexslider, images will adjust accordingly, but resizing vertically cuts off the image. The goal is for images to maintain aspect ratio and fit within the browser window when resizing vertically or horizontally.

Any assistance would be greatly appreciated. If more clarification is needed, please ask instead of downvoting

javascriptjquerycssslidergallery

Answer №1

After exploring the code in Flexslider, it seems that there is no specific exclusion preventing image resizing on vertical window changes. The image resize process appears to be purely CSS-based, feeding width and height information into the JavaScript. It appears that the issue lies in a combination of DOM/CSS problems with browsers not resizing images on vertical window changes, along with potential compatibility issues with FlexSlider.

Getting all browsers to understand 100% vertical layouts without vertical scrolling has always been a bit challenging, as it deviates from the normal layout paradigm. While newer CSS versions have improved this situation somewhat, there can still be discrepancies in how different browsers interpret a 100% layout design.

To tackle this issue, I utilized the slider demo and referenced a stack answer to achieve a successful implementation of a 100% vertical layout. You can view the final result here.

Initially, adjusting the image CSS properties to scale the height while keeping the width auto helped improve the layout's aspect:

width: auto;
height: 90%;

However, additional tweaks were required within the FlexSlider JavaScript to ensure proper handling of the elements. By modifying the CSS values and structure as follows:

.flexslider .slides { width: 100%; display: block;}
.img {display: block; }

The slideshow began functioning correctly in Chrome. For Firefox, further adjustments were necessary to apply the 100% height rule consistently across various elements:

.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }

.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}

These modifications resolved the resizing issues for Firefox as well. However, one limitation of this solution is that the resized image may extend beyond the screen's horizontal boundaries, potentially causing display issues. It is advisable to anticipate and address such scenarios to prevent functionality disruptions, especially when utilizing carousel features. Please also note that some quirks may arise during user interactions, such as mouseOut events triggering unexpected horizontal scroll bars.

In conclusion, front-end development can present challenges like these, highlighting the complexities involved in ensuring consistent cross-browser compatibility and responsive design. Despite its intricacies, solving such issues can be rewarding and contribute to a more seamless user experience.

I hope this detailed explanation sheds light on the process behind addressing image resizing in FlexSlider setups. If you encounter any further difficulties or have additional questions, please feel free to reach out. Thank you for your patience and understanding throughout this exploration.

Answer №2

I was searching for a vertically and horizontally responsive image slider but couldn't find one that met my requirements, so I decided to create my own solution.

You can view the final product here.

Below are the key components (refer to the jsFiddle for the complete demonstration). While it's not flawless, it should serve as a good starting point.

HTML

<div id="fader">
    <a href="http://url1.com"><img src="http://placehold.it/600x600&text=Slide1" ></a>
    <a href="http://url2.com"><img src="http://placehold.it/600x600&text=Slide2" ></a>
    <a href="http://url3.com"><img src="http://placehold.it/600x600&text=Slide3" ></a>
    <a href="http://url4.com"><img src="http://placehold.it/600x600&text=Slide4" ></a>
</div>

CSS

#fader {
    position: relative; 
    width: auto;
    height: 100%;
}

#fader a {
    display:block;
    width:auto;
    height:100%;    
}

@media screen and (orientation: portrait) {
  img { 
      width: 100%; 
      height:auto !important;
  }
}
@media screen and (orientation: landscape) {
  img { 
      height: 100%;
      min-width:10%;
      max-width:100%;
  }
}

A big shoutout to this jsFiddle which provided the lightweight jQuery rotator referenced in the project.

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

Tips for maintaining the alignment of four buttons in a single row as the size of the screen changes

I'm creating a simple browser game as part of my web development learning process. I have a set of divs that represent a warrior, and at the head of the "div table" I have a group of 4 buttons arranged horizontally. However, when the screen size is re ...

htmlcss

Can JavaScript be used to dynamically assign events to elements on a webpage?

I am currently using the following code: if ( $.support.touch == true ) { $(window).on('orientationchange', function(event){ if ( full == false ) { self.hideAllPanels("7"); } }); } else { $(window).on(&apo ...

javascriptjqueryeventsdynamicevent-handling

Is there a way to ensure that a "catch all other" route in the Vue Router will also capture the URL if a portion of it matches a predefined route?

After following the suggestion to implement a catch all route from this article, I realized that it does not capture URLs that partially match a defined route. routes: [ { path: "/album/:album", name: "album", component: Album, } ...

javascriptvue.jsredirectvue-router

Ways to determine if your code is written in ES6

After completing a lot of Javascript coding, I just learned about the existence of various JS 'versions' such as ES5 and ES6. My project is now up on Github, and someone advised me to convert my ES6 code to ES5 using Babel. The problem is, I&ap ...

javascriptecmascript-6babeljs

Ways to invoke a controller function from a window listener function

Is there a way to trigger the close function from window.onbeforeunload even when closing the app through 'right click' -> 'close window'? It seems that this.close() is not working in this scenario, possibly due to scope issues. The li ...

javascriptangularjsnode.jsaddeventlistenerfs

Passing a reference to a react functional component (react.FC) results in a type error: The property ref is not recognized on the type 'IntrinsicAttributes & Props & { children: ReactNode}'

Currently, I am working on mastering the utilization of forward refs. In a functional component (FC), I am trying to initialize all my refs and then pass them down to its child components so that I can access the canvas instances of some chartjs charts. Ho ...

javascriptreactjstypescriptreact-ref

jQuery function fails to work on a list that has been dynamically generated

Can someone please assist me? I have encountered an issue where the dynamic list on the second page is not functioning properly. When I click any "li" element to trigger an alert for the respective "id" (which works fine for a hardcoded list), nothing happ ...

jqueryhtmljquery-mobile

I keep encountering a 'Missing Permissions' issue whenever I attempt to execute the ban command in Discord.js. What could be causing this problem?

While working on coding a ban command for my Discord server, I encountered an issue where the command was not working as expected. Upon testing, I received an error message on the console stating DiscordAPIError[50013]: Missing Permissions. This was puzzli ...

javascriptnode.jsdiscord.jscommand

Hyperlink -> Boundary

Our homepage features various elements as part of the menu. Each element consists of a picture, title, and small description. The issue is that these menu items always display a border when the mouse hovers over them, despite attempts to hide it. You can ...

htmlcsshoverborder

Checking the value of one field based on the rules and messages set by another field using jQuery validation

Looking to add validation to a set of radio buttons and a text box in ASP.NET using jQuery rules and messages. Specifically, I want the textbox to be required if the 'Yes' radio button is checked and not required if the 'No' radio butto ...

jqueryasp.netif-statementconditional-statements

The proper way to implement global scripts in Next.js

I am currently working on implementing a global fade-in animation for all components in my application. By adding the className "fadeIn" to each element and setting the default opacity to 0, I then utilize JavaScript to change it to 1 when the element is v ...

javascriptreactjsnext.js

ReactJS not updating when multiple checkboxes are selected

Struggling to resolve an issue with this component. I encounter an error when trying to select multiple items using checkboxes. Oddly enough, another one of my components with the same code has no error. Please take a look at my code below, any help is gre ...

javascriptreactjs

Using Javascript, print the port number to the console

I am currently developing a small Electron app with node.js and I am facing an issue with outputting the port my application is connected to for development purposes. Below is my MySQL connection code snippet: const mysql = require('mysql'); c ...

javascriptmysqlnode.jselectron

The AngularJS ng-if directive is failing to function properly, despite the logged boolean accurately reflecting the

I created a custom directive that handles the visibility of text elements on a webpage. While this logic works correctly half of the time, it fails the other half of the time. Here is the code snippet from my directive: newco.directive 'heroHeadline& ...

javascriptangularjscoffeescript

Tips for enabling the TypeScript compiler to locate bokeh's "*.d.ts" files

I recently made the switch from Bokeh's convenient inline extension framework to their npm based out of line build system. I'm currently working on getting my extension to build, but I've noticed that Bokeh organizes all TypeScript *.ts.d fi ...

javascripttypescriptbokehtsconfig

When jQuery's fadeOut function is used with a callback, two elements appear simultaneously when the action is performed quickly

This problem seems straightforward, but I've hit a roadblock. Here's the code snippet in question: When I quickly move through all the elements, both p.hidden and form remain visible despite the intended behavior. I attempted to include stop ...

jquery

Is there a hashing algorithm that produces identical results in both Dart and TypeScript?

I am looking to create a unique identifier for my chat application. (Chat between my Flutter app and Angular web) Below is the code snippet written in Dart... String peerId = widget.peerid; //string ID value String currentUserId = widget.currentId ...

javascriptangulartypescriptflutterdart

Data table reloading issues? JSON not formatted correctly?

Currently, I am using the latest version of dataTable When deleting a row via an ajax request, I follow this method: $.ajax ( { method : 'POST', //the route (controller ...

phpjqueryajaxdatatables

Using an AngularJS array with ng-repeat

As soon as a websocket message is received, the code below executes: connection.onmessage = function (eventInfo) { var onConnectionMessage = JSON.parse(eventInfo.data); if (onConnectionMessage.messageType === "newRequest") { getQuizRequests(); } } T ...

javascriptarraysangularjswebsocketangularjs-ng-repeat

Simplified user interface for detecting radio button clicks

Currently working on a form that includes radio buttons, where an update function is triggered whenever there is a user input change. The challenge I am facing is how to incorporate user-friendly radio buttons with a larger button area encompassing both t ...

javascripthtmlcss