Good practices for dealing with full screen transitions.

[bluebomber]

Hello, I just thought I'd throw this question out there to get peoples feelings on this.I've almost finished a photography portfolio site for a friend, it's a very simple site with a series of photos (about 700px wide) that appear on a number of pages.At any point, the user can click a photo and the website fades in (using CSS opacity) a full screen DIV (100% screen sized fixed position) over the top of everything else with the selected photo inside it for isolated viewing - this is done in javascript.Should the user click the photo again this layer will gradually fade out to 0 at which point its css display is set to "none" where it then lays dormant for the user to click on another image.Everything is working great - but at the back of my mind I can't help but get this feeling everything is very inefficient and processor intensive because in anything other than chrome you can really feel the browser chugging away (or at least you can on my laptop) and it certainly loses a certain amount of "slickness" a lot of the pre-written and free to download javascript lightbox style applications out there have.I was just wondering if anyone knew of any simple but more efficient ways of doing what I'm trying to achieve.An unfinished version of the site can be found herehttp://www.alkchan.com/louisamorenew/index.htmThanks in advance.

[Fmdpa]

It worked just fine for me (and I don't have a processor worth mentioning), but I really don't see the point in why you did it. The photo remains the same size. Sure, it's cool how the background fades black, but what practical purpose does it serve?

[bluebomber]

It was done at the request of the client I suppose you could say, it's an art decision - the user has the option of viewing a piece of work in isolation without the rest of the page acting as a distraction.I know it works... I guess I started this thread just to get some views on whether I'm doing things badly (I'm still very much a beginner with JavaScript) - because I'd noticed that a lot of other javascript examples out there seem to do things a lot faster.

[Fmdpa]

It is great as it is, but if you want to improve it here's what I would do. Add navigation links to go back/forward (that were optionally keyboard-controllable). Also, you could allow the "esc" key to return to the default page state. Now that I think of it, I'm really getting these ideas from the popular Lightbox plug-in. You might want to peek at demos of lightbox, and see if you want to integrate any of its features into your application.

[bluebomber]

Yeah I'm familiar with Lightbox, I already use it on my own website (which was made before I started learning javascript) - its actually what I was referring to earlier when I was talking about speed issues.Lightbox is really quick.

[Fmdpa]

Again, I really do not sense any slowness in your JS script. If you are, maybe it is because you are working with larger images than lightbox usually presents.

[bluebomber]

Well thanks for checking anyway - it's appreciated.I'll take your comments on board and check on different computers.

[Fmdpa]

It would be nice to hear input from other members here. Your fade-in script is about as efficient as it gets. So any dragging you sense is probably the result of the browser wanting more CPU power from the computer (not like I have a powerful computer...).