FreewayTalk
6 replies to this thread. Most Recent
[Pro] Wide seamless photo scrolling with carousel
Hi All
I’m currently setting up a new page containing a 10 pane carousel. Each of the panes should contain a section of a panoramic photo so that it is possible to seamlessly scroll across the photo from one end to the other in 10 steps.
Problem is I need to have 10 steps and I need to have a wide carousel, but that makes the photo itself about half the overall width it needs to be. In other words, by the time I’ve scrolled across to the 5th pane, I’ve run out of picture!
Question is this: is it possible (by whatever means) to only scroll half way across an image? So for example, a house on the far right of the image scrolls to the centre when the first tab is clicked, and then scrolls just beyond the left edge when the 2nd tab is clicked. I’m guessing the answer is no, but I thought I’d better ask!
Neil
If you divide the image into 10 segments, and put each segment into a Carousel pane that is itself exactly as wide as that segment, then this will work the way you want it to. Carousel will assemble the panes with no gap between them, so your image will appear contiguous in the browser.
If you wanted to use one wide image, with no breaks, and step across it in ten steps when you click on a control, then you could do that by creating a nested layout, similar to the one in this example[1], and then manipulate the CSS left property through JavaScript. This example page uses a slider to move the inner DIV, but you could do the same thing with individual links to one part of the image or another, or forward/back links to jump it one step at a time. The transition from one position to another could be eased with the addition of the Move effect from Scriptaculous.
Walter
On Mar 9, 2010, at 12:12 PM, neil.west1 wrote:
Hi All
I’m currently setting up a new page containing a 10 pane carousel. Each of the panes should contain a section of a panoramic photo so that it is possible to seamlessly scroll across the photo from one end to the other in 10 steps.
Problem is I need to have 10 steps and I need to have a wide carousel, but that makes the photo itself about half the overall width it needs to be. In other words, by the time I’ve scrolled across to the 5th pane, I’ve run out of picture!
Question is this: is it possible (by whatever means) to only scroll half way across an image? So for example, a house on the far right of the image scrolls to the centre when the first tab is clicked, and then scrolls just beyond the left edge when the 2nd tab is clicked. I’m guessing the answer is no, but I thought I’d better ask!
Neil
Freeway user since 1997
Thanks for that Walter,
Your example appears to give the control I’m after, as in I can scroll as far as I like across each ‘pane’ instead of having to move across a full ‘pane’. Problem is, as I thought it might be, you’re talking jargon currently beyond my understanding!
IF I decide to have a crack at this and learn something about javascript, will this method allow me to have rollovers/links on each of the panes in the way that Carousel does? And if it does, how serious will I need to get with javascript to be able to do this - a few minutes? a few hours?
Can you point to somewhere that explains this to a long-time non-programming print designer/short-time WYSIWYG web designer?
Neil
Some time ago Walter created an ‘Endless Scroll’ example where you could scroll to the end of the pic and it seemingly continued back at the beginning.
It is here http://scripty.walterdavisstudio.com/endless/
And the thread that discusses it is here http://freewaytalk.net/thread/view/43223#m_43230
Have a look Neil
David
Glasgow, Scotland
iMac 27 Snow and Pro 5.6.3
Just realised that if you want to add links/rollovers then this isn’t going to do it for you.
D
Glasgow, Scotland
iMac 27 Snow and Pro 5.6.3
Some time ago Walter created an ‘Endless Scroll’ example where you could scroll to the end of the pic and it seemingly continued back at the beginning.
Of course, you could turn it into a real interactive panorama photo… http://www.panoramaphotographer.com/
k
Hmm, thanks for that Keith, I was looking at your site yesterday, and very impressive it is, but I don’t have the requisite hardware to take the photos, or the requirement for a full 360° view - just a ‘small’ left-right slide will do. :)
