[jQuery] Re: Script like this site: http://ringvemedia.com/

[MorningZ]

That's an awesome way to do a slideshow. it would be slick to wrap
that up in a jQuery plugin (like the cool numeric stepper)


*Blech* to pollution in China. it really is that bad, i got to
experience Beijing and Shanghai first hand back in May.  but i
digress  :-)




On Oct 31, 10:02 am, "Andy Matthews" <[EMAIL PROTECTED]> wrote:
> I don't think you need Javascript for that. If you put an image as a
> background, then tell it to scale to 100%, you should be good.
>
> -Original Message-
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
>
> Behalf Of Gabriel Tadeu
> Sent: Thursday, October 30, 2008 5:06 PM
> To: jQuery (English)
> Subject: [jQuery] Script like this site:http://ringvemedia.com/
>
> I visited this site and really like the image resizing...
>
> the original pic is big, resizing with bigger resolutions (like 1440x900).
>
> BUT the actual script is in moo tools, how create the same effect using
> jQuery?
>
> thanks!

[jQuery] Re: Script like this site: http://ringvemedia.com/

[Andy Matthews]

I don't think you need Javascript for that. If you put an image as a
background, then tell it to scale to 100%, you should be good. 

-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Gabriel Tadeu
Sent: Thursday, October 30, 2008 5:06 PM
To: jQuery (English)
Subject: [jQuery] Script like this site: http://ringvemedia.com/


I visited this site and really like the image resizing...

the original pic is big, resizing with bigger resolutions (like 1440x900).

BUT the actual script is in moo tools, how create the same effect using
jQuery?

thanks!

[jQuery] Re: Script like this site: http://ringvemedia.com/

[Thasmo]

Actually this effect is not done using JS,
it's just simple CSS. Have a look at the
element with the id #bg.

[jQuery] Re: Script like this site: http://ringvemedia.com/

[Alexandre Plennevaux]

i think there is first and foremost a clever use of CSS, because if i
disable javascript, the effect is still there. Anyway, what's nice is
this proportional resizing of the image, according to the viewport
dimensions.

Then, the relevant code is this:

kina = {
doc: { x: 0, y: 0 },
fix: function()
{
if (kina.bg.complete && (db.offsetWidth != kina.doc.x ||
db.offsetHeight != kina.doc.y || kina.fix.src != kina.bg.src))
{
var bg = kina.bg.getSize();
kina.doc = { x: db.offsetWidth, y: db.offsetHeight };
kina.fix.src == kina.bg.src || $extend(kina.fix, { p: bg.x
/ bg.y, src: kina.bg.src });
kina.bg.setStyles({ width: (bg.y = kina.doc.x > (bg.x =
Math.round(kina.doc.y * kina.fix.p))) ? kina.doc.x : bg.x, height:
bg.y ? Math.round(kina.doc.x / kina.fix.p) : kina.doc.y });
}
}
}


kina.bg is an image available in the DOM.  kina.db is the document.body .





On Thu, Oct 30, 2008 at 11:05 PM, Gabriel Tadeu <[EMAIL PROTECTED]> wrote:
>
> I visited this site and really like the image resizing...
>
> the original pic is big, resizing with bigger resolutions (like
> 1440x900).
>
> BUT the actual script is in moo tools, how create the same effect
> using jQuery?
>
> thanks!