Getting lightbox plugin to work

My first lightbox project is at http://mauitradewinds.com/lightbox/test.htm  and it isn't working.  Can you correct my error(s)?
ddantesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
clockwatcherCommented:
You have a few problems:  

   Your jQuery library is too old.  The lightbox you're using requires 1.7.2.  

   You specify the lightbox element with the rel attribute not the class attribute

   You don't need the javascript that you've got in there

   You need to include a reference to the lightbox stylesheet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>lightbox test</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="js/lightbox.js" type="text/javascript"></script>
		<link href="css/style.css" rel="stylesheet" type="text/css" />	
                <link href="css/lightbox.css" rel="stylesheet" />
	</head>

	<body>
		<center><a href="images/starwind/StW-exterior.jpg" rel="lightbox"><img src="images/starwind/StW-exterior-Thumb.jpg" width="300" height="180" alt=""></a></center>

	</body>
</html>    

Open in new window

0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
ddantesAuthor Commented:
Thank you, that got it working.
May I ask for a little refinement?  In iPad, if I tap the thumbnail in portrait orientation, the larger image is around 25% beyond the viewport to the right.  In landscape view, it looks fine.  I'd like to avoid that overflow in portrait view.

On my desktop, the larger image is around 15% below the screen, and the close button is not visible without scrolling.  Can you suggest a fix for that?

I increased the points on this question because of the additional specifications I am requesting, if you're willing.
0
 
clockwatcherCommented:
I don't really have an inclination to dig into the lightbox source to try and get it to work for a particular iPad orientation or for a particular media screen size.  I suggest trying out one of the many other lightboxes out there if you're not happy with the results that you're getting from this one.  Here's a list of a few:

  http://www.swedishfika.com/2010/01/29/5-great-alternatives-to-lightbox/

I've heard good things about colorbox and have used shadowbox in the past and liked it.

You could also try contacting the author or posting another question here.  If points are an issue, feel free to go ahead and delete this question.  I'm here to kill time, procrastinate on my real work and help out a bit when I can.  I have plenty of answered questions.  One less is certainly not going to upset my day.  :-)

Best of luck to you.  Give shadowbox a try -- http://www.shadowbox-js.com/
0
 
ddantesAuthor Commented:
Thank you for your good advice.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.