Jump to content

technique for scrolling flim strip of thumbnails


chadmichael
 Share

Recommended Posts

I'd like to be able to have a photo album where I have a veritcal row of thumbnails on the side and a full image to the right. The thumbnails on the left will be the menu to select which pic is seen in full view to the right. The problem: there might be a lot of thumbnails. How to I get them to scroll on the left without moving the full view image on the right?

Link to comment
Share on other sites

I would use frames.make a page with all the thumbnails and put it as one frame, and then you can either use a different page for each image, or use javascript.another option is to use a div with a set width and height, and set the div's css to overflow:scroll; then use javascript for changing the images.LG :)Edit: no I take that back. I would use the scrolling div.

Edited by Little Goat
Link to comment
Share on other sites

do this

<div style="width:750px">  <div style="float:left;width:200px;overflow:auto;text-align:center">  ...thumbnails here...  </div>  <div style="float:left;width:550px;text-align:center">  ..big photo here...  </div>  <br style="clear:left"/></div>

remember if you add margins or padding you need to take that into account when setting the width of the main div.

Link to comment
Share on other sites

If you don't mind me answering... :)When you define a size for an element, width and height, Firefox will give you that size no matter. So if you define width 300px and height 300px, and set padding to be 140, you'll have a space to write your text/content that is width: 300-(140*2) = 20px and height also 20px. IE on the other hand interprets it that you want 300px for content, and so build padding on the outside of the document, and you'll get an element with 580px width and height instead. Firefox's interpretation is way better imo, because it doesn't break the format. No one uses that big paddings anyway.

Link to comment
Share on other sites

well thats no good, that means anyone using padding or margins on content containing divs will have to write 2 different css files ;/when i was redoing runuo.com's site (not updated yet) i ended up having to apply margins to all the actual content (<p> and <h#> which is still a bad solution because the <h#> tag looses the margin on the 2nd line if it has one.*sighs*

Link to comment
Share on other sites

Yeah, same with margins. Default margins on p and h# elements are different for IE/Opera/FF for some reason. I always start my stylesheets neutralising things that I know about browser differances:html, body {margin: 0;padding: 0;}p,h1,h2,h3,h4,h5,h6 {margin: 0;}

Link to comment
Share on other sites

I've got the filmstrip of thumbnails scrolling perfectly. Now, I'm trying to do the same thing but have the filmstrip running horizontally along the bottom of the page. I'd like the extra thumbs to run off the right and left bounds of this strip. Then, you would have a scroll bar right and left to get to the extras, similar to how you scroll up and down to get to the extras in the vertical strip. However, the extra thumbs keep showing up beneath and and I get a vertical scroll. How can I force the extras to go to the right and give me a horizontal scroll??Thanks

Link to comment
Share on other sites

I found the CSS attribute "white-space" that is supposed to replace the stuff like <nobr> and pre.To force the overflow of my thumbnails to proceed in a horizontal fashion, I set the style of the encompassing div to include

  white-space: nowrap

works great!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...