thumbnail pagination/scrolling

Question

I'm using a plugin to act as an image/gallery slider. As it stands, the thumbnails below the main image display in a grid- I would like for them to display in on single row, sliding back and forth to display all images. How can I achieve this?

live site.

It's not easy to pick apart from the source of the live page what the plug in has done, and what you've done with your own css. If you post the code that generates the gallery, that might be a better starting point. — Jude Fisher, Oct 01 '12 at 20:02
@MikeBrant I tried limiting the height and width, and using `overflow-x:scroll;`, but that enabled an up&down scroll, I'm looking for right&left. — AMC, Oct 01 '12 at 20:07

Caelea · Answer 1 · 2012-10-01T20:15:20.290

1

Put a height to your container div (nivo-controlNav). It should be equal to the height of your thumb, and set it's overflow to hidden

Like this:

.nivo-controlNav {
    height: 130px; /*here you put your real size*/
    overflow: hidden;
}

Later edit:

.nivo-controlNav {
    height: 136px;
    width: 960px;
    overflow-y: hidden;
    overflow-x: auto;
}
.nivo-controlNav a {
    width: 136px;
    height: 136px;
    display: inline-block;
    float: left;
}

edited Oct 01 '12 at 20:15

answered Oct 01 '12 at 19:59

Caelea

2,318
15
22

Thank you for this. Making your changes restricted my viewing panel to the correct height, but no scrolling was enabled. How can I achieve this? – AMC Oct 01 '12 at 20:06
`overflow-x: scroll;` will give you a scroll bar. Not very elegant, but it will work. – Jude Fisher Oct 01 '12 at 20:07
@JcFx Doing that gave me an up/down scroll. Any ideas on how to acheive right/left? – AMC Oct 01 '12 at 20:08
@AMC Heh. That's because of my mistake. Edited. – Jude Fisher Oct 01 '12 at 20:09
`overflow: hidden; overflow-x: scroll;` should give you a horizontal scroll. Let me just test... – Jude Fisher Oct 01 '12 at 20:11
@JcFx Closer! Thank you! The vertical scroll bar was removed, but horizontal scrolling is still not enabled. – AMC Oct 01 '12 at 20:13
@Caelea Thank you for your continued support- much appreciated. I noticed that when I reduce the width of `.nivo-controlNav {` to 921px, the thumbnails shift to a second row, is there a way to prevent this? – AMC Oct 01 '12 at 20:20
@AMC yes, my bad, I forgot this: add `box-sizing:border-box` to your div and it will be fine. Also change the width of the tag, I just saw that your images are a little bit larger, the width should be equal to the one of your images. – Caelea Oct 01 '12 at 20:24
Thanks again. I added `box-sizing:border-box;` to `.nivo-controlNav {`, didn't notice any changes? – AMC Oct 01 '12 at 20:27
@AMC You might need one more containing div to stop that wrapping. See this example: http://stackoverflow.com/questions/5396933/stop-wrapping-contained-divs Set the outer div (your current nivo-controlNav) to the width you want, then set the inner div either to the width of all your thumbnails together (plus padding), or probably just 100% will do it. – Jude Fisher Oct 01 '12 at 20:40
@JcFx no you don't. It's just a box model problem. The solution is that box-sizing or reducing hight according to padding – Caelea Oct 01 '12 at 20:45
@Caelea - you might well be right. I'm in the middle of something and can't test - and that SO question has a nice clear example that might be of use... – Jude Fisher Oct 01 '12 at 20:47

score 0 · Answer 2 · answered Oct 01 '12 at 20:01

I would assume that it would require floating the image container elements. If they are already floated (which they may be due to the grid layout you mention) then it may be a case of expanding the width of the container div (the div holding all the thumbnails).

thumbnail pagination/scrolling

2 Answers2