Jump to content

Good practices for dealing with full screen transitions.


bluebomber
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...