Solved

Getting lightbox plugin to work

Posted on 2013-06-01
4
357 Views
Last Modified: 2013-06-02
My first lightbox project is at http://mauitradewinds.com/lightbox/test.htm  and it isn't working.  Can you correct my error(s)?
0
Comment
Question by:ddantes
  • 2
  • 2
4 Comments
 
LVL 25

Accepted Solution

by:
clockwatcher earned 500 total points
ID: 39213805
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
 

Author Comment

by:ddantes
ID: 39213962
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
 
LVL 25

Expert Comment

by:clockwatcher
ID: 39214725
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
 

Author Comment

by:ddantes
ID: 39214735
Thank you for your good advice.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now