PDA

View Full Version : Lightbox - Help me!



Metinia
10-22-2008, 06:04 PM
Lightbox - Help me

Script URL (on DD):
http://66.102.9.104/translate_c?hl=sv&sl=en&u=http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm&prev=/search%3Fq%3DScript%2B%252Blightbox%26hl%3Dsv%26sa%3DG&usg=ALkJrhj1IyFWiWBOSTmh4H1KDE4qocMNAw

I've followed this guide, but I just can't make the lightbox-script work. I'm using Macomedia Dreamweaver MX 2004 when I make my website, that's good for you to know when you're gonna help, me maybe... :p Maybe I've done something wrong when I followed the guide, so I tell you how I did; First I placed the code:

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

in the HEAD of the page, maybe there's somewhere in the HEAD that I should och sholudn't place it? If I have frames do I have to place it in all the frames' HEAD's? Well anyway, after placing that code in the HEAD I placed this code:

<a href="cat.jpg" rel="lightbox" title="Caption- cute cat!"><img src="cat_thumb.jpg" /></a>

in the BODY (but I changed the image, first searched it up, placed it at the page just to see the "name" of it and then used that name. I did the same thing with the thumbnail.) It comes up a thumb and I save the site. And yes, the 3rd step, I have placed all the files that was in the download package in the same map as the site.

After doing all this I view the website I've created in a Browser, both Explorer and Firefox. When I'm clicking at the small thumbnail of the picture the bigger picture comes up, but just as it lays on the background. There's no Lightbox effect at all, no shadow background, no window that's popping up with the image, just the image at a white background and all the other frames are normal.

What have I done wrong, or why isn't it working?

jscheuer1
10-22-2008, 06:19 PM
This:


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

Should be:


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

Using DW, you should preview the page in the browser, not in DW. There could be other problems. If you want more help, publish the page and:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Metinia
10-23-2008, 06:20 AM
I've changed the code now and layed out the page on the internet. Here's the URL:

http://www.freewebs.com/testisa/

If you click at Portfolio the thumbnail of the picture should turn up, but it doesn't. It did when I preview in a browser in DW. I can't fix a picture right now of how it looks when I'm previewing in a browser in DW, but i'll fix it later.

Metinia
10-23-2008, 12:32 PM
Here comes two pictures where I show you how it looks when I preview in a Browser.

This picture shows the thumbnail:
http://www.freewebs.com/testisa/Del%201.jpg

And this picture is when you have clicked on the thumbnail:
http://www.freewebs.com/testisa/Del%202.jpg

As you can see, there's no Lightbox effect at all.

jscheuer1
10-23-2008, 03:13 PM
Try it without any frames first, on an ordinary page. Lightbox will not cover any frame other than the one it is in anyway. If that won't work for you, you need a different script.

If you do decide to go with Lightbox, you cannot put the script and style tags inside a style section:


<style type="text/css">
<!--
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>
body,td,th {
font-fa . . .

If you were using the right tags (see below*), it should be:


<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>
<style type="text/css">
<!--
body,td,th {
font-fa . . .

*I notice that you are using the Lightbox v2.03a script, but are only using the tags for the original Lightbox. They are two different scripts, make up your mind which to use and follow the instructions for that version.

original Lightbox:

http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm

Lightbox v2.03a:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Another thing I noticed was that on the live Portfolio.htm, a:link tags have a style display set to 'none', so I can't even see the linked image.

Metinia
10-28-2008, 09:14 AM
Yes, I saw that the display was set to 'none', but what should it be? I mean, what should it say so the links is visible? (I'm not good at this...)
Is there maybe anything more that's wrong with the a:link that makes so the lightbox doesn't work? Here it all comes:

a:link {
color: #000000;
text-decoration: none;
background-attachment: scroll;
background-image: url(overlay.png);
background-position: center center;
letter-spacing: normal;
text-align: left;
vertical-align: baseline;
word-spacing: normal;
white-space: normal;
display: none;
margin: 100px;
padding: 100px;
clear: none;
float: left;
height: auto;
width: auto;
border: 10px none #FFFFFF;
list-style-position: outside;
list-style-image: none;
list-style-type: none;

jscheuer1
10-28-2008, 11:19 AM
Just skip that part. All style properties default to whatever is normal for that element. So you could use just:


a:link {
color: #000000;
text-decoration: none;
margin: 100px;
padding: 100px;
float: left;
}

and that's assuming you want the color, text-decoration, margins and padding, and float properties listed. You should probably just get rid of the entire thing.

Metinia
10-28-2008, 12:00 PM
Thankt you very much, I think I (or maybe you...) have made it work.

But I have some more question:

Can I change so the lightbox comes a little bit higher up on the page?

Can I take away the small text in the right, below corner that says: "press x to close"?

Can I change the colour of the lightbox (I mean the colour of the border around the picture and below the picture where there is a small text)?

jscheuer1
10-28-2008, 03:21 PM
Sure, but what version are you using?

Metinia
10-29-2008, 07:19 AM
I'm using the first version, the original. (Is it named Lightbox 1.0 maybe?)

This one that's here:
http://www.dynamicdrive.com/dynamici...tbox/index.htm

jscheuer1
10-29-2008, 07:51 AM
OK, here in lightbox.css:


#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
margin-top: -50px;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; display: none; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

Let's zoom in:


#lightbox{
background-color:#eee;

Make that any valid css style color value, like #f00 for red. You may also want to change the color values for:


border-bottom: 2px solid #666;
border-right: 2px solid #666;

to make the them complimentary to the background-color you choose. Then here:


#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
margin-top: -50px;
}

Add the highlighted line and make the -50px however many pixels you want to move the lightbox up. Finally here:


#keyboardMsg{ float: right; display: none; }

Add the highlighted display property value to remove the press x to close.

Metinia
11-19-2008, 08:03 PM
I've find out that I've got another problem too. How do I do so I can click at the lightbox (at an arrow or something in the right or left side) and come to the next picture. Right now works the lightbox great when it's only one picture that can be shown at a time. I have to click exit and click up the next picture again as it is right now.

jscheuer1
11-20-2008, 05:23 AM
That requires:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Metinia
11-20-2008, 12:48 PM
Okey, I have to change version then. But I don't really understand where to put the code:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Or how to use it, to make it work with my pictures. What do these parts mean:

"images/image-1.jpg"

"images/image-2.jpg"

"images/image-3.jpg"

jscheuer1
11-20-2008, 02:58 PM
That part is the same as in the Lightbox script that you are currently using.

Those are the paths and filenames to the larger images that you want to be shown in the lightbox.

In fact the way that you use Lightbox 2.03a in your markup is the same, except that you can add the groupname:

rel="lightbox[groupname]"

to get the next/previous links in the lightbox display for a particular group of images.

Metinia
11-20-2008, 07:08 PM
But I don't understand, how do I do to create a group? And I didn't undestand where I should put the code:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Should I just put it where I've put the other code with the pitcure and the link?

jscheuer1
11-20-2008, 07:35 PM
Yes. . . .

Metinia
11-22-2008, 08:16 AM
How do I create a group? Because, isn't it the groupname that should stand instead of [roadtrip]?

jscheuer1
11-22-2008, 09:21 AM
The brackets ([]) are required. You may use whatever groupname you like inside the brackets. Use the same groupname for all images in a group.

Metinia
11-23-2008, 10:19 AM
So by putting a name in the brackets you create a group, and one group is all the pictures with the same name. Now I finally understand, I think. Thank you very much!