Skip to main content

Adding width and height properties to images

Since 9.3 version, you may specify width and height properties for images ti add more natural-looking loading.

Without width & height

default loading.jpg

With width & height

progressive loading

You may specify width and height globally for every image in slider, or separately for each image.

Globally:

Add `imgWidth` and `imgHeight` options to slider JS initialization code of dimensions of your images. For example:
$('.royalSlider').royalSlider({
// other options...
imgWidth: 650,
imgHeight: 400
});

Separately:

Add `data-rsw` (for width) and `data-rsh` (for height) attributes for rsImg element. These attributes will override global width & height options. For example:
<div class="royalSlider rsDefault">
<!-- simple image -->
<img data-rsw="550" data-rsh="400" class="rsImg" src="path-to-image.jpg" alt="image description" />

<!-- lazy loaded image-->
<a data-rsw="390" data-rsh="470" class="rsImg" href="path-to-image.jpg">image description</a>
</div>

Additional notes

  • It's recommended to disable fadeInLoadedSlide:false option if it's enabled.
  • Via these options you set only base (natural) size of image, actual size how it's displayed in slider can be controlled via image scaling options.
  • Big images for fullscreen are currently not supported by this option.
  • To disable loading indicator add usePreloader:false to slider.