Bilder randlos einzeln per js öffnen

P

phonoline

Mitglied
Hallo!

Ich habe ein bisschen an meiner Website (http://www.merdesign.org) rumgefriggelt, bin aber bisher zu einer herkömmlichen Javascript Version gekommen, in der nur die Bilder (und nicht innerhalb einer neuen HTML Seite) per Mausklick auf durch Imagemaps gekennzeichnete Thumbnails geöffnet werden. Dabei habe ich einfach die Größe des Pop-Up Fensters etwas größer als die Bilder gemacht, damit keine Scrollbars entstehen.
In Opera, Netscape, Firefox und Mozilla werden die Bilder zentriert dargestellt, im IE 6.? allerdings nicht. Schaut doch mal einfach auf folgende Beispielseite (und klickt auf die kleinen Thumbnails):
http://www.thetunemakers.com/app/bsights.htm

Das Script zu Bild0 (Briefbogen) lautet:

function Bild0() {
window.open(document.images.src="http://www.thetunemakers.com/app/photos/music_1cc.jpg","Fenster","width=450 , height=575 , menubar=no , left=0, top=0 ,resizable=no , status=no , location=no");
}

Anhand einiger Tutorialseiten habe ich erfahren, dass man das aufzupoppende Fenster auch komplett ohne Rahmen öffnen, man es sogar ein- und ausfaden und zudem noch das Fenster schließen kann, in dem man einfach auf das Bild klickt.

Wär dieses Script zu aufwendig? Und kann man das auch machen, ohne für jedes Bild eine HTML-Seite zu kreieren? Was haltet Ihr für am besten geeignet in diesem Fall? Es handelt sich immerhin um ca. 80-100 Bilder, die geöffnet werden sollen, eine Galerie ist ausgeschlossen, es soll schick aussehen (also evtl. ohne Rand), aber auch für die momentan gängigsten Browser funktionieren (auf jeden Fall Netscape und IE).

Wenn das alles nicht geht, wie kann ich das oben gezeigte Script verändern, damit es sauberer aussieht, wenn sich das fenster öffnet (also ohne weißen Rand ums Bild). Kann man z.B. dem aufzupoppenden Fenster eine Hintergrundfarbe geben, wie kriege ich diesen dämlichen Fensterrahmen weg?

Oh, ziemlich viel jetzt. Hoffe, ich überanspruche nicht Eure Zeit damit. Vielen, vielen Dank jedenfalls Antworten!

Viele Grüße,
Alex
 
Hi,

an die Bildgrösse angepasstes PopUp hatten wir erst vor einigen Tagen - hier .

Ist allerdings eine Lösung mit Fensterrahmen. Ohne Rahmen kannst du mal nach "chromless
window" schauen. Ich habe allerdings noch nicht damit gearbeitet. Ich glaube aber gelesen zu
haben, dass die Variante nur mit dem IE funktioniert.

Eine weitere Möglichkeit wäre es, eine absolut positionierte Ebene mit dem Bild über den eigentlichen
Inhalt zu legen. In diesem Fall könntest du den Rahmen anpassen.

Beispiel:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PicturViewer</title>
<script type="text/javascript">
  <!--
/* ******************************************************** *
 * Funktion zum Öffnen eines Bildes in einer absolut        *
 * positionierten Ebene.                                    *
 * Parameter: strImg     - Filename und Pfad des Bildes,    *
 *                         das angezeigt werden soll        *
 *            strAlttext - Alternativer Text zum Bild       *
 *                         ausgangsstring enthält           *
 *                                            Quaese, 2005  *
 * ******************************************************** */
// Globales Bildobjekt
objImg = null;

// Preload-Funktion
function loadImg(strImg, strAlttext){
  // Bildobjekt erstellen
  objImg = new Image();
  // Bildquelle zuweisen
  objImg.src = strImg;
  // Funktion zum Öffnen des Bildes aufrufen
  showImg(strImg, strAlttext);
}

// Anzeige- und Auswertungsfunktion
function showImg(strImg, strAlttext) {

  // Solange das Bild noch nicht geladen ist
  if(objImg.width > 0){
	  // Höhe und Breite des Bildobjektes ermitteln
	  var intHeight = objImg.height;
	  var intWidth = objImg.width;

	  // Objekt der Bild-Ebene holen
	  var objDiv = document.getElementById("imgID");
	  // Breite und Höhe des Bildes an Ebene zuweisen
	  objDiv.style.width = intWidth + "px";
	  objDiv.style.height = intHeight + "px";
	  // Bild und Close-Button einbinden
	  objDiv.innerHTML = "<img src=\""+strImg+"\" width=\""+intWidth+"\" height=\""+intHeight+"\" alt=\""+strAlttext+"\" /><div class=\"closeDiv\" onclick=\"document.getElementById('imgID').style.display='none';\">x</div>";
	  // Div einblenden
	  objDiv.style.display = "block";
  }else{
  	// Funktion erneut aufrufen
  	window.setTimeout("showImg('"+strImg+"','"+strAlttext+"')", 10);
  }
}
 // -->
</script>
<style type="text/css">
  <!--
img{ border-width: 0;}
#imgID{ position: absolute;
        top: 100px;
        left: 100px;
        display: none;
        z-index: 99;
        width: 0;
        height: 0;}
.closeDiv{ position: absolute;
           display: block;
           text-align: center;
           width: 18px;
           height: 18px;
           top: 0;
           right: 0;
           font-size: 16px;
           line-height: 18px;
           text-decoration: none;
           z-index: 100;
           cursor: pointer;
           border: 1px solid #000000;
           background: #efefef;}
 //-->
</style>
</head>
<body style="color: black; background: #ffffff;">
<table>
	<tr>
	  <td><a href="javascript: loadImg('bild1.gif', 'txt1');"><img src="bild1.gif" width="50" height="50" alt="" /></a></td>
	  <td><a href="javascript: loadImg('bild2.gif', 'txt2');"><img src="bild2.gif" width="60" height="60" alt="" /></a></td>
	</tr>
	<tr>
	  <td><a href="javascript: showImg('bild3.gif');"><img src="bild3.gif" width="70" height="70" alt="" /></a></td>
	  <td><a href="javascript: showImg('bild4.gif');"><img src="bild4.gif" width="80" height="80" alt="" /></a></td>
	</tr>
</table>
<div id="imgID"></div>
</body>
</html>
Ciao
Quaese
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück