Centering image on Nivo Slider using default theme?

Question

To anyone who uses Nivo Slider, is there any straightforward way (or not) to center the image on the slider? I'm aware that Nivo Slider was designed to display images which perfectly "fit" the box (unlike the way I'm using it), but for technical reasons I'd rather try have the images centered instead of make all my images perfectly fit the Nivo box's width and height. Currently my Nivo slide looks like this:

http://dl.dropbox.com/u/12453703/nivo.png

Sorry I haven't provided any code examples of me trying this. My CSS knowledge isn't too great and most of my attempts at fixing the problem have either been looking at solutions on the web (and attempting to apply said solution), or trying out random one-lines in my stylesheet in an attempt to fix the problem.

If you'd like to know what CSS files I'm using, I'm using the default theme which can be downloaded here: http://cloud.github.com/downloads/gilbitron/Nivo-Slider/nivo-slider2.7.1.zip

Thanks, I appreciate it.

Answer 1

The position of image is loading in javascript file. Edit "jquery.nivo.slider.js" (Please make sure to use this file instead of "jquery.nivo.slider.pack.js" in the header.)

Goto line 85:

//Set first background
        slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');

Find the above line. Change it to:

//Set first background
        slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat center');

Now you can see that your first image is in center. Just play around that file and you definitely make the whole images to center.

EDIT: Find this function: // Add slices for slice animations. Line 253. Edit the else part of that. Line 262

background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'

By changing 0% to 50% makes the image center vertically. Getting closer...

EDIT

Edit the above line once more and replace with below line.

background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat 50%'

This will definitely works..

EDIT

Forget about all the above edits. Just replace your jquery.nivo.slider.js file with this one.

Answer 2

Create a wrapper div and center nivoslider inside that div.

Html:

<div id="wrap">
    <div id="slider" class="nivoSlider">
        <img src="images/slide.jpg" alt="" />
    </div>
</div>

Css:

#wrap { 
    position: relative;
    height: 500px; 
    width: 500px; 
}
#slider { 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -125px; // Half the height
    margin-left: -125px; // Half the width
    height: 250px;
    width: 250px;
}

EDIT:

Edit demo.html and add an extra wrapper like so:

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
        <div id="slider-wrap"> <!-- Extra wrapper -->
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        </div>
</div>

Add this inside style.css in the demo files:

#slider-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -123px; /* 246/2 */
    margin-left: -309px;/ /* 618/2 */
}

.slider-wrapper {
    position: relative;
    height: 500px;
    width: 1000px;
    background: red;
}

Find this line and comment the margin rule:

.theme-default #slider {
    /* margin:100px auto 0 auto; */
    width:618px; /* Make sure your images are the same size */
    height:246px; /* Make sure your images are the same size */
}

Download the modified example and investigate the code http://www.mediafire.com/?9f7z9ku4n1ikiba

Answer 3

Try with this css.

.nivoSlider img {
    background-position:center center;
}

Answer 4

If you need to make horizontal centered background and you want all transitions to work well, you can do the following:

1. You need to know the actual width of current image

2. You need to calculate an offset from which slices (or boxes) for this image should be added:

   var mySliceOffset = (vars.currentImage.attr('width') - $('body').width()) / 2;

(in this example slider container width is set to 100%)

1. Then edit background properties:

   background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((mySliceOffset+sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'

Answer 5

For me, the simplest solution required 3 things:

1. Assuming that on narrow viewports your images should span the full width of the viewport, specify a maximum width for your images (in pixels) at the point you want them to stop growing as the viewport expands and simply begin centering within the viewport itself.
2. Make sure that the width of ALL of your images is greater or equal to the the maximum width you selected in the first step. (If you have a skinny image you can still make it work. Read on.)
3. Put the Nivo slider inside a wrapper and center it.

For step 1, I used 1220px. This was simply because my images began to get cropped off at the bottom when they were any wider than 1220 pixels. Pick whatever you want. The bigger the number the wider the viewport can be before centering begins. However, the downside is that all of your images need to be at least as wide as whatever you pick.

For step 2, just follow the rule. If you have an image that's not wide enough but you still want to use it, you can do so by a simple edit to the image as follows:

Let's assume you have an image that's 800x600 and you picked 1220 in step 1. This image won't work because it's too small. However, if you make a new image with an acceptable width (i.e. 1220x600), you can fill the entire image with whatever background color is being used behind the slider. Then, take the 800x600 image and paste it right in the center of your new 1220x600 image. This new 1220x600 image should center properly.

For Step 3:

CSS

Add the following to nivo-slider.css

.slider-wrapper
{
 position:relative;
 max-width: 1220px;   -   Change this width to whatever you want
 margin-left:auto;
 margin-right:auto;
}

Optional - You should edit the "max-width" setting of your ".nivo-Slider img" property so that your images will load a little more nicely: If you don't do this, what happens is that the first image (if larger than the max-width) will flash in full size an then quickly adjust. To apply the edit, simply change the max-width property from "none" to whatever max width you specified in the slider wrapper. See example below.

.nivoSlider img {
 position:absolute;
 max-width: 1220px;
 left:0px;
 top:0px;

HTML

Put your slider inside your new slider wrapper.

<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
*slider stuff*
</div>
</div>

Enjoy the symmetry!