When I try to add different size images to nivo slider, it causes slider to expand to image size. Even if I add overflow:hidden to #slider, it seems not to work. Adding extra div with overflow hidden and dimensions causes control buttons not to show up. Does anyone have solution to this problem or do I have to use, extact size images as slider ?
Its very strange because even old slider like s3slider seems to work properly with different size images.
If you want to keep the same slider size for all pictures, why not resizing all images ?
Have a read here to see how this person implements and uses preset image sizes specifically for nivo slider
http://dmartinng.com/tutorial/use-nivo-slider-for-an-awesome-wordpress-slider/
kevinsturf saidHave a read here to see how this person implements and uses preset image sizes specifically for nivo slider
http://dmartinng.com/tutorial/use-nivo-slider-for-an-awesome-wordpress-slider/
Thanks but “So obviously, first thing first, we need to change the width and the height of the slider to match our images”. This still needs cropping.
So it seems the only way is to crop images to be exact size of the slider.
Busting my mind all day trying to figure out how to allow different height images in the nivo slider. Anybody have any ideas?
Why the heck does everyone use it, damn it.
Ok, can i at least move the control nav outside the default container (everthing related to the nivo slider is in one damn div, why can’t i put the control nav in the parent div.
It’s free.
I thought sliders by their very nature were designed to slide through a set of images of the same size, and if they aren’t the same size they’d surely just be resized and look rubbish anyway.
wpCanyonThemes saidWhy the heck does everyone use it, damn it.
Ok, can i at least move the control nav outside the default container (everthing related to the nivo slider is in one damn div, why can’t i put the control nav in the parent div.
Nop, but anything is doable in CSS, you can style the controllers how ever you want.
Cycle slider allows to use images of different sizes - check it out:
http://jquery.malsup.com/cycle/diffsize.html
How about just running the images through TimThumb to standardize the sizes? That’s how I implemented Nivo Slider on my last theme (for my upcoming one I wrote my own to allow for greater flexibility).
For one thing, the images will need to be the same dimensions due to the way the transitions are implemented in Nivo if nothing else - otherwise the transitions wouldn’t look very nice if everything didn’t line up properly.
Timthumb doesn’t work for a lot of people, so I don’t really recommend using it. I’d suggest just using WP to resize (it’s possible, not easy, but possible).
@Sevenspark - Yeah i know, but i used WP thumbnails feature to resize everything, don’t want to use it just for the slider. And as landon said, there are probs.
@landonw - Yup, that’s why i decided not to use timthumb at all. But the prob is that the WP thumbnails feature can’t resize on the fly.
What i do : use timthumb to display all images at a fixed width and add 2 lines in .js :
// adjust height !
hh = vars.currentImage.attr(‘height’);
slider.height(hh);
just after
$(’.nivo-box’, slider).remove();
in the nivoRun method
I found a solution for my site, I had given the #slider a height of 533px and it was being overridden by an element style that I couldn’t find anywhere in my theme files. So I just set the height in nivo-slider.css to “height: 533px !important;” and the "!important "makes it override the element style.
Not my ideal fix but I was tired of banging my head on the wall. Hope it helps anyone.
