mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 11.12.2016 09:18 Benutzername: Passwort: Auto-Login

Thema: [Javascript] Das perfekte (Bild-) Pop-Up vom 27.06.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> [Javascript] Das perfekte (Bild-) Pop-Up
Autor Nachricht
13pixelchen
Account gelöscht Threadersteller


Ort: -

Verfasst Mo 27.06.2005 16:20
Titel

[Javascript] Das perfekte (Bild-) Pop-Up

Antworten mit Zitat Zum Seitenanfang

Hi,

Ich finde jede menge Scripte, die popups erzeugen. Was ich jedoch bei dem einen gut finde, ist bei dem anderen nicht eingebaut. Folgende Funktionen bei einem Bild-popup finde ich nahezu unerlässlich. Vielleicht kann jemand mit einem Script aushelfen, das nicht so schlampig zusammengeschustert ist wie die anderen?

- Öffnen und automatisch auf Bildgröße einstellen
- Schließen bei Klick auf das Bild.
- Schließen bei verlieren des Fokus
- Bildunterschrift
- keine Scrollbalken und ähnliche Darstellung in FF, IE, O, SAFARI
- Öffnen des Bildpopups, auch wenn Javascript deaktiviert ist (per target="_blank")
- Dem Script wird übergeben: Bildadresse, Untertitel

All das geht tatsächlich.
Wer mir sowas findet, hat was gut * Ich bin ja schon still... *

Nachtrag: Am einfachsten wäre es, wenn sich das JS als Popup-Vorlage ne html Datei nimmt. Und damit man nicht genau die Popupgröße an den Bildrand anpassen muss, was eh nicht geht, macht man das Bild samt Unterschrift zentriert, und lässt Luft drumrum.


Zuletzt bearbeitet von am Mo 27.06.2005 16:23, insgesamt 1-mal bearbeitet
 
heav

Dabei seit: 10.02.2004
Ort: Heimat der Inspiration
Alter: 32
Geschlecht: Männlich
Verfasst Mo 27.06.2005 16:23
Titel

Re: [Javascript] Das perfekte (Bild-) Pop-Up

Antworten mit Zitat Zum Seitenanfang

13pixelchen hat geschrieben:


- Öffnen und automatisch auf Bildgröße einstellen
- Bildunterschrift



Hä?
  View user's profile Private Nachricht senden
Anzeige
Anzeige
13pixelchen
Account gelöscht Threadersteller


Ort: -

Verfasst Mo 27.06.2005 16:25
Titel

Antworten mit Zitat Zum Seitenanfang

Er soll ein Bild im Popup anzeigen, und diese Bilder haben verschiedene Größen. Er soll die Bildgröße auslesen (ja, das geht mit JS) und sich daran anpassen. Ich hab hier ein Beispielscript:

Code:

<script language="JavaScript" type="text/JavaScript">
function bildpopbp(bildpopp,bildpoput,bildpopti,bildpopte)
{ var undefined;

  if (bildpoput==undefined)
  {bildpoput='';}

  if (bildpopte==undefined)
  {bildpopte='';}

  if (bildpopti==undefined)
  {bildpopti='titel';}

  bildpopnw = window.open("","",'resizable=1,width=110,height=110,scroll=no');

  with (bildpopnw)
  {
    focus();
    document.open();
   document.write('<html><head><title>'+bildpopti+'</title>');
   document.write('<meta http-equiv=\"imagetoolbar\" content=\"no\">');
   document.write('<link href=\"/styles.css\" rel=\"stylesheet\" type=\"text/css\"></head>');
   document.write('<body leftmargin=\"0\" topmargin=\"0\" marginwidth=\"0\" marginheight=\"0\" scroll=\"no\" class=\"picpop\" onload=\"opener.bildpoprez(document.images[0].width,document.images[0].height)\">')
   document.write('<a href=\"javascript:self.close()\">');
   document.write('<img src=\"'+bildpopp+'\" border=\"0\" alt=\"'+bildpopte+'\"></a><br>')
   document.write('<p class=\"picpop\">'+bildpoput+'</p>')
   document.write('</body></html>')
   document.close();
  }
}

function bildpoprez(x,y)
{
if (navigator.appName == 'Microsoft Internet Explorer')
{bildpopnw.resizeTo(x+10,y+29+22);}

else
{
   if(navigator.appVersion.substring(0,1) < "5")
      {bildpopnw.resizeTo(x,y+22);}
   else
      {bildpopnw.resizeTo(x+8-8,y+28+22);}
}

bildpopx=(screen.availWidth/2)-(x/2);
bildpopy=(screen.availHeight/2)-(y/2);
bildpopnw.moveTo(bildpopx,bildpopy);
}
</script>



Code:
<a href="javascript:bildpopbp('/grafiken/popbild-test.jpg','Untertitel');">Pop-Up-Test</a>


Da sieht man auch die Bildunterschrift.
 
caZpa
Account gelöscht Threadersteller


Ort: -

Verfasst Mo 27.06.2005 16:28
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
<HTML> 
<HEAD> 
<title>popUp</title> 
<script type="text/JavaScript" language="JavaScript"> 
function popUpImg(img) {
   myImg = new Image();
   myImg.src = img;
   var width = myImg.width;
   var height = myImg.height;
   imgWin = window.open('', 'imgWinName', 'width=' + width + ', height=' + height);
 
   with (imgWin.document) {
      open();
      write('<HTML>');
      write(' <HEAD>');
      write(' <title>imgWin</title>');
      write(' </HEAD>');
      write(' <BODY style="margin: 0px;" onLoad="self.focus();">');
      write(' <a href="" onClick="JavaScript:self.close()">')
      write(' <img src="' + img + '" alt="popUpImage" title="popUpImage" border="0"></a>');
      write(' </BODY>');
      write('</HTML>');
      close();
   }
}
</script>
</HEAD> 
<BODY>
 <a href="javascript: popUpImg('t1.jpg')">img 01</a>
<br /> 
<a href="javascript: popUpImg('t2.jpg')">img 02</a><br />  </BODY> </HTML>
 
13pixelchen
Account gelöscht Threadersteller


Ort: -

Verfasst Mo 27.06.2005 16:35
Titel

Antworten mit Zitat Zum Seitenanfang

sehr schön, aber es fehlt die html Datei als vorlage, die man einfach ändern kann, und nicht alles ständig escapen muss, sowie das schließen wenn es den fokus verliert.
 
 
Ähnliche Themen [JavaScript] Pop-Up zentrieren
pop up ohne javascript?
Bild als Pop-Up anzeigen
Bild in Bild faden via javascript
[Javascript] Bild aktualisieren
Javascript mouseover Bild überblendung?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.