hallo Ralfi
hier eine mögliche lösung.
so funktionierts:
- man erstelle eine html seite als template für das anschauen grosser bilder (siehe imageviewer.html)
- man erstelle eine beliebige thumb-gallery (seite mit vielen kleinen bildchen)
- beim klick auf ein thumb-image wird eine javascript funktion aufgerufen welche das grosse bild in einem popup-fenster öffnet. dabei werden der pfad zum grossen bild, die grösse desselben (breite, höhe) sowie eine beschreibung dazu übergeben.
- die funktion öffnet ein popup, lädt das template hinein, und übergibt dabei pfad, breite, höhe und beschreibung.
die idee dabei ist:
- alles was von bild zu bild gleich bleibt kommt ins template.
- alles was ändert (pfad, breite, höhe, beschreibung) wird als javascript variable übergeben.
vorteile:
- keine frames
- der user muss nur das laden was er auch anschauen will.
hier ein beispiel:
//--------- imageviewer.html
<html>
<head>
<title>Image Viewer</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script type="text/javascript">
<!--
function ArgumentsObject(str) {
// by Steven Armstrong, 2003 Zürich.
// split the string to an array using ',' as the delimiter.
// the created array holds a name/value pair in each slot.
var pairs = str.split(",");
for (var i=0; i<pairs.length; i++) {
// get the position of the '=' character.
var pos = pairs.indexOf("=");
if (pos == -1) continue; //no delimiter found
// get the variable name
var argname = pairs.substring(0,pos);
// get the variable value
var argvalue = pairs.substring(pos+1);
// store the variable in the object using the given name and value
this[argname] = unescape(argvalue);
}
return this;
}//End: ArgumentsObject
// get the part of the url behind the '?'
var query = location.search.substring(1);
// create the ArgumentsObject using the query
var args = new ArgumentsObject(query);
var imageMarkup = "";
var description = "";
if (args.image) imageMarkup = '<img src="'+ args.image +'" border="0">';
if ((args.text) && (args.text != '')) description += '<p class="normal">'+args.text+'</p>';
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" cellpadding="5" cellspacing="5" border="0">
<tr>
<td align="center" valign="middle">
<script language="JavaScript1.2" type="text/javascript">
<!--
document.write(imageMarkup + description);
//-->
</script>
<p class="normal">
[ <a href="javascript:window.close();">Fenster schliessen</a> ]</p></td>
</tr>
</table>
</body>
</html>
//--------/ imageviewer.html
//--------- imagegallery.html
<html>
<head>
<title>Image Gallery</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script type="text/javascript">
<!--
function openImageViewer(imgSrc,imgWidth,imgHeight,descr)
{
if (descr) descr = escape(descr);
var viewerUrl = "imageviewer.html";
viewerUrl += "?image="+imgSrc+",text="+descr;
var viewerName = "ImageViewer";
var viewerWidth = imgWidth+40;
var viewerHeight = imgHeight+80;
var viewerOptions = "scrollbars=auto,menubar=no,toolbar=no,location=no,status=no,resizable=yes";
imageViewer = window.open(viewerUrl, viewerName, "width=" + viewerWidth + ",height=" + viewerHeight + "," + viewerOptions);
//openWindow(viewerUrl,winWidth,winHeight,'scrollbars=auto,menubar=no,toolbar=no,location=no,status=no,resizable=yes',0);
}
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<a href="javascript:openImageViewer('image1_lrg.gif', 300, 200, 'Die Beschreibung des 1. Bildes')">
<img src="image1_sml.gif" width="50" height="50" alt="Bildbschreibung"></a>
<a href="javascript:openImageViewer('image2_lrg.gif', 200, 400, 'Die Beschreibung des 2. Bildes')">
<img src="image2_sml.gif" width="50" height="50" alt="Bildbschreibung"></a>
</body>
</html>
//--------/ imagegallery.html
hth
gruss
Steven
als Antwort auf: [#23289]