Archief - string met quote parsen met javascript

ArmandRicard · 5 mei 2009

Hey,

Als ik op een thumb klik wil ik dat de grote image in een nieuw venster wordt geopend. Dit popupvenster past zich automatisch aan aan de size van de image. Ik doe dit door de volgende functie in mijn verwijspagina:

function PopupPic(sPicURL,sPicTitle) {
window.open( "popup.html?"+sPicURL+"?"+sPicTitle,"","resizable=1,HEIGHT=200,WIDTH=200");

Ik geef dus de image en een title mee voor de image, zodat wanneer de gebruiker over de grote image hoovert, de title verschijnt.

ik roep de functie aan met:
window.location="javascript

opupPic('watcher.jpg','Durin's Bane')"

Het is met die Durin's Bane dat het foutloopt. Die quote wil maar niet parsen.
window.location="javascript

opupPic('watcher.jpg','Durin\'s Bane')" met escape character voor de quote werkt ook niet..

in de popuppagina is dit de code:
<html>
<head>
<title>:+: Crusade Alliance :+:</title>
<script language='javascript'>
var arrTemp=self.location.href.split("?");
var picUrl = (arrTemp[1].length>0)?arrTemp[1]:"";
var picTitle= (arrTemp[2].length>0)?arrTemp[2]:"";
var NS = (navigator.appName=="Netscape")?true:false;

function FitPic() {
iWidth = (NS)?window.innerWidth:document.body.clientWidth;
iHeight = (NS)?window.innerHeight:document.body.clientHeight;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);
self.focus();
};
</script>
</head>
<body bgcolor="#000000" onload='FitPic();' topmargin="0"
marginheight="0" leftmargin="0" marginwidth="0">
<script language='javascript'>
picTitle=picTitle.replace(/%20/g,' ')
document.write( "<img src='" + picUrl + "' title='" + picTitle + "' border=0>" );
</script>
</body>
</html>

Help mij aub voor ik mijn laptop door het raam gooi met mij erachter

Groeten,
Marius

Albireo · 5 mei 2009

Ik snap deze constructie niet:
window.location="javascript

opupPic('watcher.jpg' ,'Durin's Bane')"
Gaat dat niet gigantisch crashen???

anyway: de escape en unescape-functies zijn je vrienden!

Code:

function PopupPic(sPicURL,sPicTitle) {
			window.open( "popup.html?"+sPicURL+"?"+escape(sPicTitle),"","resizable= 1,HEIGHT=200,WIDTH=200");
		}

en in je popup.html:

Code:

document.write( '<img src="' + picUrl + '" title="' + unescape(picTitle) + '" border="0">' );

ArmandRicard · 6 mei 2009

Thx voor de hulp, maar t'werkt niet. Ik roep de functie nu wel wat korter aan namelijk gewoon:
PopupPic('balrog.jpg', 'Durin's Bane')

men functie staat zo in men head:
function PopupPic(sPicURL,sPicTitle) {
window.open( "popup.html?"+sPicURL+"?"+escape(sPicTitle),"","resizable=1,HEIGHT=200,WIDTH=200");
}

en in de popup:
document.write( "<img src='" + picUrl + "' title='" + unescape(picTitle) + "' border=0>" );

Dit alles geeft gewoon een fout idd

Als ik PopupPic('balrog.jpg', "Durin's Bane") doe, met dubbelquotes rondom dan raak ik iets verder. Dan is de tooltip Durin. De 's Bane valt gewoon weg..

Het lijkt wel of die escape en unescape gewoon niet werken voor mij..

Groeten

Albireo · 6 mei 2009

oops, vergeten te zeggen, de ' moet escaped worden met \

PopupPic('balrog.jpg', 'Durin\'s Bane')

ArmandRicard · 6 mei 2009

dan komt er toch alleen maar Durin te zien hoor..

Albireo · 6 mei 2009

de volledige code die bij mij werkt (ik heb een paar dingen extra veranderd maar dat heeft niets te maken met het probleem dat je hebt)
in het html-bestand dat de popup oproept:

Code:

	<script type="text/javascript">
		function PopupPic(sPicURL,sPicTitle) {
			window.open( "popup.html?"+sPicURL+"&"+escape(sPicTitle),"","resizable= 1,HEIGHT=200,WIDTH=200");
		}
	</script>

Code:

<a href="#" onclick="PopupPic('webcamwebcam.jpg' ,'Durin\'s Bane')">webcam</a>

en in popup.html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>:+: Crusade Alliance :+:</title>
	<script type="text/javascript">
		var arrTemp=self.location.href.split("?");
		var query=arrTemp[1].split("&");
		var picUrl = (query[0].length>0)?query[0]:"";
		var picTitle= (query[1].length>0)?query[1]:"";
		var NS = (navigator.appName=="Netscape")?true:false;

		function FitPic() {
		iWidth = (NS)?window.innerWidth:document.body.clientWidth;
		iHeight = (NS)?window.innerHeight:document.body.clientHeight ;
		iWidth = document.images[0].width - iWidth;
		iHeight = document.images[0].height - iHeight;
		window.resizeBy(iWidth, iHeight);
		self.focus();
		};

	</script>
	<style type="text/css">
		body {
			padding: 0px;
			margin: 0px;
		}
	</style>
</head>
<body onload="FitPic();">
	<script type="text/javascript">
		picTitle=picTitle.replace(/%20/g,' ')
		document.write( '<img src="' + picUrl + '" title="' + unescape(picTitle) + '" border="0">' );
	</script>
</body>
</html>

PS. ken je Lightbox 2 al?

ArmandRicard · 6 mei 2009

Hey, thx, de code werkt.

Lightbox 2 kende ik al maar ik geraak er niet uit omdat in mijn oplossing te implementeren. Die popup wordt namelijk geopend door een image viewer.
En om de 5 seconden gaat die een image veranderen in een href die de popupfunctie aanroept.

Heb jij soms een voorbeeld van een code die om de vijf seconden een thumb veranderd en waarmee je dan die lightbox2 kan aanroepen?

De code die ik heb is er niet echt op voorzien om telkens een nieuwe url te schrijven..hierbij de code, zo zie je dat die url statisch is en de image ertussen verandert..

<a href="javascript

lidelink()">
<img src="champion.png" name="slide" border="0" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",5000)
}
slideit()
function slidelink(){
if (whichimage==1)
PopupPic('balrog.jpg' ,'Durin\'s Bane')
else if (whichimage==2)
window.location="javascript

opupPic('breecrowded.jpg','Crowded Bree, hard times for the server')"
else if (whichimage==3)
window.location="javascript

opupPic('kinhouse.jpg','Crusade Alliance Kinhouse')"
else if (whichimage==4)
window.location="javascript

opupPic('outsidemoria.jpg','The watcher outside Moria')"
else if (whichimage==5)
window.location="javascript

opupPic('watcher.jpg','The watcher')"
}
//-->
</script>

Groeten,
Marius

ArmandRicard · 6 mei 2009

op :+: Crusade Alliance :+: zie je links wat ik bedoel

Groeten,
Marius

Albireo · 6 mei 2009

here you go :hug:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<script type="text/javascript" src="lightbox/prototype.js"></script>
	<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects,builder"></script>
	<script type="text/javascript" src="lightbox/lightbox.js"></script>
	<link rel="stylesheet" type="text/css" href="lightbox/lightbox.css" media="screen" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>:+: Crusade Alliance :+:</title>
	<script type="text/javascript">
		var thumbimages=new Array();
		for(i=0;i<5;i++) {
			thumbimages[i]=new Image();
		}
		thumbimages[0].src="balrog_thumb.jpg";
		thumbimages[1].src="breecrowded_thumb.jpg";
		thumbimages[2].src="kinhouse_thumb.jpg";
		thumbimages[3].src="outsidemoria_thumb.jpg";
		thumbimages[4].src="watcher_thumb.jpg";
		var images=new Array();
		images[0]="balrog.jpg";
		images[1]="breecrowded.jpg";
		images[2]="kinhouse.jpg";
		images[3]="outsidemoria.jpg";
		images[4]="watcher.jpg";

	</script>
	<style type="text/css">
		#slide {
			border: none;
		}
	</style>
</head>
<body>
	<p><a href="balrog.jpg" rel="lightbox" id="imagebox"><img src="balrog_thumb.jpg" id="slide" alt="slide"></a>
	<script type="text/javascript">
		var step=0;
		function slideit(){
			document.getElementById("slide").src=thumbimages[step].src;
			document.getElementById("imagebox").href=images[step];
			step++;
			if (step>=5) {
				step=0;
			}
			setTimeout("slideit()",5000);
		}
		slideit();
	</script>
	</p>
</body>
</html>

ArmandRicard · 6 mei 2009

waauw,

sjiek en een veel duidelijkere code!
ik heb nog een regel toegevoegd:
document.getElementById("imagebox").title=titles[step];
om de beschrijvingen ook mee te geven.

En dan heb ik bovenaan gewoon een arrayke titles aangemaakt.

Thx man! Mucho Respect!

ArmandRicard · 7 mei 2009

Ik heb de lightbox via de css wat kunnen modifieren. Nogmaals merci.
K'zen content

Archief - string met quote parsen met javascript

ArmandRicard

Legacy Member

Albireo

Legacy Member

ArmandRicard

Legacy Member

Albireo

Legacy Member

ArmandRicard

Legacy Member

Albireo

Legacy Member

ArmandRicard

Legacy Member

ArmandRicard

Legacy Member

Albireo

Legacy Member

ArmandRicard

Legacy Member

ArmandRicard

Legacy Member