 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
13pixelchen
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mo 27.06.2005 17:20
Titel [Javascript] Das perfekte (Bild-) Pop-Up |
  |
|
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 
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 17:23, insgesamt 1-mal bearbeitet
|
|
| |
|
 |
heav
Dabei seit: 10.02.2004
Ort: Heimat der Inspiration
Alter: 39
Geschlecht: 
|
Verfasst Mo 27.06.2005 17:23
Titel Re: [Javascript] Das perfekte (Bild-) Pop-Up |
|
|
| 13pixelchen hat geschrieben: |
- Öffnen und automatisch auf Bildgröße einstellen
- Bildunterschrift
|
|
|
| |
  |
|
|
Anzeige
|
|
|
13pixelchen
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mo 27.06.2005 17:25
Titel
|
|
|
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 17:28
Titel
|
|
|
| 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 17:35
Titel
|
|
|
|
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 |
Bild in Bild faden via javascript
[Javascript] Bild aktualisieren
Javascript mouseover Bild überblendung?
spezielles bild per id tag und javascript tauschen
Bildaustausch mit JavaScript - getauschtes Bild mit Link
[S] Javascript der zu jedem Navipunkt ein anderes Bild ...
|
|
|
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.
|
|
