Archief - HTML: Lightbox

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
F

FreakyLeash

Legacy Member
Ik weet nu niet of het JS of HTML of xHTML
Maar anyway,

Ik snap er dus geen knijt van hé ,
IK heb dat dus gegoogled hoe je zo'n lightbox moet maken,
Ik heb die bestandjes gedownload,
Ik wil dus een afbeelding met lightbox,
Afbeelding klein > klik afbeelding > open afbeelding groot in zo'n lightbox,

Heb met van alles zitten knoeien maar het wil maar niet lukken ik krijg dit :

http://users.skynet.be/fb022166/gallery.html

Image en dan klik je erop en krijg je zo van die domme dingens en dan opent die het ... die wallpaper is maar een testje hé hoort niet bij de site ...

Kan iemand mij helpen a.u.b. ?
d

demon326

Legacy Member
FreakyLeash zei:
Ik weet nu niet of het JS of HTML of xHTML
Maar anyway,

Ik snap er dus geen knijt van hé ,
IK heb dat dus gegoogled hoe je zo'n lightbox moet maken,
Ik heb die bestandjes gedownload,
Ik wil dus een afbeelding met lightbox,
Afbeelding klein > klik afbeelding > open afbeelding groot in zo'n lightbox,

Heb met van alles zitten knoeien maar het wil maar niet lukken ik krijg dit :

http://users.skynet.be/fb022166/Gallery.html

Image en dan klik je erop en krijg je zo van die domme dingens en dan opent die het ... die wallpaper is maar een testje hé hoort niet bij de site ...

Kan iemand mij helpen a.u.b. ?
Klik om te vergroten...

include ook eens de bijgeleverde css file van lightbox, en gebruik deze code eens:
HTML: 
<div class="thumbnail">
		<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" alt="" height="40" width="100"></a>

de eerste afbeelding is de groote, de tweede is de thumbnail;)
g

gryffoer

Legacy Member
Moeten daar volgende regels niet bij?

Code: 
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Of dergelijks?

Zie eens op deze site (eerste hit bij google)
Staat zo goed als alles op dat je nodig hebt...
F

FreakyLeash

Legacy Member
Ok het werkt,
Heb nu alleen voor de 1 of andere reden een witte lijn vanboven op mijn site staan ?
g

gryffoer

Legacy Member
je hebt nog tussen je body tag en je tekst een open <p> staan, doe die maar eens weg en tzal in orde zijn...
F

FreakyLeash

Legacy Member
gryffoer zei:
je hebt nog tussen je body tag en je tekst een open <p> staan, doe die maar eens weg en tzal in orde zijn...
Klik om te vergroten...

Heb gedaan maar witte lijn blijft er staan ...
g

gryffoer

Legacy Member
waarom heb je
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

in je body staan (vanonder?) Dat moet in de head staan.

Ik zou u ook aanraden wat css te gebruiken. Uw code is redelijk onoverzichtelijk :s


Ik denk ook dat er wat boven je <head> nog wat moet staan.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
dergelijk iets veronderstel ik.



Misschien eens je pagina opnieuw maken?


Nog een tip mss, als je meerde fotos wilt zien met die lightbox dan moet je
Code: 
rel="lightbox[roadtrip]"
gebruiken...
X

Xavez

Legacy Member
Oei, wat een rampzalige code :). Misschien eerst wat moeite doen om eens wat op te zoeken over hoe je een website moet maken ofzo :/.

En om uw probleem op te lossen btw gewoon die </p> weg doen bovenaan. Neemt niet weg dat code+website een serieuze mess zijn :).
F

FreakyLeash

Legacy Member
Aaah opgelost,
Maarja ik ben nog aan het leren hé,

Waarom is het een mess?
Iemand zei dat ik met slices moest werken dus dat is wat ik deed ...
F

FreakyLeash

Legacy Member
Ik heb nog 1 probleempje,
Als ik nu op een afbeelding klik dan opent hij wel mooi enz,
maar als ik het de eerste keer doe slide die afbeelding open maar dan zie ik een raare grijze bar benede even flikkeren is dat normaal :S
g

