turn off imageScaleMode: fit for individual images?

robertmarkbram's Avatar

robertmarkbram

08 Nov, 2017 08:47 AM

Hi Dmitry,

I am quite happy with using imageScaleMode: 'fit', and it has solved a lot of my issues to do with responsiveness on the site. The properties I use to start Royal Slider:

  baseSliderProperties: {

      autoScaleSlider: true,
      autoScaleSliderWidth: 1,
      autoScaleSliderHeight: 1,
      arrowsNav: true,
      arrowsNavAutoHide: false,
      controlNavigation: 'none',
        deeplinking: {
            enabled: true,
            prefix: 'image-'
        },
      fadeinLoadedSlide: true,
      globalCaption:true,
      imageAlignCenter: true,
      imageScaleMode: 'fit',
      keyboardNavEnabled: true,
      loop: true,
      loopRewind: true,
      numImagesToPreload: 6,
      slidesOrientation: 'horizontal',
      transitionType: 'fade',
      video: {
         autoHideBlocks: true,
         autoHideArrows: true,
         youTubeCode: '<iframe src="https://www.youtube.com/embed/%id%?rel=1&autoplay=1&showinfo=0" frameborder="0" allowfullscreen></iframe>'
      },
   },

However, specifically on my older pages, I have photos that cannot take being scaled up to max;

/* -- Royal SLider. */
#main .royalSlider {
   margin: 0 auto;
   padding: 0px;
   width: 90%;
   max-width: 500px;
}

For example, the first couple of photos on the gallery here:
https://www.chihuahuarescuevictoria.org/responsive/chihuahuaStories...

I can solve it by setting a smaller max-width on #main .royalSlider for just that page, but that will stop other good photos from being able to scale upwards too. If I put a height/width or max-height/max-width on an individual image, that breaks centering for that image..

Can I turn off fit scaling for individual images?

Rob
:)

  1. Support Staff 1 Posted by Dmitry Semenov on 08 Nov, 2017 07:16 PM

    Dmitry Semenov's Avatar

    Hello,

    You're probably looking for "fit-if-smaller" scale mode http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

  2. 2 Posted by robertmarkbram on 09 Nov, 2017 08:36 AM

    robertmarkbram's Avatar

    Hi Dmitry,

    Sorry I wasn't clear enough. What I am ultimately after is some way of doing "fit-if-smaller" but only for specific images..

    I have tried setting max-height/max-width for those smaller images, but I lose the centering, so I am hoping there is still a way to do this only for some images.

    Rob
    :)

  3. Support Staff 3 Posted by Dmitry Semenov on 09 Nov, 2017 05:55 PM

    Dmitry Semenov's Avatar

    Oh, you may remove rsImg class from images that shouldn't have imageScaleMode, and then use CSS to align them how you want. It's the only option.

  4. 4 Posted by robertmarkbram on 10 Nov, 2017 05:05 AM

    robertmarkbram's Avatar

    OK, got it. Remove rsImg class and give it the class galleryImageCentre with the following definition:

    .royalSlider img.galleryImageCentre {
       bottom:0;
       left: 0;
       margin:auto;
       position:absolute;
       right: 0;
       top:0;
    }
    

    Rob
    :)

  5. robertmarkbram closed this discussion on 10 Nov, 2017 05:23 AM.

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