[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 368
  • Last Modified:

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)?
0
ddantes
Asked:
ddantes
  • 2
  • 2
1 Solution
 
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
 
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

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now