What I’m looking to do is to put a scrollbar on a webpage that can be used to cycle back and forth through a stack of images (one on top of the other).
What I already have, is here https://github.com/HeadSpaceDude/rotator
But I’m currently stumped as to how to get it to work.
In principle, you can do that quite easily with HTML and CSS. You would just have all the images in a div, set a height on it and overflow: scroll etc. It’s not very slick, though, of course, so you could do something fancier with JS. It’s not really clear what you are looking for, though. Can you point to an example?
Thats my problem I can’t find anything out there that could do it. What I want is to have scrollbar on my page independent of the browsers one, that you can you can slide the handle of up and down. This would be linked to a stack of images (in my case slices from a CT scan) that change as the scrollbar handle is moved. The images should not slide themselves or have any funky stuff on it. They should show like they are one continuos object, bit like an animation of you going all the way through a person via their CT scan.
OK, from what I can gather from your description, what I described above should work perfectly. Here’s a simple demo:
Close. but no cigar. I don’t want the images to slide in. and I want the scroll bar to be a separate object. The reason for this is so I can have a line on an image of a person to follow the handle to indicate approximately where on the body the current slice from the CT scan is.
I’m starting to get the impression (not from you per se) but from the wider community that no one really understands what I want or actually why anyone would want to do what I want to do as where ever I find examples like yours. As I said previously its oh so close but no cigar, Yet!
Sorry, I didn’t realize it needed to include a cigar. I don’t smoke, so … 
I suspect what you are looking for can be done, but just needs to be coded from scratch in JS. (I still don’t really get what you are trying to do, though. Maybe a series of still sketches would help?)
If I could upload an images then I could show you an example of what I mean. Well here is it somewhere else. https://www.dropbox.com/s/13ty6x4d1wkuhae/Screen%20Shot%202015-06-25%20at%2011.56.03%20am.png?dl=0
I assume that when you drag the handle on the left the line moves down the body and the image in the left changes to the appropriate body part.
It looks to me that you would need to look at draggable elements and then change the image on the left based on the vertical position of the line Or perhaps a vertical progress slider.
BTW where did you get that picture of Ralph?
Well I don’t know about to the left but I do know about “ON” the left. 
Yes I meant the handle on the right 
(I was put off by the picture of Ralph.)
I think the progress slider link I showed above could get you going in the right direction but would take a bit of research.
[quote=“PaulOB, post:8, topic:193951”]
where did you get that picture of Ralph?
[/quote]
O dear, my private dropbox account ha been hacked. :o
Thats cool I have been using this one but look at what I already have on Github, I can’t get is to interact with the images. How would I be able to do this?
That’s beyond me I’m afraid and we’d need one of the heavyweight js gurus around here to step in.
I was thinking along the lines of something like this example.
That is rather cool. I just need to know how to modify it to do what I want. 
I can open it 
For me, too.
I skimmed the thread (interesting idea, BTW) and my first question would be: do you want the pictures to change as the slider increases/decreases, or do you want the picture to change once the user stops sliding the slider?
I would probably opt for jQuery UI slider, due to its well documented API.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
