SIMPLE SHRIMP hat geschrieben:. Ein
ALBUM kann auch anders aussehen, es gibt viele Programme, mit denen es möglich ist Alben zu erstellen. Du brauchst dazu keinen neuen 'Fremdserver' (Cloud), Du kannst die Dateien in einem Ordner auf Deiner Website installieren.
Den Begleittext entweder zu den Thumbnails oder als Unterzeile in das Bild integrieren.
Gruß
Klaus
Mit 'Alben' für die Vereinsseite hatte ich mich 2000 beschäftigt, und bin dann bei JS (fkds.js) geblieben, weil einfacher.
Mal ein Beispiel ohne Hintergrund und Rand bzw. Schatten bei den Bildern. Das Bild ist verkleinert (seitenverhältnis beachten), ich denke aber, dass jeder Browser 'Bild anzeigen' anbietet, wo es dann bei voller Größe betrachtet werden kann.
Gruß
Thomas
Geht nicht anders. Die html und fkds.js und But0.png, Alles plus 3 Bilder (hier S_01.jpg, S_02.jpg, S_03.jpg) in einen Ordner/Verzeichnis.
Code: Alles auswählen
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de" lang="de">
<head>
<title>Unbenannt</title>
<meta name="generator" content="Scribe! 2 [http://scribe.de]" />
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">
.p {font-family:Helvetica, Verdana, Arial, sans-serif; font-size:24px; font-weight:bold; color:#008000; margin-top:3pc;} .zeile1 {background-color:#F8FDF5;
padding:10px 10px 10px 10px; border-style:; border-color:; border-width:;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:12px;
color:black;} .i {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;
font-weight:bold; color:#008000;} td {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;font-weight:normal; color: #000000;}
th {font-family:Verdana;
font-size:16px;font-weight:bold;color:White;background-color:#6f95c7;
padding:2pt;}
.kopf { background-image:url(../images/bb01.png); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-weight:bold; color:white; text-align:center; letter-spacing:3px; padding:1px; border:0px;}
a.menu2 {font-family:Verdana;
font-weight:normal;
font-size:12px;
color: Black;
text-align:center;
margin-top: 1px;
border-style:none;
}
a.menu2:link {color:Black;text-decoration: none;}
a.menu2:visited {color:Black;text-decoration: none;}
a.menu2:hover {color:red;}
a.menu2:active {color:Black;}
</style>
<script language="JavaScript" type="text/javascript" src="fkds.js"></script>
</head>
<body style="margin: 2px;">
<table style="border: 1px solid rgb(111, 149, 199); padding: 1px 1px;" align="center" width="96%">
<tbody><tr><th >Kurztrip</th></tr>
<tr><td align="center">
<table width="400" align="center">
<tr>
<td width="25%" align="center" background="But0.png" cellspacing="2" cellpadding="2" class="zeile2">
<a class="menu2" href="javascript:diashow.start(3500)">Show start</a></td>
<td width="25%" align="center" background="But0.png" cellspacing="2" cellpadding="2" class="zeile2">
<a class="menu2" href="javascript:diashow.stop()">Show stop</a></td>
<td width="25%" align="center" background="But0.png" cellspacing="2" cellpadding="2" class="zeile2">
<a class="menu2" href="javascript:diashow.next()">Bild vor</a></td>
<td width="25%" align="center" background="But0.png" cellspacing="2" cellpadding="2" class="zeile2">
<a class="menu2" href="javascript:diashow.prev()">Bild zurück</a></td>
</tr>
</table><br />
<script language="JavaScript">
<!--
{ desc0 = "Zeit für einen Trip nach Norden, also kurzentschlossen mal wieder an die schwedische Westküste. Nicht ganz optimale Bedingungen, aber das konnte ja noch werden. Während ich mit der Spinnrute unterwegs war, versuchte Jochen sich mit Fliegenrute am Per Karls hall......";
desc1 = "Ich versuch es am R-Verket.....aber nix!";
desc2 = "beim Skivan gab es einen zaghaften Anfasser und es hing ein kleiner Hecht am Haken. Nix mit Lax.";
}
-->
</script>
<img src="S_01.jpg" align="center" width="750" height="500" alt="große Bilder" id="fkdsImg">
<script type="text/javascript">var diashow = new fkds('diashow', 'fkdsImg', 3);</script>
<form name="descform" >
<textarea name="descbox" rows="4" cols="102" wrap="virtual" style="font-family:Verdana, Arial; font-size:14px; text-align:justify; background-color:White; padding:1px; color:#0000A0; border:solid 0px" onfocus="this.blur()"></textarea></form>
</td></tr>
<tr><td>
<script type="text/javascript">javascript:diashow.display()</script>
</tbody></table>
</body></html>
Code: Alles auswählen
//Datei fkds.js - Fred Kasulzke Diashow
//von Rolf Nakielski - www.nakielski.de - 01.05.2006
//frei zur Nutzung durch selfhtml-Nutzer - keine Gewährleistung
function fkds_start(inter){
this.stop();
var call = this.name + ".showNext()";
this.showNext();
this.aktiv = window.setInterval(call, inter);
}
function fkds_stop(){
window.clearInterval(this.aktiv);
}
function fkds_prev(){
this.stop();
this.showPrev();
}
function fkds_next(){
this.stop();
this.showNext();
}
function fkds_showThumb(img){
this.stop();
this.dsPos = fkdnGetNumber(img.src) - this.numFirst;
this.display();
}
function fkds_showPrev(){
this.dsPos--;
if (this.dsPos < 0){
this.dsPos = this.anzshow - 1;
}
this.display();
}
function fkds_showNext(){
this.dsPos++;
if (this.dsPos >= this.anzshow){
this.dsPos = 0;
}
this.display();
}
function fkds_display(){
var neuNum = String(this.numFirst + this.dsPos + 1000).substring(2, 4);
document.getElementById(this.id).src
= fkdnMake(fkdnGetPrefix(this.picFirst), neuNum, fkdnGetSuffix(this.picFirst));
// Changes the description box
eval('document.descform.descbox.value = "' + eval('desc' + this.dsPos) + '"');
}
function fkds(name, id, anzshow){
this.name = name;
this.id = id;
this.anzshow = anzshow;
this.picFirst = document.getElementById(id).src;
this.numFirst = parseInt(fkdnGetNumber(this.picFirst), 10);
this.dsPos = 0;
this.aktiv;
this.start = fkds_start;
this.stop = fkds_stop;
this.next = fkds_next;
this.showNext = fkds_showNext;
this.prev = fkds_prev;
this.showPrev = fkds_showPrev;
this.display = fkds_display;
this.showThumb = fkds_showThumb;
}
function fkdnGetPrefix(dn){
return dn.substring(0, dn.length - 6);
}
function fkdnGetNumber(dn){
return dn.substring(dn.length - 6, dn.length - 4);
}
function fkdnGetSuffix(dn){
return dn.substring(dn.length - 4, dn.length);
}
function fkdnMake(prefix, number, suffix){
return prefix.concat(number).concat(suffix);
}
function fkdsMakeThumbs(id, inZeile, anz){
var muster = document.getElementById(id);
var parent = muster.parentNode;
var opa = parent.parentNode;
var musterImg = muster.getElementsByTagName("img")[0];
var musterPic = musterImg.src;
var musterPicNum = parseInt(fkdnGetNumber(musterPic), 10);
var anzInZeile = 1;
for (var i = 1; i < anz; i++){
if (anzInZeile >= inZeile){
var neueZeile = document.createElement("TR");
opa.appendChild(neueZeile);
parent = neueZeile;
anzInZeile = 0;
}
anzInZeile++;
var neu = muster.cloneNode(true);
var neuNum = String(musterPicNum + 1000 + i).substring(2, 4);
neu.getElementsByTagName("img")[0].src =
fkdnMake(fkdnGetPrefix(musterPic), neuNum, fkdnGetSuffix(musterPic));
parent.appendChild(neu);
}
}