Here is an example of a NivoSlider gallery. http://andybitterer.com/sandbox/puglia-nivo/
Everything is fine until the gallery shows a vertical/portrait image. I would like the black areas left and right of the image to be transparent, while the left/right arrows should stay exactly where they are, so that a user would not need to move the mouse pointer.
By the way, it would be cool to be able to auto-generate a border around the images. Like “border: 2px solid white” or something…
The problem is that NivoSlider doesn’t support PNG, so transparent backgrounds are not possible.
I’ll look into adding border support.
This really isn’t about PNG, or transparent backgrounds. I don’t need either, I suggested this option only as a potential workaround.
What I would like, though, is the plugin to size vertical images properly, in particular when I set the resizeheight to a fixed value. The plugin seems to ignore that value (or the height/width ratio), as all vertical images are distorted or cropped to fit the horizontal format. Does not look good, obviously.
Border support would be awesome.
Another cool feature would be a “loading” icon for the time when the plugin loads the images. Right now, it just shows an empty space for a few seconds. See here for some options: http://ajaxload.info/
Oh, yes, right. Exactly the same problem I’ve encountered. “resizeheight” seems to get ignored.
Maybe not the best solution, but I wrote this patch css:
/* fix crop-height nextgen nivo slider */
.theme-default{/* or the name of the nivo template you use */
overflow: hidden;
-webkit-box-shadow: 0 1px 5px 0 #4A4A4A;
-moz-box-shadow: 0 1px 5px 0 #4A4A4A;
box-shadow: 0 1px 5px 0 #4A4A4A;
}
.nivo-controlNav {
position: absolute;
}
.nivoSlider { /* or the id used in your shortcode = html_id="your-id" */
max-height: 300px;
}
/* fix the white border */
.nivoSlider img {
width: 101% !important;
height: auto !important; /* disallow scale */
}
