Fill image scaling with visibleNearby

drew.troxler's Avatar

drew.troxler

20 Aug, 2019 07:48 PM

I'm looking to create a view using visibleNearby without spacing or padding that also maintains the same aspect ratio when the viewport is resized. Other issues and documentation have been helpful in removing the padding, however, I've not yet been able to resolve the height rescaling as "fit" adds padding.

This may be a case of choosing incorrect options on my part. Our sample implementation is below:

html

<div class="royalSlider rsDefault visibleNearby">
    <a class="rsImg" href="https://via.placeholder.com/500" data-rsw="500" data-rsh="500"></a>
    <a class="rsImg" href="https://via.placeholder.com/500" data-rsw="500" data-rsh="500"></a>
    <a class="rsImg" href="https://via.placeholder.com/500" data-rsw="500" data-rsh="500"></a>
    <a class="rsImg" href="https://via.placeholder.com/500" data-rsw="500" data-rsh="500"></a>
    <a class="rsImg" href="https://via.placeholder.com/500" data-rsw="500" data-rsh="500"></a>
    <a class="rsImg" href="https://via.placeholder.com/500" data-rsw="500" data-rsh="500"></a>
    <a class="rsImg" href="https://via.placeholder.com/500" data-rsw="500" data-rsh="500"></a>
    <a class="rsImg" href="https://via.placeholder.com/500" data-rsw="500" data-rsh="500"></a>
</div>

js

window.$(document).ready(function ($) {
  $('.royalSlider').royalSlider({
    addActiveClass: true,
    autoScaleSliderHeight: 500,
    loop: true,
    fadeinLoadedSlide: true,
    keyboardNavEnabled: true,
    imageScaleMode: 'fill',
    imgWidth: 500,
    slidesSpacing: 0,
    visibleNearby: {
      enabled: true,
      centerArea: 0.25,
      center: true,
      breakpoint: 650,
      breakpointCenterArea: 0.64,
      navigateByCenterClick: false
    }
  }).data('royalSlider');
});

css overrides

.royalSlider {
  height: 500px !important;
}


.rsDefault .rsArrowIcn { width: 39px; height: 76px; top: 50%; left: 50%; margin-top:-16px; margin-left: -16px;


cursor: pointer; }


.rsDefault.rsHor .rsArrowLeft .rsArrowIcn { background: url('images/arrow_left.png') !important; } .rsDefault.rsHor .rsArrowRight .rsArrowIcn { background: url('images/arrow_right.png') !important; }


.visibleNearby { width: 100%; }


.visibleNearby .rsGCaption { font-size: 16px; line-height: 18px; padding: 12px 0 16px; background: #141414; width: 100%; position: static; float: left; left: auto; bottom: auto; text-align: center; }


.visibleNearby .rsGCaption span { display: block; clear: both; color: #bbb; font-size: 14px; line-height: 22px; }


.visibleNearby .rsSlide img { opacity: 0.45; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }


.visibleNearby .rsActiveSlide img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }


.rsOverflow { overflow: visible !important; }


.royalSlider .rsSlide img { opacity: 0.45; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }


.royalSlider .rsActiveSlide img { opacity: 1; }


/* Non-linear resizing on smaller screens */ @media screen and (min-width: 0px) and (max-width: 900px) { #gallery-1 { padding: 12px 0 12px; } #gallery-1 .rsOverflow, .royalSlider#gallery-1 { height: 400px !important; } }


@media screen and (min-width: 0px) and (max-width: 500px) { #gallery-1 .rsOverflow, .royalSlider#gallery-1 { height: 300px !important; } }
  1. Support Staff 1 Posted by Dmitry Semenov on 21 Aug, 2019 03:20 AM

    Dmitry Semenov's Avatar

    Hello,

    This should help if your images have the same aspect ratio -
    http://help.dimsemenov.com/discussions/problems/4068-visiblenearby-...

  2. 2 Posted by drew.troxler on 21 Aug, 2019 06:46 PM

    drew.troxler's Avatar

    That suggestion worked like a charm. Thank you.

  3. drew.troxler closed this discussion on 21 Aug, 2019 06:47 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac