nicht angemeldet
Probleme mit Bilder vorladen
0 0
Probleme mit Bilder vorladen
Hallo,
hab ein kleines Problem mit meinem js, und zwar war das ganze so gedacht, jemand klickt auf ein Vorschau Bild und es öffnet sich ein Popup in dem das Bild groß dargestellt wird. Leider wird die Größe des Popups immer erst beim zweiten mal anklicken des Vorschau Bildes in der richtigen Größe angezeigt. Tippe mal darauf das das Vorladen nicht richtig funktioniert.
Bsp. für den Aufruf in der HTML-Datei
<img src="../images/computer/WIN_XP_KL.jpg" name="xp" width="144" height="154" class="withRigthText" alt="Klicken, um das Bild zu vergrößern" onClick="loadImg(this)">
Hier die extern eingebunde js-Datei:
function loadImg(mySource, title, caption) {
var def = '';
var fileName = mySource.src;
fileName = fileName.replace(/KL/, "GR");
var pic = new Image();
pic.src = fileName;
if ( title == null) title = def;
if( caption == null) caption = def;
pic.onLoad = makePopup(pic, fileName, title, caption);
}
function makePopup(pic, fileName, title, caption){
container = window.open('', '','resizable=1');
with (container) {
focus ();
document.open();
document.write('<meta http-equiv="imagetoolbar" content="no">');
document.write('<title>' + title + '</title>');
document.write('<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no" onload="opener.render(' + pic.width + ', ' + pic.height + ')">');
document.write('<img src="' + fileName+ '" border="0" alt="' + caption + '" onClick="javascript:self.close()">');
document.close();
}
}
function render(x,y) {
if (navigator.appName == 'Microsoft Internet Explorer') {
container.resizeTo(x+10,y+29);
} else {
if(navigator.appVersion.substring(0,1) < "5") {
container.resizeTo(x,y);
} else {
container.resizeTo(x+8,y+28);
}
}
newX=(screen.availWidth/2)-(x/2);
newY=(screen.availHeight/2)-(y/2);
container.moveTo(newX,newY);
}
Für eure Hilfe besten dank.
Mfg Jan
-
hi,
Leider wird die Größe des Popups immer erst beim zweiten mal anklicken des Vorschau Bildes in der richtigen Größe angezeigt.
um die bildgröße per JS ermitteln zu können, muss das bild erst mal vom browser fertig geladen sein. dies dauert beim ersten laden aber etwas, dein script ist an der stelle zu "voreilig".
beim zweiten mal ist das bild bereits im cache, JS kann sich sofort darauf stürzen um die maße zu ermitteln.das thema popups an bildgröße anpassen hat Struppi schon ganz gut gelöst, schau's dir mal an: http://javascript.jstruebig.de/source/popup.html
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hallö Jan,
jemand klickt auf ein Vorschau Bild und es öffnet sich ein Popup in dem das Bild groß dargestellt wird.
Ohne meckern zu wollen: Wieso ein Popup?! Das wird IMHO von vielen Benutzern eher als unangnehm empfunden. Die Gefahr dabei ist, dass um sich greifende Popup-Blocker gar nix anzeigen (und eine Einstellung durch den Benutzer notwendig wird) oder ein neues Fenster/Tab im Hintergrund geöffnet wird - und nicht wahrgenommen.
Ausreichend wäre, das Bild in voller Größe über deine Seite zu legen, mit einem Klick darauf könnte es wieder verschwinden und den Inhalt darunter freigeben.
Grüße aus Leipzig
willie-
Lieber willie,
habe gerade diese Antwort gelesen und bin fasziniert von dieser Idee. Kannst Du einen Link zu einer Beispielseite angeben, oder aber kurz die Lösung skizzieren?
Bild "über" die Seite legen... Und dann ein "schließ-mich!"-Zeichen dazu? Das ist klasse! Muss mal nachforschen. Passt in die Kategorie <a href="bild.png" onclick="return javascript_link()"><img /></a>
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallö Felix,
habe gerade diese Antwort gelesen und bin fasziniert von dieser Idee. Kannst Du einen Link zu einer Beispielseite angeben?
Hier funktioniert das ganz gut: http://2002.oi-themeeting.de/foto_ball.html (ohne Grafik zum Schließen, sollte aber kein großes Problem sein.)
Grüße aus Leipzig
willie
-
-