15 svar · 477 visningar · startad av Tompa5
Knasig rubrik kanske, men det jag behöver lite hjälp med är:
Jag har ett galleri med bilder (tumnaglar) och när man klickar på en av dom så ska den dyka upp i ett nytt fönster, men om man inte stänger det fönstret utan klickar direkt på nästa bild så ska den ersätta den första bilden i popupfönstret...
Låter det vettigt?
Går det att göra?
tacksam för svar fort...lite brådis.... Tack / Tompa5
Ange samma fönsternamn i window.open, så kommer fönstret återanvändas om det finns kvar.
Inga problem, visa oss koden för hur du öppnar popup´en. :)
Här kommer koden:
<html>
<head>
<title>Galleri Kaos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body onLoad="MM_openBrWindow('ny_sida_1.htm','bild','width=250,height=250')">
<!-- Istället för att det står bild1.jpg så hamnar det en bild där som är länkad -->
bild1.jpg
</body>
</html>
Har för mig att du kan skapa en vanlig länk där du öppnar resultatet i ditt nyskapade fönster. Kräver att fönstret existerar annars öppnas det i ett nytt...
<a href="bild1.jpg" target=bild>Länknamn</a>
<a href="bild2.jpg" target=bild>Länknamn</a>
<a href="bild3.jpg" target=bild>Länknamn</a>
Lite overkill, men jag hittade detta script undangömt på hårddisken.
Kanske du kan leka med. ;)
Del1 - ex. index.htm
[red]<html>
<head>
<title>Galleri Kaos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
/*
Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar.
*/
function showImage(IMG,width,height){
if (parseInt(navigator.appVersion) >= 3){
if (navigator.appName == "Netscape" && parseInt(navigator.appVersion)<5){
var tools = new Packages.java.awt.Toolkit.getDefaultToolkit();
screen=tools.getScreenSize();
}
x = screen.width;
y = screen.height;
}
window.open("bilder.htm?img="+ IMG,"imgpop","top=" + parseInt(y/2-height/2-16) + ",left=" + parseInt(x/2-width/2-5) + ",width=" + width + ",height=" + height).focus();
}
</script>
</head>
<body>
<a href="javascript:void(showImage('bild1.jpg',250,250));"><img src="bild1.jpg"></a><br>
<a href="javascript:void(showImage('bild2.jpg',250,250));"><img src="bild2.jpg"></a><br>
<a href="javascript:void(showImage('bild3.jpg',250,250));"><img src="bild3.jpg"></a><br>
<a href="javascript:void(showImage('bild4.jpg',250,250));"><img src="bild4.jpg"></a>
</body>
</html>[/red]
Del2 - bilder.htm
[red]<html>
<head>
<title>Bilder..</title>
</head>
<body style="margin: 0;">
<script type="text/javascript">
/*
Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar.
*/
function getVar(varname) {
var st = unescape(location.search);
st = st.replace(/\+/g," ");
if (st.indexOf(varname) != -1){
var tempst = st.substring(st.indexOf(varname + "=") + varname.length + 1,st.length);
if (tempst.indexOf("&") != -1) {
var newtemp = tempst.substring(0, tempst.indexOf("&"));
return newtemp;
} else {
return tempst;
}
} else {
return("");
}
}
document.write('<img src=\"'+ getVar("img") +'\">');
</script>
</body>
</html>[/red]
Jag vet inte vad jag gör för fel, men med ovanstående script så öppnas inget nytt fönster, när man klickar på en bild så går man till en tom sida utan bilder och i samma fönster....
:(
Hur ser din kod ut nu, visa. :)
Observera att forumet ändrar javascript till java script Du skall alltså inte ha med mellanslaget i koden.
Ok, min kod ser ut som följer:
Index.htm=
<html>
<head>
\<title\>Galleri Kaos\</title\>
\<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"\>
<script type="text/javascript">
<!--
/*
Detta script finns att hämta på http://www.jojoxx.net och
får användas fritt så länge som dessa rader står kvar.
*/
function resizeWin(){
picWidth = document.all.img1.width;
picHeight = document.all.img1.height;
posLeft = parseInt((screen.width/2)-parseInt(picWidth/2));
posTop = parseInt((screen.height/2)-parseInt(picHeight/2)-50);
window.resizeTo(picWidth+40, picHeight+92);
window.moveTo(posLeft, posTop);
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
</head>
<body>
<a href="java script:void(showImage('bild1.jpg',100,67);"><img src="bild1.jpg"></a><br>
<a href="java script:void(showImage('bild2.jpg',250,250);"><img src="bild2.jpg"></a><br>
<a href="java script:void(showImage('bild3.jpg',250,250);"><img src="bild3.jpg"></a><br>
<a href="java script:void(showImage('bild4.jpg',250,250);"><img src="bild4.jpg"></a><br>
<br>
<a href="bild1.htm" target=bild onClick="MM_callJS('resizewin')">Länknamn</a>
<script language="JavaScript" type="text/JavaScript">
function resizeWin(){
picWidth = document.all.img1.width;
picHeight = document.all.img1.height;
posLeft = parseInt((screen.width/2)-parseInt(picWidth/2));
posTop = parseInt((screen.height/2)-parseInt(picHeight/2)-50);
window.resizeTo(picWidth+40, picHeight+92);
window.moveTo(posLeft, posTop);
}
</script>
<a href="bild2.jpg" target=bild>Länknamn</a> <a href="bild3.jpg" target=bild>Länknamn</a>
</body>
</html>
del2:
bilder.htm=
<html>
<head>
\<title\>Bilder..\</title\>
</head>
<body style="margin: 0;">
\<script type="text/javascript"\>
/\*
Detta script finns att hämta på <http://www.jojoxx.net> och
får användas fritt så länge som dessa rader står kvar.
\*/
function getVar(varname) {
var st = unescape(location.search);
st = st.replace(/\\+/g," ");
if (st.indexOf(varname) != -1){
var tempst = st.substring(st.indexOf(varname + "=") + varname.length + 1,st.length);
if (tempst.indexOf("&") != -1) {
var newtemp = tempst.substring(0, tempst.indexOf("&"));
return newtemp;
} else {
return tempst;
}
} else {
return("");
}
}
document.write('\<img src="'+ getVar("img") +'\\"\>');
\</script\>
</body>
</html>
Du har ju inte direkt lyckats med ditt "klipp & klistrande". Ta o kika lite på Palles kod igen så lär du se rejäla skillnader i din kod o hans kod.
En korrigerad index.htm:
<html>
<head>
<title>Galleri Kaos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<a href="javascript:void(showImage('bild1.jpg',100,67));"><img src="bild1.jpg"></a><br>
<a href="javascript:void(showImage('bild2.jpg',250,250));"><img src="bild2.jpg"></a><br>
<a href="javascript:void(showImage('bild3.jpg',250,250));"><img src="bild3.jpg"></a><br>
<a href="javascript:void(showImage('bild4.jpg',250,250));"><img src="bild4.jpg"></a><br>
<br>
<script type="text/javascript">
/*
Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar.
*/
function showImage(IMG,width,height){
if (parseInt(navigator.appVersion) >= 3){
if (navigator.appName == "Netscape" && parseInt(navigator.appVersion)<5){
var tools = new Packages.java.awt.Toolkit.getDefaultToolkit();
screen=tools.getScreenSize();
}
x = screen.width;
y = screen.height;
}
window.open("bilder.htm?img="+ IMG,"imgpop","top=" + parseInt(y/2-height/2-16) + ",left=" + parseInt(x/2-width/2-5) + ",width=" + width + ",height=" + height).focus();
}
</script>
</body>
</html>
OBSERVERA "java script" skall vara "javascript"
Ok nu funkar det =)
tack så jättemycket alla som lagt ner tid & energi i den här frågan.
Nu till nästa grej. Hur göra för att få fönstret att anpassa sig till nästa bilds storlek?
En variant, detta är koden för bilder.htm (popup-fönstret):
Notera att fönstret först ändrar sig efter 2 sek då bilden måste läsas innan fönstret ändras..
[red]<html>
<head>
<title>Bilder..</title>
</head>
<body style="margin: 0;">
<script type="text/javascript">
/*
Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar.
*/
function getVar(varname) {
var st = unescape(location.search);
st = st.replace(/\+/g," ");
if (st.indexOf(varname) != -1){
var tempst = st.substring(st.indexOf(varname + "=") + varname.length + 1,st.length);
if (tempst.indexOf("&") != -1) {
var newtemp = tempst.substring(0, tempst.indexOf("&"));
return newtemp;
} else {
return tempst;
}
} else {
return("");
}
}
document.write('<img src=\"'+ getVar("img") +'\" name=\"img\">');
setTimeout("resizeTo(document.img.width,document.img.height)", 2000);
</script>
</body>
</html>[/red]
Nu funkar allt som det ska och så som jag önskade! :)
Tack alla Ni som hjälpt till.