[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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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

  1. untitled

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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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 Endless Scroll

And the thread that discusses it is here http://freewaytalk.net/thread/view/43223#m_43230

Have a look Neil

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just realised that if you want to add links/rollovers then this isn’t going to do it for you.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options