Full Window Background Slideshow

Hi, Does anyone know the javascript that makes this full screen background slideshow work, can’t seem find it on the web?

Here is another one without the slideshow and has a fade effect.

http://www.mcconaghy-aus.com/company.htm


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

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.

Walter


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

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…


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

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?

Here is my muck-around test page.

http://www.tptc.com.au/background.html

All the best.


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

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,


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

sorry, very very offtopic… but who are the guy’s in the clip??
love it!


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

Hi Eus, Click here…

It’s Amazing that the whole song has no music, just vocals. Good cover of the Michael Mcdonald/ Dobbie bros classic.

You may find this handy

Walter, I got this full screen background thing working much better & without conflicts… I’ll send a link soon. Happy 2009.


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

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).

Thanks

David


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

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).

Thanks

David


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


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

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.

http://scripty.walterdavisstudio.com/switcher/

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).

Thanks

David


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


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


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

Thanks Walter - source code copied for later dissection.

Have a great New Year when it comes to you guys over the pond.

David


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

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.

http://tptc.com.au/background1.html


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

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.

You may download the example file package here:

http://scripty.walterdavisstudio.com/switcher/switcher-project.zip

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.

Walter

On Jan 1, 2009, at 8:44 PM, Pete wrote:

It is an improvement but your version is perfect.


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

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.


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

There should be a function body in the top button. Did you install the Action before opening the document?

Walter


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

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?

Walter


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


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

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.


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