Vraag over foto album

Status
Niet open voor verdere reacties.
Bedoel je iets als dit?

Dit is de broncode van die pagina zonder de (onzichtbare) teller :

PHP: 
<html>
<head>
<title>Foto's</title>
<script language="javascript">
<!--
// geef alle foto's dezelfde naam, met uitzondering van het laatste karakter : foto0.jpg foto1.jpg.....
// Doe hetzelfde met je thumbnails
var curr_pic = 0;
var pics = 26;
// verander die 26 in het aantal foto's die je hebt
function changeImg(num) {
stopShow();
document.getElementById("the_picture").src = "jouwmap/jouwfoto" + num + ".gif";
// verander die "gif" in de juiste extentie
// "jouwmap" verander je in de naam van de map waar jij je foto's online in zet
// zet je die niet in een map, laat dan "jouwmap/" weg
// "jouwfoto" verander je in de naam die jij je foto's geeft, zonder het nummer erachter "foto"
curr_pic = num;
};
function nextImg() {
if (curr_pic == (pics-1)) {
curr_pic = 0;
} else {
curr_pic += 1;
};
document.getElementById("the_picture").src = "jouwmap/jouwfoto" + curr_pic + ".gif";
// verander ook hier die "gif"
// doe ook hier hetzelfde als voorheen met "jouwmap" en "jouwfoto"
};
function prevImg() {
if (curr_pic == 0) {
curr_pic = pics-1;
} else {
curr_pic -= 1;
};
document.getElementById("the_picture").src = "jouwmap/jouwfoto" + curr_pic + ".gif";
// hier nogmaals hetzefde met "gif", "jouwmap" en "jouwfoto"
};
var the_show = "";
function startShow() {
the_show = setInterval("nextImg();",1000);
// verander hier de "1000" in het aantal seconden dat je tussen de foto's wilt, MAAL DUIZEND
// vb : 2 seconden wordt 2000
};
function stopShow() {
if (the_show != "") {
clearInterval(the_show);
the_show = "";
};
};
-->
</script>
</head>
<body>
<table width="100%" height="90%">
<tr valign="middle"><td align="center" width="25%">
<script language="javascript">
<!--
for (var i = 0; i < pics; i++) {
document.write("<img src='jouwmap/jouwthumbnail" + i + ".gif' onClick='return changeImg(" + i + ");' vspace='1' hspace='1'>");
// ook hier verander je "jouwmap", "jouwthumbnail" en "gif" in het juiste
if (i % 4 == 3) document.write("<br>");
// dit geeft 4 thumbnails op een rij, wil je het anders, vb 5, dan verhoog je de 4 en de 3 met 1
};
-->
</script>
</td><td align="center">
<p><img src="jouwmap/jouwfoto0.gif" id="the_picture" height="38px"></p>
<!-- hierboven verander je ook "jouwmap", "jouwfoto" en "gif" in het juiste -->
<p><a href="javascript:prevImg(); stopShow();">Vorige</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:startShow();">Start</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:stopShow();">Stop</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:nextImg(); stopShow();">Volgende</a></p>
</td></tr>
<tr><td align="center" colspan="2"><a href="http://www.jemimaja.be/" target="blank">Home</a></td></tr>
</table>
</body>
</html>

Greetz : Jer:cool:en.

@jorennn : mooi lettertype van je naam op je website.
 
Laatst bewerkt:
Hier volgt de aangepaste code om het te "spiegelen" :

