Using the Soliloquy Slider with a mix of horizontal and vertical images

Sliders vs Lightbox

First, it is useful to note that a lightbox generally works better with a mix of image orientations. Soliloquy does include an option to display as a slider or lightbox.

Sliders – most frequently used as a top banner on a page. They are best used with images that are consistent in size, and generally horizontal in orientation.

Lightbox – most frequently used to view a gallery or portfolio of images. They generally pop out so the viewing does not alter the layout of the underlying page.

Using Soliloquy Slider with horizontal and vertical images.

The response of the slider will vary, depending on specific configuration settings:

Use Adaptive Height?

  • Allows the slider to adapt smoothly to slides with different sizes.
  • While staying within the set frame dimensions, the slider will vary in size in concert with the image size

Crop Images in Slider?

  • Enables or disables image cropping based on slider dimensions
  • This will result in the slider frame dimension being constant, but will crop the image to fit the frame.

Plug In to manage horizontal and vertical images in a slider

If the developer needs to build a slider that stays consistent is size WITHOUT cropping of images, Soliloquy has a plug to help managing re-sizing, called “Preserve Full Image Width and Height

This specific plug in works fairly well.  However, the images still need to be re-sized to stay within approximately 150% of the slider size. In other words, if the image is exceptionally larger than the slider frame, it will be cropped.

For Example:

Slider frame dimension – 800px horizontal x 600px vertical

Image size – 750px horizontal x 1000px vertical

Using the plugin, the slider will resize the image to fit the frame, without changing the frame dimensions.

However, if the image is any larger than this, the plug-in cannot completely resize and the image will be cropped.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.