Looking for a lightbox-type solution...

Associate
Joined
31 May 2011
Posts
353
Basically i've developed a site in .Net and i need to help users understand how it works when they first visit the site.

I basically want several lightbox-style popups to display on the screen and offer the user some explanation about the elements on the page. (and so i need to be able to position them)

The user only needs to see the boxes once (which i can handle) but they need to be able to close them manually.

Can anyone suggest a solution? Cheers
 
If you want a solution that will require minimal effort from yourself, how about using Lightbox itself and just having the descriptions as images?
 
For something so simple, I would just make my own.

HTML
Code:
<div id="box1" class="infopopup">
    <p>Your Content</p>
</div>
<div id="box2" class="infopopup">
    <p>Your Content</p>
</div>
<div id="box3" class="infopopup">
    <p>Your Content</p>
</div>

jQuery
Code:
$(document).ready(function(){

	$('.infopopup').each(function(){
		$(this).append('<a href="#" class="close">Close</a>');
	});
	
	$('.infopopup .close').live('click', function(){
		$(this).parent().fadeOut();
		return false;
	});

});
 
Without sounding too harsh here, you are trying to fix the wrong problem. If you are trying to tell people how to use your site you need to get a UX designer's input. Essentially, if you site can't be used without a guide, go back and design it differently. Have you tested it in front of a user group yet? Are they all getting stuck in the same places? Or are you assuming they won't know what to do?
 
Without sounding too harsh here, you are trying to fix the wrong problem. If you are trying to tell people how to use your site you need to get a UX designer's input. Essentially, if you site can't be used without a guide, go back and design it differently. Have you tested it in front of a user group yet? Are they all getting stuck in the same places? Or are you assuming they won't know what to do?

Thanks for your input.

Design is not the issue here - it's an intranet that i'm working with and the purpose of the popup help boxes is to introduce them to the many elements on the page when they first visit.

The idea is for them to read the intro text, close the box and immediately understand what they are looking at.
 
The idea is for them to read the intro text, close the box and immediately understand what they are looking at.

Wouldn't it make more sense to just drop in some little help icons with a nice looking tooltip attached to them?

ala..

http://www.iconfinder.com/search/?q=help

http://flowplayer.org/tools/tooltip/index.html

I quite like the jquery tools tooltips because you can do pretty much anything you want to them. I use them in my CMS and have done a custom design for them and used the API to have them obtain the help text for an element via ajax, rather than having it inline on the page.
 
Back
Top Bottom