PHP: 
<html> 
<head> 
<title>Foto's</title> 
<script language="javascript"> 
<!-- 
// geef alle foto's dezelfde naam, met uitzondering van het laatste karakter : foto0.jpg foto1.jpg..... 
// Doe hetzelfde met je thumbnails 
var curr_pic = 0; 
var pics = 26; 
// verander die 26 in het aantal foto's die je hebt 
function changeImg(num) { 
stopShow(); 
document.getElementById("the_picture").src = "jouwmap/jouwfoto" + num + ".gif"; 
// verander die "gif" in de juiste extentie 
// "jouwmap" verander je in de naam van de map waar jij je foto's online in zet 
// zet je die niet in een map, laat dan "jouwmap/" weg 
// "jouwfoto" verander je in de naam die jij je foto's geeft, zonder het nummer erachter "foto" 
curr_pic = num; 
}; 
function nextImg() { 
if (curr_pic == (pics-1)) { 
curr_pic = 0; 
} else { 
curr_pic += 1; 
}; 
document.getElementById("the_picture").src = "jouwmap/jouwfoto" + curr_pic + ".gif"; 
// verander ook hier die "gif" 
// doe ook hier hetzelfde als voorheen met "jouwmap" en "jouwfoto" 
}; 
function prevImg() { 
if (curr_pic == 0) { 
curr_pic = pics-1; 
} else { 
curr_pic -= 1; 
}; 
document.getElementById("the_picture").src = "jouwmap/jouwfoto" + curr_pic + ".gif"; 
// hier nogmaals hetzefde met "gif", "jouwmap" en "jouwfoto" 
}; 
var the_show = ""; 
function startShow() { 
the_show = setInterval("nextImg();",1000); 
// verander hier de "1000" in het aantal seconden dat je tussen de foto's wilt, MAAL DUIZEND 
// vb : 2 seconden wordt 2000 
}; 
function stopShow() { 
if (the_show != "") { 
clearInterval(the_show); 
the_show = ""; 
}; 
}; 
--> 
</script> 
</head> 
<body> 
<table width="100%" height="90%"> 
<tr valign="middle"><td align="center"> 
<p><img src="jouwmap/jouwfoto0.gif" id="the_picture" height="38px"></p> 
<!-- hierboven verander je ook "jouwmap", "jouwfoto" en "gif" in het juiste --> 
<p><a href="javascript:prevImg(); stopShow();">Vorige</a>&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="javascript:startShow();">Start</a>&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="javascript:stopShow();">Stop</a>&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="javascript:nextImg(); stopShow();">Volgende</a></p> 
</td></tr> 
<tr><td align="center" colspan="2"><a href="http://www.jemimaja.be/" target="blank">Home</a></td><td align="center" width="25%"> 
<script language="javascript"> 
<!-- 
for (var i = 0; i < pics; i++) { 
document.write("<img src='jouwmap/jouwthumbnail" + i + ".gif' onClick='return changeImg(" + i + ");' vspace='1' hspace='1'>"); 
// ook hier verander je "jouwmap", "jouwthumbnail" en "gif" in het juiste 
if (i % 4 == 3) document.write("<br>"); 
// dit geeft 4 thumbnails op een rij, wil je het anders, vb 5, dan verhoog je de 4 en de 3 met 1 
}; 
--> 
</script> 
</td></tr> 
</table> 
</body> 
</html>
Een werkend voorbeeld.

Succes.

Greetz : Jer:cool:en.
 
Ik kijk er even naar, maar de helft van je pagina staat in de head van je document.
Ik maak je pagina wel in orde.

Greetz : Jer:cool:en.
 
Hier een voorbeeld van wat ik ervan gemaakt heb.
Als je dat goed vindt, dan staat hier de code van die pagina :

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Portfolio van Morbiddoll van helpmij.nl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:#000000;
scrollbar-arrow-color:#ff0000;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#ff0000;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#ff0000;
scrollbar-darkshadow-color:#000000;
scrollbar-3dlight-color:#000000;
}

#maindiv {
background-image: url(Bg.jpg);
background-position:center;
background-repeat:no-repeat;
border:0px;
background-color:#000000;
width:750px;
height:550px;
color:#ff0000;
text-align:center;
}
</style>
<script language="javascript">  
<!--  
// geef alle foto's dezelfde naam, met uitzondering van het laatste karakter : foto0.jpg foto1.jpg.....  
// Doe hetzelfde met je thumbnails  
var curr_pic = 0;  
var pics = 17;  
// verander die 26 in het aantal foto's die je hebt  
function changeImg(num) {  
stopShow();  
document.getElementById("the_picture").src = "foto" + num + ".jpg";  
// verander die "gif" in de juiste extentie  
// "jouwmap" verander je in de naam van de map waar jij je foto's online in zet  
// zet je die niet in een map, laat dan "jouwmap/" weg  
// "jouwfoto" verander je in de naam die jij je foto's geeft, zonder het nummer erachter "foto"  
curr_pic = num;  
};  
function nextImg() {  
if (curr_pic == (pics-1)) {  
curr_pic = 0;  
} else {  
curr_pic += 1;  
};  
document.getElementById("the_picture").src = "foto" + curr_pic + ".jpg";  
// verander ook hier die "gif"  
// doe ook hier hetzelfde als voorheen met "jouwmap" en "jouwfoto"  
};  
function prevImg() {  
if (curr_pic == 0) {  
curr_pic = pics-1;  
} else {  
curr_pic -= 1;  
};  
document.getElementById("the_picture").src = "foto" + curr_pic + ".jpg";  
// hier nogmaals hetzefde met "gif", "jouwmap" en "jouwfoto"  
};  
var the_show = "";  
function startShow() {  
the_show = setInterval("nextImg();",3000);  
// verander hier de "1000" in het aantal seconden dat je tussen de foto's wilt, MAAL DUIZEND  
// vb : 2 seconden wordt 2000  
};  
function stopShow() {  
if (the_show != "") {  
clearInterval(the_show);  
the_show = "";  
};  
};  
-->  
</script>
</head>
<body>
<center>
<div id="maindiv">
<br><br><br><br><br><br><br><br><br><br><br><br>
<table width="75%">  
<tr valign="middle"><td>  
<p><img src="foto0.jpg" id="the_picture" height="250px"></p>  
<!-- hierboven verander je ook "jouwmap", "jouwfoto" en "gif" in het juiste -->  
<p><a href="javascript:void(0);" onMouseDown="javascript:prevImg(); stopShow();"><font face="century gothic" size="1" color="white">Previous</font></a>&nbsp;&nbsp;&nbsp;&nbsp;  
<a href="javascript:void(0);" onMouseDown="javascript:startShow();"><font face="century gothic" size="1" color="white">Start</font></a>&nbsp;&nbsp;&nbsp;&nbsp;  
<a href="javascript:void(0);" onMouseDown="javascript:stopShow();"><font face="century gothic" size="1" color="white">Stop</font></a>&nbsp;&nbsp;&nbsp;&nbsp;  
<a href="javascript:void(0);" onMouseDown="javascript:nextImg(); stopShow();"><font face="century gothic" size="1" color="white">Next</font></a></p>  
</td><td align="center" colspan="2"></td><td width="25%">  
<script language="javascript">  
<!--  
for (var i = 0; i < pics; i++) {  
document.write("<img src='tn" + i + ".jpg' onClick='return changeImg(" + i + ");' vspace='1' hspace='1'>");  
// ook hier verander je "jouwmap", "jouwthumbnail" en "gif" in het juiste  
if (i % 5 == 4) document.write("<br>");  
// dit geeft 4 thumbnails op een rij, wil je het anders, vb 5, dan verhoog je de 4 en de 3 met 1  
};  
-->  
</script>  
</td></tr>  
</table>
</div>
</center>
</body>
</html>

