It’s related to the carousel effect, but there’s some CSS happening to make the giant picture not show any scrollbars. Try using the Carousel Action (look on ActionsForge) and make a basic carousel with an auto-scroll timer, then layer some other elements over the top of that group. The carousel should continue to run underneath the other elements on your page.
I’m not sure how it will work to set the overflow to none on the elements of the carousel, I can’t remember if that’s one of the style attributes that the action messes with. The trick to this page is that the outermost DIV is set to 100% height and width, and its overflow is set to hidden. This causes it to crop the image it contains, and not show any scrollbars.
Thanks Walter,
I’m working on it now… using CSS & Javascript and it’s working, have problems with FW fade but hope to get a working result soon? will keep you up to date with a link of the result.
This put me in the right direction
Hope you had a wonderful xmas, Happy 2009.
All the best, talk soon…
Hi Walter,
I think there are some issues with conflicting javascripts, I am using jquery.js & dimensions.js so the images spread out or in when resizing the browser window.
Carousel & the “fade” effect on target show/layer just don’t want to behave, Oh well. Not sure if you can copy one images Extended Attributes to another, it would save a little bit of typing?
There is a setting you can make to jquery which allows it to coexist
with Prototype, but I would actually recommend that you find a jquery-
compatible carousel effect in that case. Having both jquery and
Prototype on the same page is needlessly wasteful, since they both set
ou to solve the same problem.
Also, it’s hit-or-miss when it comes to copying the attributes within
the dialog. Some dialogs allow this but others do not. What does work
really well is duplicating an “extended” image and then changing the
actual image in the graphic item.
Walter
On Dec 28, 2008, at 11:29 AM, Pete wrote:
Hi Walter,
I think there are some issues with conflicting javascripts, I am
using jquery.js & dimensions.js so the images spread out or in when
resizing the browser window.
Carousel & the “fade” effect on target show/layer just don’t want to
behave,
This does look like a great implementation. One thing that might make
it work more accurately on a smaller screen is if you set the large
image as a background-image, rather than simply a hidden DIV. That way
you could set the DIV to 100% x 100% and then the image would
naturally be clipped (as backgrounds are) to the bounds of the visible
DIV, and you wouldn’t see any scroll bars. You can switch background
images just as easily as toggling the visibility of the hidden layers
you’re using currently. There’s no Actions for this part, but it’s a
one-liner in Prototype.
Walter
On Dec 31, 2008, at 1:59 PM, DeltaDave wrote:
Hi Pete
I, amongst others I am sure, would be very interested in hearing/
seeing how you achieved this.
Can you share a FW doc with us when you get a chance. Movie not
required (keep file size down).
Okay, something more than a one-liner if you also want it to preload,
but not very hard at all. Here’s a reference example, click on any of
the thumbnail images to change the background image of the page.
The images are 1600px X 1000px, so there’s quite a lot of real estate
before you run off the edge of the world.
Walter
On Dec 31, 2008, at 3:31 PM, Walter Lee Davis wrote:
This does look like a great implementation. One thing that might
make it work more accurately on a smaller screen is if you set the
large image as a background-image, rather than simply a hidden DIV.
That way you could set the DIV to 100% x 100% and then the image
would naturally be clipped (as backgrounds are) to the bounds of the
visible DIV, and you wouldn’t see any scroll bars. You can switch
background images just as easily as toggling the visibility of the
hidden layers you’re using currently. There’s no Actions for this
part, but it’s a one-liner in Prototype.
Walter
On Dec 31, 2008, at 1:59 PM, DeltaDave wrote:
Hi Pete
I, amongst others I am sure, would be very interested in hearing/
seeing how you achieved this.
Can you share a FW doc with us when you get a chance. Movie not
required (keep file size down).
Hi Walter,
That’s brilliant! Fantastic! But I don’t know how to implement it? Is it possible when you get time could you send your file so I see how you set this up.
This is what I did on my second attempt but a little ashamed after now seeing your first attempt.
I set the extended attributes on a layered image item with
“div style” width 100% height 100%
& “img style” width 100% height 100%
It is an improvement but your version is perfect.
If you resize my page with browser window it will distort the image to fit whatever the browser window size is.
Clicking the green face button, you see a slight line on the red face background layer, yuk.
Thanks. Mine simply sets the images as backgrounds to a div rather
than using the images directly, and then changes the background of
that div through a javascript call. I modified my example to make it
work on rollover the way yours does, it’s a simple one word change in
the function body.
Note that if you resize the window to be larger than the images, you
will see empty space, and you will in any case always be seeing a
cropped version of the image up to that point. Both of those issues
need to be dealt with through the design (and scale) of your
background photos. It would be possible to cause the image to scale to
fit the available space while maintaining the aspect ratio of the
image – that’s just some math – but this solution does not attempt
that at all.
Hi Walter, thanks so much for sending the file so quickly. Should their be anything in the function body of Prototype packed, both bodies are empty?
I can see how the background is set into the div thru Style1 but how do I make the image rollover button call, is this the ID/Title name? Where do I make this call and how are the buttons connected to the div background, As you can see I’m just a big bit confused. Sorry.
The function is there in the version I packaged and sent, it should
read:
var box = $('item1');
var images = ['Aurora', 'ClownFish', 'DewDrop', 'EarthHorizon',
'FlowingRock', 'GentleRapids', 'GoldenPalace'];
images.each(function(elm){
var path = elm + '.jpg';
var preload = new Image();
preload.setAttribute('src',path);
$(elm).observe('mouseover',function(){
box.setStyle({backgroundImage: 'url(' + path + ')'});
});
});
I suspect that if you did not install the Action, you might not have
all of the code needed to make that dialog work correctly. Freeway
caches Actions that get used in a document within the Freeway file
itself, but this is an imperfect process, and any Action that uses
multiple files (such as Protaculous) will not work correctly from the
cached version.
Walter
On Jan 2, 2009, at 9:23 AM, waltd wrote:
There should be a function body in the top button. Did you install
the Action before opening the document?
Hi Walter, Yes you are 100% correct. I was so keen to open your file that I didn’t see the folder in B&W that says INSTALL-FIRST. I did see it later when I was Soul Searching and did load the action but
maybe it was a cache problem, without restarting the Mac now I just added your code and the “MAGIC STARTED HAPPENING”.
This is so freakin’ cool Walter, its like an automated system, Thankyou so, so very much.