PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Bild in "auf Bild skaliertes" Fenster öffnen?


smileyyy
2006-05-30, 17:17:46
Hallo

Ich mache grade eine Webgallery und würde gern das Thumbnail so auf die Datei verlinken, dass das Bild in einem neuen Browserfenster aufgehtt, welches genau die Größe des Bildes hat und keine Buttons/Leiste. Einfach Bild und Umrahmung vom Browser.

Wie mach ich denn das?

HisN
2006-05-30, 17:21:32
Mit Javascript :-)
Bei mir auffer Seite z.b. kannste Dir den Quellcode kopieren. http://www.fichen.de

smileyyy
2006-05-30, 17:36:43
Erm...kannst du den hier reinkopieren, das "kopieren" erweist sich da irgendwie als schwierig. Ich finde nämlich keinen Link der irgendeinen spezielle Beschreibung hätte im QT

Dürfte was mit Colspan? zu tun haben aber wie ich das jetzt auf meine Bildchen anwende...?

Wär nett.

HisN
2006-05-30, 19:01:17
Okey....

in die Seite auf der Du die Thumbnails einbaust kommt..


<html>
<head>
<script language="JavaScript" type="text/javascript">

function popupImage(datei) {

var position_x = 150
var position_y = 150

if (navigator.appName.indexOf("etscape",1) != -1)
{
PopUp =
window.open(datei,"winName","scrollbars=no");

}
else
{
PopUp =
window.open(datei,"winName","top=" + position_y + ",left=" + position_x + ",scrollbars=no");
}
}
</script>
</HEAD>


Und damit rufst Du das eigentlich Bild auf


<a href="javascript:void(0);" onclick="popupImage('001.htm')">



Und das ist der Quelltext für die Bild-Datei (ich weiss, ist was kompliziert durch die Zweiteilung, aber nur so hab ich das "Schliessen beim Klick ins Bild" realsieren können.


<HTML>
<HEAD>
<SCRIPT LANGUAGE='JavaScript'>
var isNav4, isIE4;
if (parseInt(navigator.appVersion.charAt(0)) >= 4) {
isNav4 = (navigator.appName == 'Netscape') ? 1 : 0;
isIE4 = (navigator.appName.indexOf('Microsoft') != -1) ? 1 : 0;
}
function fitWindowSize() {
if (isNav4) {
window.innerWidth = document.images[0].width;
window.innerHeight = document.images[0].height;
}
else
{
window.resizeTo(500, 500);
width = 500 - (document.body.clientWidth - document.images[0].width);
height = 500 - (document.body.clientHeight - document.images[0].height);
window.resizeTo(width, height);
}
}
</script>
</HEAD>
<body onLoad='fitWindowSize()' leftmargin='0' marginheight='0' marginwidth='0' topmargin='0' onBlur='self.close()' onClick='self.close()'>
<div style='position:absolute left:0px; top:0px'>
<img src='001.jpg'>
</div>
</body>
</html>

mithrandir
2006-05-31, 07:56:34
Wenn PHP zur Verfügung steht. wäre es vielleicht eher eine Möglichkeit, bereits am Server die Bildeigenschaften auszulesen, dann fällt das Resizen per JavaScript weg und man kann das Fenster gleich mit der richtigen Größe aufmachen.

smileyyy
2006-05-31, 08:18:08
Danke erstmal

Php: Und das macht man dann wie?

mithrandir
2006-05-31, 10:48:56
Ich hab's z.B. so ähnlich:

$imageFile = "xyz/image.jpg";
$tmp = @getimagesize( $imageFile );
$width = $tmp[0];
$height = $tmp[1];

// Damit dann den JS-Link generieren:
$jsLink = "openwindow( '$imageFile', 'Ein Bild!', $width, $height );"

// Und im JS gibt's die Funktion openwindow dann ganz simpel:
function openwindow( url, title, width, height )
{
width =parseInt(width)+4;
height =parseInt(height)+4;
window.open( "showFile.php?url=" + url, title, "width=" + width + ",height=" + height + ",scrollbars=yes,menubar=no,statusbar=no,resizable=no" );
}

darph
2006-05-31, 12:12:19
HisN[/POST]']

<a href="javascript:void(0);" onclick="popupImage('001.htm')">


Wieso eigentlich? Damit erzwingst du unter allen Umständen die Verwendung von JavaScript. ;(

Warum nicht so?
<a href="bigpic.jpg.oder.htm" onClick="popupImage('bigpic.jpg.oder.htm');return false;">Klick mich</a>

So bekommt der Verwender von JS das Bild im größentechnisch angepaßten Fenster (was ich persönlich als Gängelei empfinde, wofür hab ich einen Tabbed Browser, aber egal). Wer aber kein JS aktiv hat, bekommt das Bild trotzdem zu sehen. Das return false; verhindert, daß der Browser, wenn JS aktiv ist, dem Link folgt.

Wenn ich auf Thumbnails klicke, dann in der Regel mit der mittleren Maustaste - darauf öffnet sich das Bild in einem neuen Tab. Im Hintergrund. So kann ich die Bilder alle öffnen und dann durch die Tabs blättern. Klick ich das Thumbnail normal an, öffnet sich das Fenster im Vordergrund, extatisches Fensterwechseln ist also die Folge.

Nur: öffne ich einen JS-Link in einem neuen Tab, dann wird der Browser natürlich nichts finden, weil er die Funktion, die aufgerufen wird, ja nicht kennt. Hier wird also der User eingeschränkt. Barrierefrei ist was anderes. ;)


Warum überhaupt dem User die Entscheidung abnehmen, wie groß er etwas sehen möchte?

smileyyy
2006-05-31, 18:51:58
Weil es schrecklich aussieht wenn ein 600x400 Bild im vollen Browser aufgeht.

Zum Script:

Javascript in den head-->klar

Soll ich jetzt wirklich bei jedem Bild das alles eingeben oder geht das irgendwie automatischer?

HisN
2006-05-31, 19:27:55
Ich hab mir nen Template gebaut.

d.h. 001.htm 002.htm usw bis 250. Machste ein mal und schon haste die Möglichkeit bis zu 250 Bilder in einem Verzeichnis anzeigen zu lassen.

smileyyy
2006-05-31, 20:02:10
Er machts zwar jetzt in einem neuen fenster auf aber von resizen keine spur.