Fading slideshow with rounded corners

Legacy ActionsDev
1

I am using fading slideshow on a front page of a site
http://www.taskchildcare.co.uk

In the design the corners on the box for the images have been rounded. When viewed in a browser they are not.

Do I need to create all the images with the exact dimensions and rounded corners to acheive the rounded corners at the bottom of this box?

The rounded corners on the other layer beneath are the way the image box should be.

Thanks for any inputs.

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

2

As a bit of temporary work round on this I have put a graphic item over the corners to create the shape I was looking for but I would prefer to find a more structured way to achieve the same affect.

Any thoughts anyone at all?

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

3

You can round the corners of each image directly in Freeway. Click on
your photo box, then the Inspector’s Style tab, then look in the Shape
segment of the inspector. Pull down the Corner picker to the desired
radius.

You can then drag each corner to a separate radius (or fully square)
if you like by hovering over the little empty circle that appears at
the radius point of each corner. When you’re hovering over it, your
cursor will become a hollow, tail-less arrow, letting you know you can
drag that radius point. You could also use my CSS3 Corners action,
which lets you set curved corners, albeit without inviting IE users to
the party.

Walter

On Jan 25, 2011, at 2:38 PM, tonzodehoo wrote:

As a bit of temporary work round on this I have put a graphic item
over the corners to create the shape I was looking for but I would
prefer to find a more structured way to achieve the same affect.

Any thoughts anyone at all?

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

4

Hello Walter,
Thanks for your input.
The graphic box with the Fading slideshow applied to it has already had the radius changed, but the radii do not render and the full square corners of the photos appear.
Not sure if there is some conflict to do with the action or the layering at all.

I tried the CSS3 corners action but am I right in saying that this is just for html items?

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

5

I just tried it on an image using hand-coding techniques, and you can certainly round the corners of an image. But if you’re applying my Action to an image on the page, you might be getting the correct code to round the DIV that wraps around that image, but not hitting the image itself, and the image may be peeking out of its container. Take a look at the page in Safari. If it’s going to work, that’s one place it will definitely work. If the image is not showing as rounded, upload the page (and image) to a server somewhere and post a link to it so I can investigate.

Walter

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

6

Hello again Walter,
I tried and its the same in Safari.
Have a look if you can at this:

http://www.taskchildcare.co.uk/tester.html

This is the same page without the corner mask on it whereas the front page has the mask on.
Let me know what you think.
Thanks again

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

7

I think it can be done, but the only way I can see to pull it off right now is for you to hand-code a patch. First of all, set your Freeway document to More Readable in the Output pane of the Document Setup dialog. Then look at your page in a browser and View Source. Search for a line that begins with #Frontpanel1 near the top of the source code. (It will be inside of the style tag for the page.)

Copy that entire line, all the way to the closing } curly brace. At this point, you can remove the CSS3 Corners Action from the banner image area.

Now in the Page / HTML Markup dialog, select the Before section using the picker in the lower-left corner of that dialog. Type in the following:

<style type="text/css">

Then paste in the code you copied from the the page source, beginning with #Frontpanel1 and ending with }.

Right after the word Frontpanel1, type a comma, and then add

 #Frontpanel1 img

so the opening part of the style rule reads like this:

#Frontpanel1, #Frontpanel1 img { ...

Finally, type the ending script tag:

</script>

and preview and see if the corners are properly curved in your browser.

Walter

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

8

Thanks Walter, I’ve given it a go and I’m getting a blank window in Preview as well as in a browser window.

Have a look if you have the time and see if I’ve put it together properly. I was careful but you never know!

http://www.taskchildcare.co.uk/tester.html

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

9

Oh duh, my fault totally. Change

</script>

to

</style>

That was silly of me.

Walter

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

10

No problem Walter. Had it not been so late last night I might have noticed myself. You could have asked me to toast my laptop last night and I would have probably done it!

I changed it over and it doesn’t appear to have changed anything in Firefox or Safari.
Any other suggestions are welcome of course. I am awake and hopefully somewhat more on the ball than last night!

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

11

Could you upload it again? It’s still showing the error online (blank
screen). I can show you that the effect works, quite simply, but I’d
like to see you get the effect you want in your document.

Walter

On Jan 26, 2011, at 3:21 AM, tonzodehoo wrote:

No problem Walter. Had it not been so late last night I might have
noticed myself. You could have asked me to toast my laptop last
night and I would have probably done it!

I changed it over and it doesn’t appear to have changed anything in
Firefox or Safari.
Any other suggestions are welcome of course. I am awake and
hopefully somewhat more on the ball than last night!

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

12

Just so you can see it does work in Freeway:

http://scripty.walterdavisstudio.com/corners

Walter

On Jan 26, 2011, at 3:21 AM, tonzodehoo wrote:

No problem Walter. Had it not been so late last night I might have
noticed myself. You could have asked me to toast my laptop last
night and I would have probably done it!

I changed it over and it doesn’t appear to have changed anything in
Firefox or Safari.
Any other suggestions are welcome of course. I am awake and
hopefully somewhat more on the ball than last night!

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

13

Hello again Walter,

Just a quick note. The server which was hosting the website was down for a bit but its up and running again now.
The page still does not show anything. If you get the chance then have a look at the code thats creating the blank screen and let me know if you see what the problem is.

I had a look at the corners page you have sent me and I can see that it works ok there. Is it the case that the css3 action is only for html items and not graphic items?

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

14

On Jan 26, 2011, at 6:40 PM, tonzodehoo wrote:

Hello again Walter,

