Horizontal scroll thumbnails

Get Started
1

I have image thumbnails pulled out of a database that sits in a div that 300px wide. Each image thumbnail (which sits inside the div) is 53px wide and 40px high. Depending which product is selected by the user the image thumbnails will be displayed in the 300px div.

The problem i have got is when there are say 8 thumbnails to be displayed i still need them to sit in that div but the user can scroll horizontally (left to right) to view the thumbnails.

At the moment another row is inserted underneath the top one which is not quite what i am looking for.

Any ideas on how to accomplish this?

2

Hi robert475,

This should do it:

<div style=“overflow:scroll; width:300px;”>
<div style=“float:left;”><img src=“thumb1.jpg” /></div>
<div style=“float:left;”><img src=“thumb2.jpg” /></div>
<div style=“float:left;”><img src=“thumb3.jpg” /></div>
</div>

I’ve not tested it but that’s what I would use.

Regards,

David

3

Would something like this be what you were trying to accomplish?

http://devkick.com/lab/galleria/ :slight_smile:

4

Hi this is what i am trying to achieve:

http://www.beatsbydre.com/picsvids/PicturesVideos.aspx

5

OK, what you will need is to place all the images inside a DIV with a fixed width and height and overflow: scroll; (this will cause all the stuff which would overflow to appear in a horizontal scrollbar), the left and right arrows are powered by JavaScript (possibly jQuery I didn’t look) to shift along the scrolling region :slight_smile:

6

There’s no need to use JavaScript at all if you don’t need the arrows at the side and are happy with a regular horizontal scrollbar across the bottom of the section.

7

Of course not, I was just explaining them as he wanted something alike as he saw on that site (which included them) :slight_smile:

8

The technique for achieve what you want is posted here.

Using your linked page as example:


   <div id="scrolldiv" class="scrollDiv">
   <div style="width: 2800px; white-space: nowrap; font-family: Arial,Helvetica,Sans-Serif;">

The “scrolldiv” would scroll all in one line if it instead of the large width would float the inner div with a large enough negative right margin:


   <div id="scrolldiv" class="scrollDiv">
   <div style=[COLOR="Red"]"float:left; margin-right: -30000px;[/COLOR] font-family: Arial,Helvetica,Sans-Serif;">
9

For yet another example, Swapping Images, which uses this [url=http://gtwebdev.com/workshop/layout/scrolling-gallery.php]Scrolling Thumbnail Gallery.

cheers,

gary

10

Thanks for your help guys i really appreciate it. If i wanted to take it that little step further and include the left and right arrows as displayed in the site I came across. Is it possible to have the right and left arrows (the big one) without the scrollbar?

http://www.beatsbydre.com/picsvids/PicturesVideos.aspx

11

If i wanted to take it that little step further and include the left and right arrows as displayed in the site I came across. Is it possible to have the right and left arrows (the big one) without the scrollbar?
Just hide the overflow, the javascript will still scroll.

Your example site:


   <div id="scrolldiv" class="scrollDiv" style="[COLOR="Red"]overflow:hidden[/COLOR]">
     <div style="[COLOR="Red"]float:left; margin-right: -30000px;[/COLOR] font-family: Arial,Helvetica,Sans-Serif;">
12

Thanks for your help everybody