Solved

Getting lightbox plugin to work

Posted on 2013-06-01
4
355 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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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…

708 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

15 Experts available now in Live!

Get 1:1 Help Now