Fade-in effect...

[nomad]

Hi there, I'm new here (http://lucaslemonnier.com) and have a question.

Can anyone tell me how to get that "fade-in" effect when a picture loads? You can see what I mean here: http://photoblog.vengas.com/
I'm assuming there's a line of code to be written somewhere, but I have no idea what it is or where it's supposed to go.

Thank-you all for your help!

[Connie]

Welcome here!

one ironic question: do you know that grey colors make old-eyed-people blind? I have a lot of difficulties to read the links there.. grey on grey... usability is an aesthetic problem sometimes ;=)

if you read the sourcecode of that page, you will see that there is a javascript which produces this effect: trans.js


unfortunately this template lays more value on beauty than on valid code, 16 HTML errors

http://validator.w3.org/check?verbose=1&uri=http%3A//photoblog.vengas.com/

I recommend to ask the owner of this website for permission to use that javascript

[dankster]

http://clagnut.com/sandbox/imagefades/

i got it to work on my site www.dontlinkhere.com

but you are right it renders my valid xhtml invalid!

[nomad]

Welcome here!

one ironic question: do you know that grey colors make old-eyed-people blind? I have a lot of difficulties to read the links there.. grey on grey... usability is an aesthetic problem sometimes ;=)

if you read the sourcecode of that page, you will see that there is a javascript which produces this effect: trans.js


unfortunately this template lays more value on beauty than on valid code, 16 HTML errors

http://validator.w3.org/check?verbose=1&uri=http%3A//photoblog.vengas.com/

I recommend to ask the owner of this website for permission to use that javascript

Thanks for the feedback. My specialty is photography, not web design, web usability, web development, or web anything. In this respect I am learning and this is my first venture. I have, however, recently had this photoblog looked at by three 80 year-olds and a 78 year-old, and received absolutely no negative feedback regarding usability struggles. Hmmmm. I think I'll stick to it the way it is for now (I really want the emphasis to be on the pictures, hence the subtle text colors), but I am definitely going to stay open to changes if I receive more comments such as yours!

I have contacted the owner of the site, but I still cannot seem to make it work. You seem to be well-versed in this domain, so perhaps you have something more specific to offer on how to obtain this effect.
Cheers,

Lucas

[nomad]

Thanks Vengas, and everyone else, as I got it to work.

This forum is a great resource and I hope to keep learning here.

[Connie]

Lucas,

I meant this vegas-page is not very user-friendly, not yours!
At that side links are hardly invisible, grey in grey
when I wrote my comment I haven't seen your page already, I did not point to your page ;=)

[nomad]

Lucas,

I meant this vegas-page is not very user-friendly, not yours!
At that side links are hardly invisible, grey in grey
when I wrote my comment I haven't seen your page already, I did not point to your page ;=)


Oh, total misunderstanding on my part! A bit of a relief, because I hated to think some people might have trouble with the design... I tried to find a compromise between an un-invasive navigation look, and something people can still easily work around.

Thanks for the clear-up.

[GeoS]

Fade effect:
http://clagnut.com/sandbox/imagefades.php/

[owen-b]

Am I right in thinking that this code won't work if images are not all one standard size?

[dankster]

it works on any image size....

[owen-b]

I think you might misunderstand - I'm sure it works on any image size, but does it work if your images are all different sizes from post to post?


The 'loading…' image is set as the background to the photoholder div, and the photoholder is sized to match the photo.

What I mean is that photos on my blog aren't a set size - some are wide, some are square, some are 'standard'. I've not seen this script running on a blog that <i>doesn't</i> have a uniform image size...

[V E N G A S]

Oh, I've just seen that you talk about my photoblog. Well, I must agree, it can be difficult to see the my links grey-grey, especially on a CRT monitor. On my calibrated LCD monitor I could see it without any problem.

For me it was very important, that the photo are completely in the center and not the design around. Anyway, I changed the colors and hope you like it know.

[Connie]

I will check it later! I think not only the photos but also the navigation could be helpful ;=)

[dakwegmo]

owen-b I am using this script on my photoblog. Of my last four photos posted two are landscape, two are portrait, and the fade in script works just fine on each of them. If you look a little further back you'll see these images: http://www.invisiblegreen.com/index.php?showimage=34 and http://www.invisiblegreen.com/index.php?showimage=3, which have more of a square crop and the fade in works on those, too.

[owen-b]

Fantastic! What threw me was the bit on the linked page that held the code that said you had to enter a size for the placeholder - what do you do if your photos aren't the same size, then?