Simple lightbox question

[Toshk]

1) Lightbox image viewer 2.03a

2) http://www.dynamicdrive.com/dynamici...box2/index.htm

3) I have got the lightbox viewer to work when i click on the writing but how do i get it to work when i click on a picture? this is probly very simple but i am new to this.

[jscheuer1]

<a href="image-1.jpg" rel="lightbox" 
title="my caption"><img src="image-1-tbn.jpg" border="0"></a>

[Toshk]

thanks, that works.

How would i group pictures together?

[jscheuer1]

I don't know what you mean by group. If you mean make them part of a lightbox group:

<a href="image-1.jpg" rel="lightbox[group1]" 
title="my caption"><img src="image-1-tbn.jpg" border="0"></a>
<a href="image-2.jpg" rel="lightbox[group1]" 
title="my caption"><img src="image-2-tbn.jpg" border="0"></a>
<a href="image-3.jpg" rel="lightbox[group1]" 
title="my caption"><img src="image-3-tbn.jpg" border="0"></a>

[Toshk]

i just uploaded the page with the lightbox and it doesn't seem to work. the background goes dark but the picture just loads and doesn't come up. the picture which is suppose to come up isn't that big either it's only 400kb. it works on the Frontpage preview.

here is a link to the page

http://www.stanica.99k.org/akcjaletnia.htm

(click the first picture on the left)

[Toshk]

Don't worry. i figuered out the problem

the file link was .jpg
when it should have been .JPG

it needed to be in capitals.

[jscheuer1]

Two major problems in your source code. First, upper and lower case matter on the web, so:

akcjaletpicshidef/1.jpg

doesn't exist, though this image file does:

akcjaletpicshidef/1.JPG

Change it in your source like so:

    <a href="akcjaletpicshidef/1.JPG" rel="lightbox" title="Akcja Letnia">
    <img src="akcjaletpics/1.JPG" border="0" width="400" height="268"></a>

Second, with this sort of syntax:

<!--[if gte vml 1]><v:shape
 id="_x0000_s1027" type="#_x0000_t202" alt="" style='position:absolute;left:49.5pt;
 top:168.75pt;width:301.5pt;height:213pt;z-index:1' stroked="f">
 <v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
  <tr>
    <td align="center">
    <a href="akcjaletpicshidef/1.jpg" rel="lightbox" title="Akcja Letnia">
    <img src="akcjaletpics/1.JPG" border="0" width="400" height="268"></a></td>
  </tr>
</table>
 </v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:66px;top:225px;width:406px;height:288px'><img
width=406 height=288 src="akcjaletnia_files/image004.gif" v:shapes="_x0000_s1027"></span><![endif]>

All browsers, except IE see the green part as a comment and will render only the black part. In IE, it is reversed. There is no reason to do this here, the entire section could be just:

<table cellspacing="0" cellpadding="0" width="100%" height="100%">
  <tr>
    <td align="center">
    <a href="akcjaletpicshidef/1.JPG" rel="lightbox" title="Akcja Letnia">
    <img src="akcjaletpics/1.JPG" border="0" width="400" height="268"></a></td>
  </tr>
</table>

[Toshk]

Thanks



by the way: how did u get the whole html code of my website?

[Toshk]

heh. just figuered out that one aswell

"page" then "view source"

[jscheuer1]

Almost all browsers have a 'view source'. Most have it available from the view menu, and on a context menu on right click of the page. Some have it available in other places as well.

For your live page to be rendered, the server must send its source code to the browser.