Greetz : Jer:cool:en.
 
Er stonden nogal wat div's in die eigenlijk overbodig waren. Die heb ik verwijderd. Dat deed al de eerste scrollbar verdwijnen.
De div die je wel nodig hebt en die zelf een scrollbar had, daar stond in "overflow:auto". Dat deed ik ook weg, waardoor die tweede scrollbar ook verdween.

Ik heb nu hetzelfde gedaan met je indexpagina : klik.

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:#000000;
scrollbar-arrow-color:#ff0000;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#ff0000;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#ff0000;
scrollbar-darkshadow-color:#000000;
scrollbar-3dlight-color:#000000;
}

#maindiv {
background-image: url(Bg.jpg);
background-position:center;
background-repeat:no-repeat;
border:0px;
background-color:#000000;
width:750px;
height:550px;
color:#ff0000;
text-align:center;
}
</style>
</head>
<body>
<center>
<div id="maindiv">
<br><br><br><br><br><br><br><br><br><br><br>
<table width="90%">  
<tr valign="middle"><td>
<a href="portfolio.htm"><img src="foto15.jpg" width="220" height="300" border="0" alt="Click to view my portfolio"></a>
</td><td>
<font face="century gothic" size="1" color="#ffffff">I use this website to get my portfolio online. Click my picture to have a look! I'll use this part of my website to introduce myself. My name is Wendy. I live in a country named the Netherlands, a small country in Europe. For a long time I didn't like living here but now I actually like where I am. That still doesn't take away my dream of visiting many other countries though. I'm 16 years old, and I
can't wait to turn 18. I'm single and not looking at the moment. As for most people, my friends mean the world to me. I couldn't live without them and they made me who I am today =] I absolutely love music. My alltime favorite bands are Murderdolls and Cradle of Filth. <br><br>
I do random things all the time. I speak my mind and I'm very opinionated. I can be stubborn and a perfectionist at times. I adore piercings, tattoos, make-up, and anything horror. I'm lazy and I have a very twisted sense of humor =] I'm very loud and happy most of the time but I can be a bitch if you rub me the wrong way.
I like to play guitar, dance, going to concerts and parties, and so many other things.<br><br>
As for my future, I'd love to be either a photographer or webdesigner. I still have a dream of being in a band and touring around the world, but since that's never going to happen I kinda gave up on that. If you'd like to contact me, you can email me at:
<script language="javascript" type="text/javascript">
<!--
var emailname = "wendyreinders";
var emaildomain = "hotmail";
var emailext = "com";
document.write(emailname + "@" + emaildomain + "." + emailext);
-->
</script>
<br><br>- Press escape if you don't want to hear the background music -</font>
</td></tr>  
</table>
</div>
</center>
</body>
</html>

Ik heb me ook de vrijheid genomen je email-ardes te beschermen tegen bots die het net afschuimen op zoek naar email-adressen om dan massa's spam te sturen.

Greetz : Jer:cool:en.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan