?
Solved

Getting lightbox plugin to work

Posted on 2013-06-01
4
Medium Priority
?
363 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 25

Accepted Solution

by:
clockwatcher earned 2000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
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…
Suggested Courses
Course of the Month8 days, 1 hour left to enroll

765 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