jquerycssnivo-slider

Centering image on Nivo Slider using default theme?

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.

Solution

  • 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.