Just a quick note. The server which was hosting the website was
down for a bit but its up and running again now.
The page still does not show anything. If you get the chance then
have a look at the code thats creating the blank screen and let me
know if you see what the problem is.

You still need to change the to in the Page / HTML
Markup.

I had a look at the corners page you have sent me and I can see that
it works ok there. Is it the case that the css3 action is only for
html items and not graphic items?

The Action only works for HTML items, I could possibly modify it to
have it work on layered graphic items as well. It’s a matter of
finding the time to tinker with it. The result would be the same code
as I recommended you try (and as I used on my demo page), but I would
need to sniff the element that the Action was applied to and make this
code conditional – it wouldn’t do to have all child images of a
rounded box be rounded by the same amount as the box if that’s not
what the designer intended.

Walter

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

15

Thats the most recent version uploaded. I couldn’t initially upload it due to server problems.

Let me know if you spot anything.

The front page of the website has the graphic object shaped to cut off the corners to give the impression as to what I’d like to achieve. I’d just like to know if it is possible whilst applying the fading slideshow or if this Action somehow overrides the curves put on the main graphic box the Action is applied to.

Thanks again

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

16

This page is nearly 50MB in size including the images, and there’s
something wrong with the slideshow script you’re using – a memory
leak to be precise – because it’s growing with each transition. It
started out around 48MB with all the image loading, but each time a
new image appears, the page total size goes up by the size of the
photo. Your largest photo is october-10-007.png, which is 1.817 MB in
size. That’s four times the size that the entire page and all of its
photos should be for a snappy experience.

Walter

On Jan 27, 2011, at 4:18 AM, tonzodehoo wrote:

Let me know if you spot anything.

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

17

Hello Walter.
I’ve checked the images and they all measure the 950px width of the graphic box the actions been applied to. Some are marginally taller. They are all 72dpi as well.

The one you mention I have edited. All images are now around 1Mb in size.
When you say a memory leak I thought that this was a purely human condition!
Let me know if you think this is something which needs further investigation.

I didn’t think the dpi would be an issue but I did suspect that the physical size would affect how they appeared in the box.

Any suggestions?

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

18

On Jan 27, 2011, at 11:39 AM, tonzodehoo wrote:

Hello Walter.
I’ve checked the images and they all measure the 950px width of the
graphic box the actions been applied to. Some are marginally taller.
They are all 72dpi as well.

They are still way too large in file-size. For example,
calderglen-029.png is 1.41MB all by itself. If you’re going to show
this many images of this pixel dimensions, please save them as JPEG
with low quality, rather than as 24-bit PNG images of fairly high
quality. You need to get these images down to around 70 - 80 KB each.

The one you mention I have edited. All images are now around 1Mb in
size.
When you say a memory leak I thought that this was a purely human
condition!
Let me know if you think this is something which needs further
investigation.

The script appears to be loading each image at least twice. The first
time when the preloader script fires, and the second time when the
image is actually shown. When I watch the site load in Safari’s Web
Inspector, I can see the total file size for the page grow grow grow
as the animation progresses.

I didn’t think the dpi would be an issue but I did suspect that the
physical size would affect how they appeared in the box.

Right, physical (i.e. pixel) size is the only thing that matters on
the Web. All images are always shown as if they were 72ppi, regardless
what the ppi header in the file directs.

Any suggestions?

One or more of the following will help:

  • Compress the living daylights out of these images, and save them in
    JPEG format, which is always going to be 8 bits per pixel smaller
    (before compression) than PNG, because it doesn’t contain an alpha
    channel.

  • Make the images smaller in pixel dimensions.

  • Use fewer images.

Also, be sure to look into a different slideshow script, because this
one is doubling your page size by downloading all of the images twice.

This appears to be your home page for the site. I would recommend
putting these slideshow images on a different page if that’s the case.
Your home page has one and only one purpose in life – to get people
introduced to your content and off of the home page as quickly and
efficiently as possible. You come to the home page, not because it’s
the source of information, but in order to find what you’re actually
looking for. If you had a little graphic on the home page that said “A
day at TASK in pictures”, your visitors could choose to visit it,
would expect it to be a large page (the pictures part would be a dead
giveaway) and would be expecting to wait. Even after you re-compress
these images, they will still be too many and too large for a
comfortable load time over an average connection. Most people will
give up and go elsewhere while they’re waiting 11.9 minutes (over a
full T1!!!) to have your page finish loading.

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

19

Hullo again Walter,

I’ve made the changes you suggest i.e saved and loaded as jpegs. No change to the corners.
Is it worth me dropping a note to the Action developer at all?

Is there another script you know of which can achieve the same effect plus give the curved corners?

I guess I was hoping to learn more about how this script works by using it and I sure enough I think I have. Its a pity for whatever reason it doesn’t seem to be able to do all that I’d hoped I’d wanted it to.
I’ll persevere.
Thanks also for your additional comments on the design. Fortunately/unfortunatley, whatever way you may think on it, the client likes it. The challenge is to get it functioning.

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

20

I’m just being pragmatic here. The client liking the design will not
keep the majority of visitors from waiting around a minute or so,
deciding that your server is broken, and leaving en masse. You’re the
expert, you have to please your client while also not letting him or
her shoot off a lower extremity. You can probably optimize this design
into working, I would still recommend cutting the number of photos
down to maybe a third of the ones you have there.

Walter

On Jan 27, 2011, at 3:02 PM, tonzodehoo wrote:

Thanks also for your additional comments on the design. Fortunately/
unfortunatley, whatever way you may think on it, the client likes it.

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