Enlarging an image- how does it happen?

[Domain-K-]

Hi all,

Have a look at this web page. Click on the images to see how they are enlarging on the same page fading the background. Can anyone tell me how this is done?

http://www.dailymail.co.uk/news/article-1022822/Incredible-pictures-Earths-uncontacted-tribes-firing-bows-arrows.html

Thanks in advance.

[PeejAvery]

It's very simple. You create an overlay (http://peejstudio.com/coding/javascript/overlay.php). Then you position the image. Using setInterval() you increment it's size. I have a variation of that (http://peejstudio.com/coding/javascript/zoom.php).

EDIT: Fixed links.

[Domain-K-]

Thanks for replying, but the links are not opening. It says unable to connect.

[PeejAvery]

Sorry about that. I had my browser open with two tabs (local web server and the real site). I accidentally copied the local server links instead of the live ones.

The links have been fixed.

[Domain-K-]

Thanks a lot. Both examples have been very helpful. However, can you tell me how I can do both together? First the background fades and then the image enlarges?

[Domain-K-]

I found the following while googling: http://www.lokeshdhakar.com/projects/lightbox2/

How is it?

[PeejAvery]

Lightbox is a project that has been going on for years. It is highly advanced. To explain it would take a very long time.

The concept, however, is simple, so I will explain that.


You get the dimensions of the page. You can see that in my overlay example (previous post).
You create an overlay which is partially opaque. It should have bounds of left: 0px; top: 0px; width: WINDOWWIDTH; height: WINDOWHEIGHT. Those you can get from the overlay's function getPageInfo().
Preload an image. Before displaying it, grab its dimensions so you can place its left and top coordinates accordingly.
Show the image at a small resolution. Then using setInterval(), you can slowly resize it until it is full resolution.


EDIT: How good at JavaScript are you? This implementation is an intermediate/advanced script. Lightbox is advanced.

[Domain-K-]

Thank you. I am just starting to learn javascript. However I was professional vb6 programmer in the past and I understand programming logic well. I am right now experimenting and learning javascript. It will be great if you can suggest good tutorials for me.

A few questions about light box-
1. Is there any problem in using it for a commercial project?
2. How can I place the image a little closer to the top border of the screen?

[PeejAvery]

Thank you. I am just starting to learn javascript. However I was professional vb6 programmer in the past and I understand programming logic well. I am right now experimenting and learning javascript. It will be great if you can suggest good tutorials for me.
I would start with W3School's JavaScript Tutorial (http://w3schools.com/js/default.asp) and then move on to watch all of Douglas Crockford's videos out of these videos (http://video.yahoo.com/mypage/video/33385). He has a four part "The JavaScript Programming Language" series and a three part "Advanced JavaScript" series. Both are excellent.

1. Is there any problem in using it for a commercial project?
I have seen many commercial sites use it before. Your best reference on whether you should or not would be to read the authors license, and check with the company which plans to use it.

2. How can I place the image a little closer to the top border of the screen?
There might be variables in the code for tweaking....But...Since that is another persons work, and quite a large work...your best option is to contact him personally.