nicht angemeldet
Hallo micha1000,
ich hoffe das du das noch liest, würde mich freuen wenn du mir das erklärst!
Ok, dann wollen wir mal.
1. Datei "wz_dragdrop.zip" runterladen (Walter Zorns Drag & Drop Bibliothek), die enthaltene Datei "wz_dragdrop.js" auspacken und in deinem javascript-Verzeichnis speichern.
2. Datei "wz_dragdrop.js" editieren und unten ab Zeile 1413 die bereits vorbereitete Funktion my_DragFunc() wie folgt notieren:
function my_DragFunc()
{
// HTML-Element img mit name="handle" ist der Griff zum Bewegen:
if (dd.obj.name == 'handle') {
var hPos = parseInt((dd.elements.handle.x - dd.elements.handle.defx)); // Horizontale Position
// HTML-Elemet div mit id="sliding_content" ist der bewegte Inhalt:
dd.elements.sliding_content.moveTo(
dd.elements.sliding_content.defx-(hPos*delta), dd.elements.sliding_content.y
);
}
}
3. Deine Startseite "index.htm" editieren und wie folgt ändern:
– alle eingebundenen Javascripts (Zeilen 7–13) entfernen
– Das ganze <body>-Element durch folgendes ersetzen:
<body>
<script type="text/javascript" src="javascript/wz_dragdrop.js"></script>
<div id="header"><!-- Header START -->
<div id="logo">
<h1><a href="/" title="boogaloo | Foto"><span>boogaloo | Fotoe</span></a></h1>
</div>
</div><!-- Header ENDE -->
<div id="content" style="position:relative;"><!-- Content START -->
<div id="sliding_content" style="position:relative;">
<table style="table-layout:fixed; margin-left:auto; margin-right:auto;">
<tr>
<td style="width:328px; vertical-align: top; padding: 0 13px 0 0;"><img src="upload/galerie_gross/1185924961755.jpg" width="328" height="400" alt="" /></td>
<td style="width:328px; vertical-align: top; padding: 0 13px 0 0;"><img src="upload/galerie_gross/1185924968844.jpg" width="328" height="400" alt="" /></td>
<td style="width:328px; vertical-align: top; padding: 0 13px 0 0;"><img src="upload/galerie_gross/1185924978511.jpg" width="328" height="400" alt="" /></td>
<td style="width:328px; vertical-align: top; padding: 0 13px 0 0;"><img src="upload/galerie_gross/118592498627.jpg" width="328" height="400" alt="" /></td>
<td style="width:328px; vertical-align: top; padding: 0 13px 0 0;"><img src="upload/galerie_gross/1185924995991.jpg" width="328" height="400" alt="" /></td>
<td style="width:328px; vertical-align: top;"><img src="../upload/galerie_gross/1185925005677.jpg" width="328" height="400" alt="" /></td>
</tr>
</table>
</div>
<p class="bildunterschrift">Breakdance Boogaloo</p>
</div><!-- Content ENDE -->
<img name="track" src = images/regler_back.gif width="370" height="16">
<img name="handle" src = images/regler.gif width="16" height="16">
<script type="text/javascript">
// <![CDATA[
SET_DHTML(
CURSOR_MOVE, "content"+NO_DRAG, "sliding_content"+NO_DRAG, "track"+NO_DRAG,
"handle"+HORIZONTAL+MAXOFFLEFT+0+MAXOFFRIGHT+370
);
dd.elements.handle.setZ(dd.elements.track.z+1);
dd.elements.track.addChild('handle');
dd.elements.handle.defx = dd.elements.track.x - dd.elements.handle.w/2;
dd.elements.sliding_content.defx = dd.elements.sliding_content.x;
var delta = (dd.elements.sliding_content.w - dd.elements.content.w) / dd.elements.track.w;
dd.elements.handle.moveTo(dd.elements.handle.defx, dd.elements.track.y);
// ]]>
</script>
</body>
4. Datei "galerie.css" editieren und in der letzen Zeile ein "}" anhängen:
~~~css
.highslide-move span {
display: none;
} /* <-- dieses Zeichen ergänzen */
Das war's schon. Der Slider sollte jetzt wie gewünscht funktionieren (bei mir tut er's). Man kann auch mehr Bilder nebeneinander stellen ohne dass die Funktion beeintächtigt wird.
Die CSS-Dateien solltest du aber überarbeiten. Sie sind speziell für die Seiten gemacht, von denen du das Zeug geklaut hast. Wahrscheinlich brauchst du nur einen Bruchteil davon. Z.B. wird das `<div id="logo">`{:.language-html} gar nicht angezeigt. Das liegt wohl am CSS.
Noch ein Hinweis: Wenn "wz\_dragdrop.js" in einem Unterverzeichnis liegt, dann funktioniert's nicht lokal direkt von der Festplatte, sondern nur über einen Web-Server.
Viel Spass,
Don P