jQuery Nivo Slider and images of different size

October 1, 2011

This post was originally published in the Rambling Labs Blog on October 1, 2011.

A couple of days ago, I needed to add a slideshow to a project that I’m currently working on.

When I googled “jQuery Slider”, I found lots and lots of options. I checked some of them out one by one, and one by one I discarded them, because it lacked a feature I wanted or, if it had the feature, it lacked cool animations.

I finally settled up for the Nivo Slider. But it had an issue. It used the images as the current background for the slider, which then meant that the images had to be the same size.

That might be fine if you have someone that crops the images to the required size… But what if you’re doing a project where it’s the end users that are going to be uploading these images? I might tell them to crop the image to the specific dimensions, but wouldn’t it be better if I just try to scale them?

This was the feature I was looking for and, as seen on the FAQ, he doesn’t plan to include it.

So yeah, I forked the Nivo Slider from GitHub and went ahead to add this feature, or at least part of it. I finished it up and made a pull request to see if it gets accepted by the original author. If it doesn’t get accepted, I’ll release it on my own later. This is the list of features I added, as found on GitHub.

Added the ability to handle images of different sizes (images scale). Added the following boolean options:

  • adaptImages. Default value: false. Description: When set to true, uses images instead of backgrounds and scales the images to the maximum dimension available.
  • useLargerImage.Default value: true. Description: When set to true, uses the larger image dimensions as the maximum dimension available. Otherwise, it uses the slider width as the maximum available.
  • alignBottom.Default value: false. Description: When set to true, aligns the bottom right corner of the scaled images with the bottom right corner of the slider. Otherwise, the images are aligned to the top left of the slider.

Meanwhile, you can get the latest code from my fork on GitHub.

Enjoy! And don’t hesitate to contact me if you find a bug or any other kind of issue. You can report it via GitHub, or just email me to edgar@ramblinglabs.com.

UPDATE

The pull request didn’t come through, so the jQuery Rambling Slider has been released!. You can also see it on GitHub. :D