<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>meine Zeichnungen</title>
<link rel="stylesheet" type="text/css">
<style>
/* Lightbox */
#lightbox {
/* display: none; */
position: absolute;
border: 6px ridge darkgrey;
background-image: url(parchment.jpg);
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
transition: 0.5s;
}
#lightbox-ovl {
display: block;
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: scale(0);
transition: 0.5s;
}
</style>
<script language="JavaScript" src="photoalbum-config-4.js"></script>
<script language="JavaScript" src="photoalbum-code-tablayout-lightbox.js"></script>
</head>
<body style="">
<center>
<br>
<form name="SuzyForm">
<table border="0">
<tbody>
<tr>
<td>
<table style="margin: 0px; padding: 0px;" border="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="border-top: 2px groove rgb(136, 136, 136); border-left: 4px groove rgb(136, 136, 136); border-bottom: 4px groove rgb(136, 136, 136); margin: 0px; padding: 10px; background: transparent url(parchment.jpg) repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 275px;"
bgcolor="#f9f9f9">
<div id="SuzySpot">
<script language="javascript">
document.write('<a href=javascript:SuzyPicRemote("' + ActiveArray[current].PicVal + '");><img name="PicShowing" src=' + ActiveArray[current].PicVal + ' height=200 border=0></a>');
</script>
</div>
</td>
<td style="border-top: 2px groove rgb(136, 136, 136); border-bottom: 4px groove rgb(136, 136, 136); background: transparent url(parchmentring.jpg) repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 36px;"
border="0"> </td>
<td style="border-top: 2px groove rgb(136, 136, 136); border-right: 4px groove rgb(136, 136, 136); border-bottom: 4px groove rgb(136, 136, 136); padding: 5px 20px 5px 5px; background: transparent url(parchment.jpg) repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 225px; font-family: verdana; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; line-height: normal; font-size-adjust: none; font-stretch: normal; color: rgb(0, 0, 68); margin-left: 0px;"
valign="top">
<div id="journal">
<script language="javascript">
document.write('<br>' + ActiveArray[current].TitVal + '</b><p>' + ActiveArray[current].DatVal + '<p style="text-align:center; text-indent:25px">' + ActiveArray[current].TxtVal);
</script>
</div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<center>
<table style="border: 2px ridge rgb(255, 255, 255);">
<tbody>
<tr align="center">
<td rowspan="4">
<div id="PicSpot">
<select size="13"
style="width: 200px; font-family: verdana; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"
name="SuzyDropdown"
onchange="ShowSuzyPic(SuzyForm.SuzyDropdown.options.selectedIndex);">
<script language="javascript">LoadPiclist();</script>
</select>
</div>
</td>
<td style="border-bottom: 2px solid rgb(204, 204, 204);"> <input value="<<"
onclick="PreviousSuzyPic();"
style="font-family: verdana,helvetica,arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; line-height: normal; font-size-adjust: none; font-stretch: normal; text-align: center;"
type="button"> <input value=">>" onclick="NextSuzyPic();"
style="font-family: verdana,helvetica,arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; line-height: normal; font-size-adjust: none; font-stretch: normal; text-align: center;"
type="button"><br>
voriges - nächstes<br>
</td>
</tr>
<tr>
<td style="border-bottom: 1px solid rgb(204, 204, 204);"><input
name="SelectedMode" value="chkSlideshow" onclick="NextSuzyPic();"
type="radio">- Diashow!
<input name="SelectedMode" value="chkAlbum"
onclick="ShowSuzyPic(current);" checked="checked" type="radio">-
Fotoalbum! <br>
<center>Anzeigedauer: <input name="Timer" size="3" value="5"
type="text"> Sekunden</center>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</form>
</center>
<!-- Fuer Lightbox -->
<div id="lightbox-ovl"></div>
<div id="lightbox">
<img>
</div>
</body>
</html>//abgeaendert fuer Zeichnungen!
/**********************************************************
* Suzy's Javascript Photo Album, version 8.0, March 17, 2004
*
* Changed this version: javascript is now in two seperate external
* files, and put "spaces" in category names.
*
* This javascript may not be used on other sites without prior permission.
*
* You may contact me at photokity@hotmail.com for assistance.
*
**********************************************************/
self.name = "main"; // If you are using frames, change "main" to the name of the frame that the photoalbum is in.
current = 0; // Sets the current picture being shown to the first one.
ActiveVar = 0; // Sets up the variable that counts the pictures.
var ActiveArray = new Array() // Sets up the active array.
for (loop = 0; loop < MainVar; loop++) {
ActiveArray[ActiveVar++] = new Fix(
MainArray[loop].DatVal,
MainArray[loop].PicVal,
MainArray[loop].TitVal,
MainArray[loop].CatVal,
MainArray[loop].TxtVal,
MainArray[loop].wImg, // !!! hinzu gefuegt
MainArray[loop].hImg // !!! hinzu gefuegt
);
}
function DisplayCategories() { // Lists out the categories.
TotalCategories = SuzyCategory.length;
for (loop = 0; loop < TotalCategories; loop++) {
document.write("<option value=" + SuzyCategory[loop] + ">" + ReplaceChars(SuzyCategory[loop]) + "</option>");
}
}
function FindPic() { // The search for a photo feature.
TotalFound = 0;
SearchString = document.SuzyForm.SearchWord.value;
SearchString = SearchString.toLowerCase();
WriteResults = window.open("", "resultwindow", "height=410, width=490, toolbar=0, status=0, menubar=0, resizable=1, scrollbars=1");
WriteResults.document.open();
WriteResults.document.write('<style type=text/css>body{background:url(parchment.jpg); font:8pt verdana}'
+ 'a{text-decoration:none}'
+ 'img{border:2px ridge #ffaaaa; height:50px; vertical-align:middle}'
+ '</style>'
+ 'You searched for: <i>' + SearchString + '</i>'
+ '<br>Category: <i>' + parent.document.SuzyForm.CategoryDropdown.options.value + '</i>'
+ '<p><b>Results:</b><br>');
for (loop = 0; loop < ActiveVar; loop++) {
Keyword = ActiveArray[loop].TxtVal;
Keyword = Keyword.toLowerCase();
URL = ActiveArray[loop].PicVal;
title = ActiveArray[loop].TitVal;
title = title.toLowerCase();
SearchResult = Keyword.indexOf(SearchString);
SearchResult2 = title.indexOf(SearchString);
if (SearchResult != "-1" || SearchResult2 != "-1") {
WriteResults.document.write('<p><a href=javascript:ShowSuzyPic(' + loop + '); target="main"><img src=' + ActiveArray[loop].PicVal + '></a> ' + title);
TotalFound++;
}
}
WriteResults.document.write('<p><b>Returned ' + TotalFound + ' results.</b><p><a href="javascript:window.close();">close window</a>');
WriteResults.document.close();
}
function LoadPiclist() { // Loads initial list of pictures on web page.
for (loop = 0; loop < MainVar; loop++) {
document.write("<option value=" + ActiveArray[loop].PicVal + ">" + ActiveArray[loop].TitVal + "</option>");
}
}
function LoadNextPic() { // Loads next picture for faster operation.
NextImage = new Image();
NextPic = current + 1;
if (NextPic >= ActiveVar) NextPic = 0;
NextImage.src = ActiveArray[NextPic].PicVal;
}
function NextSuzyPic() { // Flips to the next photo.
TotalImages = document.SuzyForm.SuzyDropdown.options.length;
current++;
if (current >= ActiveVar) current = 0;
ShowSuzyPic(current);
}
LoadThis = 0;
function PreLoader() { // If checked, preloads all images into cache. Five second interval between pics.
if (SuzyForm.PreloadPics.checked && ++LoadThis < MainVar) {
ShowingImage = new Image();
ShowingImage.src = MainArray[LoadThis].PicVal;
window.status = "Pre-Loading image... '" + MainArray[LoadThis].PicVal + "'";
RunLoader();
} else {
window.status = " ";
}
}
function PreviousSuzyPic() { // Flips to the previous photo.
current--;
if (current < 0) current = ActiveVar - 1;
ShowSuzyPic(current);
}
function RandomSuzyPic() { // Shows a random photo.
randompic = Math.floor(Math.random() * ActiveVar);
ShowSuzyPic(randompic);
}
function ReplaceChars(entry) { // Replaces the _'s in cat names to make it pretty.
out = "_"; // replace this
add = " "; // with this
temp = "" + entry; // temporary holder
while (temp.indexOf(out) > -1) {
pos = temp.indexOf(out);
temp = "" + (temp.substring(0, pos) + add +
temp.substring((pos + out.length), temp.length));
}
return temp;
// document.subform.text.value = temp;
}
function RunLoader() { // Pre-loads all images every 5 seconds, if checkbox is selected.
timerLoad = setTimeout("PreLoader()", 5000)
}
function RunSlideShow() { // Shuffles the photos in a slide show.
timerSlideShow = setTimeout("NextSuzyPic();", document.SuzyForm.Timer.value * 1000)
}
function ShowSuzyCategory(picked) { // Shows the pictures in that category.
ActiveArray.length = 0;
PicList = "<SELECT size=13 style='width:200px; font:8pt verdana' name='SuzyDropdown' onChange='ShowSuzyPic(SuzyForm.SuzyDropdown.options.selectedIndex);'>";
ActiveVar = 0;
current = 0;
for (loop = 0; loop < MainVar; loop++) {
if (MainArray[loop].CatVal.toLowerCase() == picked.toLowerCase() || picked == "all") {
ActiveArray[ActiveVar++] = new Fix(MainArray[loop].DatVal, MainArray[loop].PicVal, MainArray[loop].TitVal, MainArray[loop].CatVal, MainArray[loop].TxtVal)
PicList = PicList + "<option value=" + MainArray[loop].PicVal + ">" + MainArray[loop].TitVal + "</option>";
}
}
PicList = PicList + "</select>";
document.getElementById("PicSpot").innerHTML = PicList;
}
function ShowSuzyPic(newpic) { // Shows the photo and text on the page.
current = newpic;
SelectionBox = document.SuzyForm.SuzyDropdown;
SelectionBox.options[current].selected = true;
document.getElementById("SuzySpot").innerHTML = '<a href=javascript:SuzyPicRemote("' + ActiveArray[current].PicVal + '");><img name="PicShowing" src=' + ActiveArray[current].PicVal + ' height=200 border=0></a>';
document.getElementById("journal").outerHTML = '<div id=journal><br><b>' + ActiveArray[current].TitVal + '</b><p>' + ActiveArray[current].DatVal + '<p style="text-align:justify; text-indent:25px">' + ActiveArray[current].TxtVal + '</div>';
if (document.SuzyForm.WhereView[1].checked) {
timerID = setTimeout("SuzyPicRemote(ActiveArray[current].PicVal)", 1000)
}
if (document.SuzyForm.SelectedMode[0].checked) {
timerSlideShow = setTimeout("NextSuzyPic();", document.SuzyForm.Timer.value * 1000)
LoadNextPic();
} else {
LoadNextPic();
}
}
// Fuer Lightbox
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#lightbox-ovl').addEventListener('click', function () {
this.style.transform = 'scale(0)';
document.getElementById('lightbox').style.transform = 'scale(0)';
});
});
// Auf Lightbox umgestellt
function SuzyPicRemote(picName) { // Pops up the photo in a lightbox
wImg = ActiveArray[current].wImg
hImg = ActiveArray[current].hImg;
wViewport = window.innerWidth;
hViewport = window.innerHeight;
var sqrt2 = Math.sqrt(2);
var isPortrait = true;
// Fenstergroesse festlegen abhaengig ob Hoch- oder Querfomat
if (wImg < hImg) { // Ist das Bild im Hochformat?
var hLightbox = 900;
var wLightbox = 900 / sqrt2;
} else {
isPortrait = false;
var wLightbox = 900;
var hLightbox = 900 / sqrt2;
}
// Passt das Fenster nicht in den Bildschirm, passen wir die Groesse an
var fH = fW = 1;
if (wLightbox > wViewport) {
var fW = wViewport / wLightbox;
}
if (hLightbox > hViewport) {
var fH = hViewport / hLightbox;
}
if (fH < fW) {
factor = fH;
} else {
factor = fW;
}
wLightbox *= factor * 0.9;
hLightbox *= factor * 0.9;
var lightbox = document.getElementById('lightbox');
var img = document.querySelector('#lightbox img');
lightbox.style.width = wLightbox + 'px';
lightbox.style.height = hLightbox + 'px';
lightbox.style.top = (hViewport - hLightbox - 12) / 2 + 'px';
lightbox.style.left = (wViewport - wLightbox - 12) / 2 + 'px';
img.src = picName;
if (isPortrait) {
var factorImgW = wImg / 21;
var factorImgH = hImg / 29.7;
} else {
var factorImgW = wImg / 29.7;
var factorImgH = hImg / 21;
}
var wImg2 = wLightbox * factorImgW;
var hImg2 = hLightbox * factorImgH;
img.style.width = wImg2 + 'px';
img.style.height = hImg2 + 'px';
lightbox.style.transform = 'scale(1)';
document.getElementById('lightbox-ovl').style.transform = 'scale(1)';
}Oh, daran hatte ich jetzt nicht gedacht. Das ist das alte Javascript mit meiner Erweiterung für Lightbox. Das kannst Du umändern in photoalbum-code.js, so wie es bisher war und in diese Datei das Javascript, das ich gepostet habe, 1-zu-1 hinein, dann sollte es funktionieren.
<!-- Fuer Lightbox -->
<div id="lightbox-ovl"></div>
<div id="lightbox">
<img>
</div>
</body>
</html>