gryffoer

Legacy Member
idd, en je hebt ook een div aangemaakt <div class="thumbnail">, maar die heb je nergens gesloten.

Ook heb je nergens een css aangemaakt (zie ik toch geen link naar) en staat ook nergens in je header.


Ik heb je code wat bewerkt, mss ben je daar wat meer mee?
(pas op kan fouten in gemaakt zijn, ik ben ook niet "niemand" :lol:)

Als het niet goed is, misschien toch die div er terug in plaatsen?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
 for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
 else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
 if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
 for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
 f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
 for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
 return null;
}

function FP_swapImgRestore() {//v1.0
 var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
  var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } } 
  doc.$imgSwaps=null; }
}
// -->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" onload="FP_preloadImgs(/*url*/'Buttons/home.jpg', /*url*/'Buttons/gallery.jpg', /*url*/'Buttons/contact.jpg')">

		<a href="test2.jpg" rel="lightbox"><img src="test.jpg" alt="" height="199" width="212" style="position: absolute; left: 390; top: 659"><img src="test.jpg" alt="" height="199" width="212" style="position: absolute; left: 719; top: 663"><img src="test.jpg" alt="" height="199" width="212" style="position: absolute; left: 389; top: 374"><img src="test.jpg" alt="" height="199" width="212" style="position: absolute; left: 716; top: 377"></a>
<!-- ImageReady Slices (background_1240-1280.psd) -->
<table id="Table_01" width="1280" height="1025" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="19">
			<img src="images/Index_01.jpg" width="1280" height="45" alt=""></td>
	</tr>
	<tr>
		<td rowspan="9">
			<img src="images/Index_02.jpg" width="89" height="946" alt=""></td>

		<td colspan="17">
			<img src="images/background_1240-1280_03.jpg" width="1105" height="146" alt=""></td>
		<td rowspan="9">
			<img src="images/Index_04.jpg" width="86" height="946" alt=""></td>
	</tr>
	<tr>
		<td colspan="17">
			<img src="images/Index_05.jpg" width="1105" height="16" alt=""></td>
	</tr>

	<tr>
		<td colspan="5">
			<img src="images/Index_06.jpg" width="311" height="2" alt=""></td>
		<td rowspan="3">
			<a href="Index.html"><img src="images/background_1240-1280_07.jpg" width="113" height="41" border="0" alt="" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'Buttons/home.jpg')"></a></td>
		<td>
			<img src="images/Index_08.jpg" width="29" height="2" alt=""></td>
		<td rowspan="3">

		<a href="gallery.html">
			<img src="images/background_1240-1280_09.jpg" width="113" height="41" border="0" alt="" id="img2" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2',/*url*/'Buttons/gallery.jpg')"></a></td>
		<td>
			<img src="images/Index_10.jpg" width="29" height="2" alt=""></td>
		<td rowspan="3">
			<img src="images/Index_11.jpg" width="113" height="41" alt=""></td>
		<td>
			<img src="images/Index_12.jpg" width="28" height="2" alt=""></td>
		<td rowspan="3">

			<a href="Contact.html"><img src="images/background_1240-1280_13.jpg" width="113" height="41" border="0" alt="" id="img3" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img3',/*url*/'Buttons/contact.jpg')"></a></td>
		<td colspan="5">
			<img src="images/Index_14.jpg" width="256" height="2" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="images/Index_15.jpg" width="55" height="782" alt=""></td>
		<td colspan="4">

			<img src="images/Index_16.jpg" width="256" height="1" alt=""></td>
		<td>
			<img src="images/Index_17.jpg" width="29" height="1" alt=""></td>
		<td>
			<img src="images/Index_18.jpg" width="29" height="1" alt=""></td>
		<td>
			<img src="images/Index_19.jpg" width="28" height="1" alt=""></td>
		<td colspan="3">
			<img src="images/Index_20.jpg" width="199" height="1" alt=""></td>

		<td colspan="2">
			<img src="images/Index_21.jpg" width="57" height="1" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/Index_22.jpg" width="2" height="38" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="images/background_1240-1280_07-24.jpg" width="254" height="39" alt=""></td>
		<td rowspan="2">

			<img src="images/background_1240-1280_07-25.jpg" width="29" height="39" alt=""></td>
		<td rowspan="2">
			<img src="images/background_1240-1280_07-26.jpg" width="29" height="39" alt=""></td>
		<td rowspan="2">
			<img src="images/background_1240-1280_07-27.jpg" width="28" height="39" alt=""></td>
		<td colspan="4" rowspan="2">
			<img src="images/background_1240-1280_07-28.jpg" width="201" height="39" alt=""></td>
		<td rowspan="5">
			<img src="images/Index_28.jpg" width="55" height="781" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/Index_29.jpg" width="2" height="41" alt=""></td>
		<td>
			<img src="images/background_1240-1280_07-31.jpg" width="113" height="1" alt=""></td>
		<td>
			<img src="images/background_1240-1280_07-32.jpg" width="113" height="1" alt=""></td>
		<td>

			<img src="images/background_1240-1280_07-33.jpg" width="113" height="1" alt=""></td>
		<td>
			<img src="images/background_1240-1280_07-34.jpg" width="113" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="13">
			<img src="images/Index_34.jpg" width="991" height="40" alt=""></td>
		<td rowspan="3">
			<img src="images/Index_35.jpg" width="2" height="742" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/Index_36.jpg" width="129" height="702" alt=""></td>
		<td colspan="10">
			<img src="images/background_1240-1280_11.jpg" width="760" height="658" alt=""></td>
		<td>
			<img src="images/Index_38.jpg" width="4" height="658" alt=""></td>
		<td rowspan="2">
			<img src="images/Index_39.jpg" width="100" height="702" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/Index_40.jpg" width="4" height="44" alt=""></td>
		<td colspan="10">
			<img src="images/Index_41.jpg" width="760" height="44" alt=""></td>
	</tr>
	<tr>
		<td colspan="19">
			<a href="under_banner" target="under_banner"><img src="images/background_1240-1280_14.jpg" width="1280" height="33" border="0" alt=""></a></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="89" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="55" height="1" alt=""></td>

		<td>
			<img src="images/spacer.gif" width="2" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="127" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="123" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="113" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="29" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="113" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="29" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="113" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="28" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="113" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="95" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="100" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="2" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="55" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="86" height="1" alt=""></td>
	</tr>
