PDA

View Full Version : Simple lightbox question



Toshk
02-28-2008, 02:41 PM
1) Lightbox image viewer 2.03a

2) http://www.dynamicdrive.com/dynamicindex4/lightbox2/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
02-28-2008, 02:46 PM
<a href="image-1.jpg" rel="lightbox"
title="my caption"><img src="image-1-tbn.jpg" border="0"></a>

Toshk
02-28-2008, 02:59 PM
thanks, that works.

How would i group pictures together?

jscheuer1
02-28-2008, 03:18 PM
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
02-28-2008, 03:40 PM
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
02-28-2008, 03:59 PM
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
02-28-2008, 04:00 PM
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
02-28-2008, 04:10 PM
Thanks



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

Toshk
02-28-2008, 04:14 PM
heh. just figuered out that one aswell

"page" then "view source"

jscheuer1
02-28-2008, 04:17 PM
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.