- #1
N
noah1
Bekanntes Mitglied
Themenersteller
- Dabei seit
- 16.08.2002
- Beiträge
- 1.415
- Reaktionspunkte
- 0
- Ort
- Hamburg
Mittlerweile glaube ich PHP einigermaßen zu verstehen, zumindest gelingt mir da immer mehr, teilweise auch mit Eurer Hilfe...
Aber bei Java-Script blick ich nun überhaupt nicht durch, deshalb meine Frage:
Ich habe eine Bildergalerie programmiert, in der die Bilder eines ausgewählten Ordners angezeigt werden.
Diese kann (konnte) man durch ein Javascript per Mausclick vergrößern, der Code dazu ist folgender:
Dann kam mir die Idee, da die Bilder in der Galerie ja doch immer mehr werden und die Ladezeiten dadurch nicht besser, ein Script zu schreiben, daß die Bilder beim Upload (per PHP-Script) als Thumb's in ein weiteres Verzeichnis kopiert, d.h. wenn ich eine Galerie Test anlegen will wird ein Ordner Test im Pfad galerie/galerieordner für die Bilder in Originalgröße erstellt, und ein weiterer Ordner Test im Pfad galerie/thumbordner, in den dann die Thumbnails kommen.
Für die Ausgabe der Bilder einer Galerie ist das Script unten in diesem Post zuständig (Fertig kann man das hier ansehen).
In diesem Script wird der Ordner, in dem die Bilder in groß gespeichert sind ausgelesen,
und für jedes Bild, daß in dem Ordner ist wird das Bild mit demselben Namen aus dem Thumbnailordner angezeigt, zuerst alle im Quer-, dann im Hochformat.
Wenn ich jetzt ein Bild anklicke wird das Popup (falls man das bei dem Code in diesem Fall so nennen kann) in der Größe des Thumbnails angezeigt.
Wie muß ich das Java-Script also schreiben daß ich das ursprüngliche Bild angezeigt bekomme ?
Ich hoffe Ihr konntet mir folgen...
Aber bei Java-Script blick ich nun überhaupt nicht durch, deshalb meine Frage:
Ich habe eine Bildergalerie programmiert, in der die Bilder eines ausgewählten Ordners angezeigt werden.
Diese kann (konnte) man durch ein Javascript per Mausclick vergrößern, der Code dazu ist folgender:
Code:
<div id='zoom' style=position: absolute; top:50; margin-left:0px; background:#e0e0e0; padding:5px; border:1px solid black; display:block; z-index:-1; text-align:right;></div>
<script type=text/javascript>
var dz = document.getElementById('zoom');
function zoom_hide()
{
dz.style.zIndex = -1;
dz.innerHTML =->';
}
function zoom_show(obj)
{
var o = obj;
var y = -(obj.height*10/3 + 25);
while (o) { y += o.offsetTop; o = o.offsetParent; }
dz.innerHTML = (obj.alt ?-><b>'+obj.alt+'</b><br>' :->')+'<img src='+obj.src.replace(/-tn/,-n)+' onclick=zoom_hide();><br><span style=font-size:8pt;>Schließen? Bild anklicken!</span>';
dz.style.top = y > 80 ? y : 80;
dz.style.zIndex=2;
// dz.style.top = y > 430 ? y-350 : 80;
}
</script>
...
<?php
echo<img src='$thumbs1/$file' alt='$file' title='$file' width='170px' height='112px'onclick='zoom_show(this);'></a>&nbsp;;
?>
Dann kam mir die Idee, da die Bilder in der Galerie ja doch immer mehr werden und die Ladezeiten dadurch nicht besser, ein Script zu schreiben, daß die Bilder beim Upload (per PHP-Script) als Thumb's in ein weiteres Verzeichnis kopiert, d.h. wenn ich eine Galerie Test anlegen will wird ein Ordner Test im Pfad galerie/galerieordner für die Bilder in Originalgröße erstellt, und ein weiterer Ordner Test im Pfad galerie/thumbordner, in den dann die Thumbnails kommen.
Für die Ausgabe der Bilder einer Galerie ist das Script unten in diesem Post zuständig (Fertig kann man das hier ansehen).
In diesem Script wird der Ordner, in dem die Bilder in groß gespeichert sind ausgelesen,
und für jedes Bild, daß in dem Ordner ist wird das Bild mit demselben Namen aus dem Thumbnailordner angezeigt, zuerst alle im Quer-, dann im Hochformat.
Wenn ich jetzt ein Bild anklicke wird das Popup (falls man das bei dem Code in diesem Fall so nennen kann) in der Größe des Thumbnails angezeigt.
Wie muß ich das Java-Script also schreiben daß ich das ursprüngliche Bild angezeigt bekomme ?
Code:
<div id='zoom' style=position: absolute; top:50; margin-left:0px; background:#e0e0e0; padding:5px; border:1px solid black; display:block; z-index:-1; text-align:right;></div>
<script type=text/javascript>
// Copyright (c) 2005 by Tegtmeier Internet Solutions e.K.
// Author: Jan Tegtmeier
var dz = document.getElementById('zoom');
function zoom_hide()
{
dz.style.zIndex = -1;
dz.innerHTML =->';
}
function zoom_show(obj)
{
var o = obj;
var y = -(obj.height*10/3 + 25);
while (o) { y += o.offsetTop; o = o.offsetParent; }
dz.innerHTML = (obj.alt ?-><b>'+obj.alt+'</b><br>' :->')+'<img src='+obj.src.replace(/-tn/,-n)+' onclick=zoom_hide();><br><span style=font-size:8pt;>Schließen? Bild anklicken!</span>';
dz.style.top = y > 80 ? y : 80;
dz.style.zIndex=2;
// dz.style.top = y > 430 ? y-350 : 80;
}
</script>
<?php
$pfad = galerie/galerieordner;
$thumbs = galerie/thumbordner;
echo<div style='width: 620px; text-align: center; vertical-align: top; font: 12px verdana; font-weight: bold; letter-spacing: 1px;'><p>Galerieauswahl</p>
<center>
<table style='width: 400px; text-align: center;' border='1'>
<tr>
<td style='font:9px verdana;' colspan='4'><b>Bildergalerie auswählen</b>
</td>
</tr><tr>;
$handle = opendir($pfad);
$reihen = 0;
$dateizaehler = 0;
while ($file = readdir($handle)){
if(($file != .) && ($file != ..)){
$dateizaehler++;
echo<td style='width: 100px; font: 9px verdana; text-decoration: none;'><a href='index.php?go=galerie&galerie=$file'>$file</a></td>;
if($dateizaehler == ($reihen + 4)){
echo</tr><tr>;
$reihen = $dateizaehler;
}
}
}
closedir($handle);
echo</tr>
</table>
</div>
<div style='text-decoration: none;'><p>;
if (isset($galerie)){
$pfad1 = $pfad/$galerie;
$thumbs1 = $thumbs/$galerie;
$bildordner = opendir($pfad1);
$reihen1 = 0;
$dateizaehler1 = 0;
while ($file = readdir($bildordner)){
if(($file != .) && ($file != ..)){
$bild = $pfad1/$file;
$bildgroesse = (getimagesize($bild));
if($bildgroesse[0] > $bildgroesse[1]){
$dateizaehler1++;
echo<img src='$thumbs1/$file' alt='$file' title='$file' width='170px' height='112px'onclick='zoom_show(this);'></a>&nbsp;;
if($dateizaehler1 == ($reihen1 + 3))
{
echo<br>;
$reihen1 = $dateizaehler1;
}
}
}
}
closedir($bildordner);
$bildordner = opendir($pfad1);
$reihen1 = 0;
$dateizaehler1 = 0;
while ($file = readdir($bildordner)){
if(($file != .) && ($file != ..)){
$bild = $pfad1/$file;
$bildgroesse = (getimagesize($bild));
if($bildgroesse[0] < $bildgroesse[1]){
$dateizaehler1++;
echo<img src='$thumbs1/$file' alt='$file' title='$file' width='112px' height='170px' onclick='zoom_show(this);'>&nbsp;;
if($dateizaehler1 == ($reihen1 + 4))
{
echo<br>;
$reihen1 = $dateizaehler1;
}
}
}
}
}
echo</p></div></center>;
?>
Ich hoffe Ihr konntet mir folgen...