Lightbox help!

donnalouwho · Post by **donnalouwho** » Tue May 07, 2013 1:27 pm

Hi Michael,

I can't seem to locate the proper lightbox instruction from class so I am trying to go it via demos online. I can't seem to get it to work! Can you check my code for me? What the heck am I missing?! Also, is there some way to to have one thumbnail image which opens to a lightbox with multiple images on a scroll or arrow? So, one main link image and then I have 8 to scroll through.

If you can locate the working class lightbox file, I would love that! the index I try to open in the working graphics folder, "Michael's Modified Lightbox" won't open for me!

Thanks for your help. Code below.

Donna

<!doctype html>
<html>
<head>

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<meta charset="utf-8">
<title>Student Gallery</title>
<link href="css/program_overview.css" rel="stylesheet" type="text/css">

<style type="text/css">
a:link {
color: #FFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #A44415;
}
a:active {
color: #A44415;
font-weight: bold;
}
</style>
</head>

<body>

<div class="top_banner"></div>

<div class="navigation_bar">

<div class="navigation_links">
<p>Home        <a href="program_overview.html">Program</a>         <a href="classes.html" target="_blank">Classes</a>         <a href="degrees.html" target="_blank">Degrees</a>         Instructors         Gallery

</div>

</div>

<div class="gallery_container">

<div class="enter_button"><a href="images/gallery_work_0.jpg" rel= "lightbox"><img src="images/EnterButton.gif" width="250" height="204" alt="enter gallery here"></a></div>

</div>

<div class="footer_image_instructor
"><img src="images/tmcc_white.png" width="100" height="31" alt="tmcc"></div><br>

<div class="footer_information_instructor">Truckee Meadows Community College • 7000 Dandini Boulevard • Reno NV 89512-3999<br>
Information: 775-673-7000 </div>

</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/jquery-ui-1.8.18.custom.min.js"></script>
<script src="scripts/jquery.smooth-scroll.min.js"></script>
<script src="scripts/lightbox.js"></script>

</body>
</html>

Post by **Instructor** » Tue May 07, 2013 5:21 pm

A couple of things stand out in the code to me. To get your lightbox functioning you need to check the following things.

- Make sure you have a link to the lightbox.css file in your <head> tag. It should look like this:

Code: Select all

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Also make sure you have the lightbox.css file in your "css" folder.

- Make sure you have the proper scripts linked before your close </body> tag. The should look like this:

Code: Select all

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/lightbox.js"></script>

Also make sure you have a lightbox.js file from "Michael's Modified Lightbox" or from the class files in your "scripts" folder. Don't use the ones from any of the downloadable lightboxes from the internet, they won't work with the latest version of jQuery.

- On any link you want to pop a lightbox, make sure to have the following code inserted in that link's <a> tag:

Code: Select all

rel="lightbox"

Make absolutely sure there are no spaces, that you have an equals sign, and that you have open and closing quotes.

- Make sure you have all of the lightbox images (contained in the "Michael's Modified Lightbox" folder) in your "images" folder.

If you have all this, then your lightbox should work.

The lightbox page we constructed in class is "lightbox_demo.html" and it's in the class files folder.

As far as I know you can't have a lightbox open and have a scrollbar between images. There may be other lightboxes that do this, but I consider them beyond the scope of this class. If you want to go hunting for them, I'd try Googling "lightbox scrollbar gallery" and "lightbox that shows web page".

You can, however, tie lightboxes together by putting the following code in the image link <a> tags:

Code: Select all

rel="lightbox[somewordhere]"

Where "somewordhere" is a word of your choice used across all the images you want to link together. When one is clicked, you can click to one side or the other (or press left and right arrows) to page between all such linked images.

I've attached a fresh "Michael's Modified Lightbox" to this message for your use. Hopefully it'll bring better luck than the first one.

donnalouwho · Post by **donnalouwho** » Wed May 08, 2013 5:02 am

thanks, michael! will give it a try!

GRC 175 Learning and Discussion Forum

Lightbox help!

Lightbox help!

Re: Lightbox help!

Re: Lightbox help!