Mit dem Klick im Dia wird das jeweilige Bild aufgerufen. Die Diavorschau ist vertikal verschiebbar bis der jeweilge Pfeil verschwindet.
Obwohl das alles recht simpel daherkommt, wird die Erklärung doch recht umfangreich. UND! Ohne die Positionsübergabe der verschobenen Diareihe an das Elternfenster also die index.php, dass im iframe die main.php beinhaltet, würde die Verschiebung bei Anklicken immer wieder auf den Nullpunkt zurückspringen. WEIL: Der URL-Anhang PHP die Seite neu laden lässt.
Die Werte, die zur Berechnung benutzt werden, sind neben dem Bild unten zu sehen und nur zur Ansicht. Entscheidend sind die in das Elternfenster übertragenen Werte. Diese werden in span-Elementen gespeichert. Firefox erlaubt, wenn die Erweiterung „Web Developer“ geladen ist, über das Item „Erzeugten Quelltext anzeigen“ einen Einblick auf die Wertübertragung, der InternetExplorer mittels der F12-Taste, Chrome hat auch sowas über „Weitere Tools ▸ Entwicklertools“, Opera bietet über Steuerung+Shift+i diese Möglichkeit. Für Safari habe ich nichts dergleichen finden können. Ist aber auch nicht weiter schlimm. Die Wichtigsten können das.
Und nun folgt wieder, was zu erklären ist.
Begonnen wird wie in allen Beispielen mit dem Hauptthema „Bilder präsentieren“ mit dem Erfassen der Bilder. Es wird die Datei "../komponenten/picdir.php" vor allem anderen inkludiert. Diese ist in Teil1 bereits beschrieben. In den folgenden Elementen:
26 bis 33: dieser Seite
<section id="diaschau">
<div id="aufundab">
<span id="auf">▲</span>
<br /><span id="ab">▼</span>
</div>
<div id="thumbnails" ><div id="dia" class="drag" >
<?php
include "../komponenten/dia.php" ;
echo $dia ;
?>
</div></div>
und 49:
</section>
werden die erforderlichen Kindelemente deklariert und es erfolgt die Ausgabe von dia.php
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 |
<?php
/*dia 75px 56px*/
$ar_bildtitel = array() ;
asort ($ar_pic) ;
$dia = '' ;
while (list ($key, $val) = each ($ar_pic)) {
if ($key == 1 || $key == 0) {
$bild = $val ;
$rahmen = "class='thn_aktiv'" ;
}
$pw = $ar_picW[$key] ;
$ph = $ar_picH[$key] ;
// an einer festen Breite orientieren
$koef = $pw / 74 ;
$koef = round($koef * 10 ) / 10 ;
$pwk = round($pw/$koef) ;
$pwk_k = round(74/$pwk*100)/100 ;
$pwk = round($pw/$koef).'px' ;
$phk = round($ph/$koef)-3 ;
$phk .= 'px' ;
if ( $key == $thn ) {
$bild = $val ;
$rahmen = "class='thn_aktiv'" ;
} else $rahmen = "class='thn'" ;
$exif = exif_read_data($val, 0, true);
$ar_bildtitel[$key] = $exif["IFD0"]["ImageDescription"] ;
echo "
<style type='text/css'>
#dia figure { clip: rect(0 $pwk $phk 0); margin-bottom: 3px;}
</style>";
// Die anzuzeigenden Elemente zusammenbauen und die $style-Eigenschaft für #dia figure anwenden
$dia .= "<figure $rahmen >" ;
$dia .= "<a href='?k=$dir&s=$file&ogr=$og&grz=$grz&fnr=$filenr&thn=$key&a=$anav&m=$move'>" ;
$temp = "height='$phk' width='$pwk' onclick='BILD(\"$val\", $key)'" ;
$dia .= "<img id='thn_$key' src='$val' $temp border='0' alt='Bild $key'>" ;
$dia .= "</a>" ;
$dia .= "</figure>" ;
}
?>
|
In 1: wird lediglich das Idealmaß eines Dias notiert. Das wird so aber nicht vorkommen.
In 8: wird dem ersten Dia die CSS-Klasse eines aktivierten Dias übergeben.
Von 13 bis 19: werden die Bilder auf Diagröße zugeschnitten und die Größen für die 28: bestimmt.
20 bis 23: Wenn der Schlüssel mit der Bildnummer übereinstimmt, ist es ein ausgewähltes Dia und ansonsten nicht.
21: Die Variable $bild erhält für die Elemente:
41 bis 44: dieser Seite
<div class='kontroll'>
<span id="startbild"><?php echo $bild ; ?></span>
<span id="bildW"><?php echo $ar_picW[$thn] ; ?></span>
</div>
den Pfad zur Darstellung. Die IDs bildpfad und bildW werden später im JavaScript benötigt.
46 bis 49: dieser Seite
<div id="bildcontain">
<div id="bild"></div>
<div id="bildtitel" class="southerni"><?php echo $ar_bildtitel[$thn] ; ?></div>
</div>
Die southerni-CSS-Klasse bestimmt den Schrifttyp .woff
In 25: wird der Bildtext aus der Bilddatei gelesen.
In 32: sind im URL-Anhang &a=$anav&m=$move, die nicht zum regulären Gebrauch gehören. Sie dienen dem Verhalten bei Verwendung der alternativen Navigation: PHP ► Sammelsurium ► Navigation
Bevor es mit Javascript weitergeht, soll aber noch CSS beschrieben sein. Dafür stelle ich die dia.css noch vor.
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/* DATEI: dia.css */
#diaschau { position: absolute; top: 30px; left: 50px; bottom: 0; width: 900px; height: 600px;
z-index: 2; overflow: hidden; }
#thumbnails { background-image: url(../imagesglobal/Filmstreifen.jpg);
background-repeat: repeat-y;
position: absolute; top: 20px; left: 20px; bottom: 30px; width: 110px; height: auto; z-index: 2;
overflow: hidden; border: solid 1px black; }
#bildcontain{ position: absolute; top: 0; left: 135px; width: 710px; height: 100%; z-index: 1; }
#bild { text-align: center; position: absolute; top: 0; left: 30px; width: 600px; height: 600px; }
#dia{ position: absolute; top: 0; left: 17px; width: 76px; height: auto; margin: 0; padding: 0; cursor: move; }
/* individualisieren #dia figure { clip: rect(0 75px 56px 0); } */
.drag{ position: absolute; cursor: move; }
#aufundab{ position: absolute; top: 40%; left: 0; width: 20px; height: auto; }
#auf{ font-size: 16px; left: 0; width: 13px; }
#ab{ font-size: 16px; width: 13px; }
.bildformat { border-color: #999 black black #999; border-style: solid; border-width: 2px; }
#bildtitel{ font-size: 18px; background-color: rgba(255,255,100,0.4);
text-align: center; position: absolute; top: 2px; left: 30px; width: 600px; height: 28px;
z-index: 3; padding-top: 5px; }
#dia > .thn_aktiv { text-align: center; position: relative; left: 0; margin: 0 0 4px; padding: 0;
border-color: #be0000 #ece #ece #be0000; border-style: solid; border-width: 1px; }
#dia > .thn { text-align: center; position: relative; margin: 0 0 4px; padding: 0; border: solid 1px gray; }
#dia > figure { position: relative; margin-bottom: 3px; display: block; }
|
Eine Erläuterung hierzu vielleicht:.
In 10: ist die Anweisung auskommentiert, weil dies mittels PHP geschehen soll. Bei gleichformatigen Bildern und gleichem Seitenverhältnis wäre es allerdings ok und könnte so stehen bleiben. So ist es aber nicht.
Da nun zwar mehr JavaScript folgt, als PHP zur Anwendung kommt, möchte ich den Themenkreis rund um Bilder dennoch nicht zerreißen. Dies Beispiel hätte also auch gut im Hauptthema JavaScript gepasst.
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
/* bilder.js */
var dateipfad = document.getElementById("startbild").innerHTML ;
var Bild = new Image();
Bild.src = dateipfad ;
var bildbereich = document.getElementById("bild");
function BILD(bildident, bildnr){
Bild.src = bildident ;
bildbereich.lastChild.src=Bild.src;
bildnr_alt = bildnr ;
}
function BILDINIT() {
if (document.createElement && bildbereich.appendChild) {
var img = document.createElement("img");
img.setAttribute("src", Bild.src);
bildbereich.appendChild(img);
img.className = "bildformat" ;
bildnr_alt = 1 ;
}
}
BILDINIT() ;
|
Die Funktion BILD(bildident, bildnr) wird aus der Datei dia.php 33: aufgerufen. Ob es hier etwas zu erklären gibt, weiß ich nicht. Die externe Datei bilder.js wird am Ende der Datei referenziert, da alle anzusprechenden Elemente bereits erfasst sein müssen. So wie auch das nächste Script drag.js. Da es sich hierbei um eine anonyme Funktion handelt, wird sie nicht explizit aufgerufen. Manchmal wundere ich mich immer noch, wie das geht, aber es funktioniert und auf neudeutsch: es funzt! Auch hier stütze ich mich auf eine bereits beschriebene Funktion, die ich für meine Bedingungen anpassen musste. Das betrifft alle Wertweitergaben an das Elternfenster sowie folglich auch deren aktuelle Abfrage.
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139 |
/* drag.js anonyme Funktion*/
( function(){
var dragObject = null;
var start = [ ] ;
var pos = [ ] ;
var poskor ;
var ypos ;
var ypos = 0 ;
var auf = 0 ;
var ab = 0 ;
var opac = 0 ;
var restdia = 80 ; // Wieweit darf das dia-Element noch rausgucken
var obj_auf = document.getElementById("auf") ;
var obj_ab = document.getElementById("ab") ;
var dia_h = document.getElementById("dia").offsetHeight ;
var th_h = document.getElementById("thumbnails").offsetHeight ;
ab = th_h - restdia ;
auf = dia_h - restdia ;
var thy = 0 ;
function DRAG_START(e){
// Position des Elements
start = GET_POS(this);
// Position des Events
var evt_pos = GET_EVENT_POS(e);
parent.document.getElementById("lydrag").innerHTML = evt_pos[0]*1 ;
// Die Startposition: das muss außerhalb des iFrames erfasst werden,
// wie auch dia_Abstand zum Elternelement "thumbnails"
ypos = document.getElementById("dia").offsetTop ;
parent.document.getElementById("top").innerHTML = ypos ;
parent.document.getElementById("ly").innerHTML = start[0] ;
document.getElementById("ly").innerHTML = start[0] ;
if ( ypos != parent.document.getElementById("ly").innerHTML ){
start[0] -= parent.document.getElementById("ly").innerHTML ;
}else{
start[0] -= evt_pos[0];
}
start[0] -= evt_pos[0];
// nicht verwirren lassen. ich bin schon verwirrt genug,
// dass ich nach der wenn-Abfrage start[0] wie wenn gleich nochmals start[0] -= evt_pos[0]; anweisen muss.
// Kommentiere ich entweder Zeile 32, 34 oder 36 aus, springt das dia-element unkontrolliert.
// Ich nehme es also so hin. Eine Erklärung hab ich nicht!
document.getElementById("top").innerHTML = ypos ;
document.getElementById("drag").innerHTML = evt_pos[0] ;
// Das Dragobjekt bestimmen, das hätte auch mit document.getElementById("dia") gemacht werden können.
dragObject = this;
document.onmouseup = END_DRAG ;
document.onmousemove = DO_DRAG ;
thy = document.getElementById("thumbnails").offsetTop + ypos -20 ;
// ist wichtig, da ansonsten nicht gedraggt wird.
return false;
}
function DO_DRAG(e) {
if(!dragObject) return;
// Position des Events
pos = GET_EVENT_POS(e);
dragObject.style.left = 17 + 'px';
poskor = parent.document.getElementById("lydrag").innerHTML*1 ;
ypos = (pos[0]*1)+(start[0]*1)+poskor ;
dragObject.style.top = ypos + 'px';
thy = document.getElementById("thumbnails").offsetTop + ypos -20 ;
parent.document.getElementById("top").innerHTML = ypos ;
// das ist nur eine Kontrollweitergabe. Sie diente zur Beobachtung der Dreickpfeile
parent.document.getElementById("wert").innerHTML = "auf ab "+auf+' '+ab+' / '+thy ;
// Bedingung nicht aus dem Diabereich rausschieben zu können. Dat kricht man sonst nich mehr anjefasst.
// UND die Pfeile verändern ihr Aussehen bis sie ganz verschwinden.
// Ich weiß doch, dass ich verspielt bin. Ich finde es halt hüpsch! Und ist auch was von mir.
// Nur kupfern finde ich blöde und uninteressant!
PFEIL() ;
// Ausgabe an Tabelle neben dem Bild - braucht man nicht, ist nur zur Demonstration.
document.getElementById("top").innerHTML = parent.document.getElementById("top").innerHTML ;
document.getElementById("drag").innerHTML = poskor ;
document.getElementById("ly").innerHTML = thy ;
return false;
}
function PFEIL (){
if (( ab - ypos ) < 200 ){
opac = ( ab - ypos )/200 ;
obj_ab.style.opacity = opac;
obj_ab.style.MozOpacity = opac;
obj_ab.style.filter = "alpha(opacity=" + (opac*100) + ")";
if ( ab <= thy ) {
obj_ab.style.visibility = "hidden" ;
dragObject.style.top = ab + 'px';
parent.document.getElementById("top").innerHTML = ab ;
} else obj_auf.style.visibility = "visible" ;
}
if (( auf + ypos ) < 200 ){
opac = ( auf + ypos )/200 ;
obj_auf.style.opacity = opac;
obj_auf.style.MozOpacity = opac;
obj_auf.style.filter = "alpha(opacity=" + (opac*100) + ")";
if ( auf <= thy*-1 ) {
dragObject.style.top = -(dia_h - restdia) + 'px';
obj_auf.style.visibility = "hidden" ;
parent.document.getElementById("top").innerHTML = -auf ;
} else obj_auf.style.visibility = "visible" ;
}
}
// Ab hier - ist nichts mehr von mir. Reime dich oder ich schlag dich.
// Das haben einfach klügere Leute entwickelt.
function END_DRAG(e) {
document.onmouseup = null;
document.onmousemove = null;
dragObject = null
return false;
}
window.onload = function() {
var all = document.getElementsByTagName('*');
for(var i = 0; i < all.length; i++)
if(all[i].className && all[i].className.indexOf('drag') > -1){
all[i].onmousedown = DRAG_START;
all[i].style.cursor = 'move';
};
}
// Hilfsfunktionen: // Rueckgabewert: [top, left]
function GET_POS(o) {
var t = 0;
var l = 0 ;
if(typeof o.offsetTop != 'undefined'){
t += o.offsetTop;
l += o.offsetLeft;
}
return [t, l];
}
function GET_EVENT_POS(e) {
if(!e) e = window.event;
var t = e.pageY ? e.pageY : e.clientY + window.document.body.scrollTop;
var l = e.pageX ? e.pageX : e.clientX + window.document.body.scrollLeft;
return [t, l];
}
window.onblur = function(){END_DRAG();};
window.document.onmouseout = function(e)
{
if(!e) e= window.event;
var target = e.target || e.srcElement;
window.status = (target.tagName);
if( target && target == dragObject) { END_DRAG(e);}
};
})() // Ende der anonymen Funktion
|
Ok, nachvollziehen kann ich das Script im Urzustand, aber um Himmelswillen nicht darauf kommen! Ich finde allerdings auch die Quelle nicht mehr, um auf den oder die Urheber hinzuweisen.
Jetzt folgt nur noch interner JavaScript, um nach jedem Neuladen der Seite alle Bedingungen vorher zu fixieren.
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181 |
<script type="text/javascript" language="JavaScript" src="../js/bilder.js"></script>
<script type="text/javascript" src="../js/drag.js"></script>
<script type="text/javascript">
var tpos = parent.document.getElementById("top").innerHTML ;
var obj_dia = document.getElementById("dia") ;
obj_dia.style.top = tpos + 'px';
var ypos = parent.document.getElementById("top").innerHTML *1 ;
var drag = parent.document.getElementById("lydrag").innerHTML ;
var ly = parent.document.getElementById("ly").innerHTML ;
document.getElementById("top").innerHTML = ypos ;
document.getElementById("drag").innerHTML = drag ;
document.getElementById("ly").innerHTML = ly ;
//Dreipfeile initialisieren
var obj_auf = document.getElementById("auf") ;
var obj_ab = document.getElementById("ab") ;
var restdia = 80 ; // auch hier nochmals bestimmen, wie die Dreieckpfeile zu behandeln sind.
var dia_h = document.getElementById("dia").offsetHeight ;
var th_h = document.getElementById("thumbnails").offsetHeight ;
var ab = (th_h*1) - restdia ;
var auf = (dia_h*1) - restdia ;
var thy = (document.getElementById("thumbnails").offsetTop *1) + (ypos *1) -20 ;
// die Funktion enthält nur noch die Eigenschaften für Deckkraft und Sichtbarkeit.
function PFEIL (){
if (( ab - ypos ) < 200 ){
opac = ( ab - ypos )/200 ;
obj_ab.style.opacity = opac;
obj_ab.style.MozOpacity = opac;
obj_ab.style.filter = "alpha(opacity=" + (opac*100) + ")";
if ( ab <= thy ) {
obj_ab.style.visibility = "hidden" ;
} else obj_auf.style.visibility = "visible" ;
}
if (( auf + ypos ) < 200 ){
opac = ( auf + ypos )/200 ;
obj_auf.style.opacity = opac;
obj_auf.style.MozOpacity = opac;
obj_auf.style.filter = "alpha(opacity=" + (opac*100) + ")";
if ( auf <= thy*-1 ) {
obj_auf.style.visibility = "hidden" ;
} else obj_auf.style.visibility = "visible" ;
}
}
PFEIL() ;
//bw 600 manuell ohne Abfrage, da es statisch bleiben wird.
var obj_bw = document.getElementById("bildW").innerHTML ;
var bildx = (600-obj_bw)/2+30 ; //Bild horizontal zentriert anordnen
var obj_bt = document.getElementById("bildtitel") ;
obj_bt.style.left = bildx+'px'
|
Und somit sind wir am Ende.