</table>


</body>

</html>
F

FreakyLeash

Legacy Member
F

FreakyLeash

Legacy Member
gryffoer zei:
dat heb ik bij mijn site niet hoor, dat ie dat doet, zal toch ergens iets aan je code liggen?
Klik om te vergroten...
Met jouw code is het perfect opgelost buiten het feit dat hij nu altijd in de hoek komt te staan ...
g

gryffoer

Legacy Member
wat komt er in de hoek te staan? heel je site, of die afbeelding?

Indien afbeelding, die staat vlak achter je body tag, dus die heb je daar "gezet" :p
F

FreakyLeash

Legacy Member
Die afbeelding,
Maar ik kan die niet verplaatsen,
Als ik kijk frontpage ontwerpen staan de afbeeldingen goed,
kijk op op voorbeeld, staat de afbeelding in de hoek,
Hoe verplaats ik ze weer?
g

gryffoer

Legacy Member
Als ge eens tegoei naar uw code kijkt, zul je zien waarom.

Uw code:

Code: 
<a href="test2.jpg" rel="lightbox"><img src="test.jpg" alt="" height="199" width="212" style="position: absolute; left: 885; top: 842"></a>

Probeer dit eens:

Code: 
<a href="test2.jpg" rel="lightbox"><img src="test.jpg" alt="" height="199" width="212"></a>

Nu kunde uw afbeelding verder verplaatsen.

als je geen ervaring hebt kan je beter van die positioning afblijven, is niet zo simpel.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan