Javascript Image Popup mit jQuery

das Original habe ich bei The Life of Me gefunden, da es aber nicht so ganz funktioniert hat hier mal meine Version

Wir haben hier eine ganz normale Galerie Seite mit Thumbnail Bilder die jeweils auf die grosse Version des Bildes verlinken. Wenn wir jetzt dem Link folgen bekommen wir eine neue Seite mit dem Bild aber schick ist das nicht.

Was ich wollte war ein Popup ohne Toolbar in genau der Größe des Bildes, denn Bilder haben natürlich alle unterschiedliche Größen.

Hier kommt jetzt jQuery zum Einsatz.

wir setzen bei einem #hidden Bild den Src auf das Ziel des Links
dann holen wir uns mit jQuery die Größe des Bildes
wir löschen den Src Wert beim #hidden Bild wieder
nun öffnen wir ein neues Fenster mit genau der Größe das Bildes

$(document).ready(function(){ $(".imageLink").click(function(){ $("#hidden").attr("src",$(this).attr('href')); var href = $(this).attr('href'); var description = $(this).attr('alt'); var width = $('#hidden').width() + 15; var height = $('#hidden').height() + 15; $("#hidden").attr("src",""); new_window = window.open(href,'popup','width=' + width + ',height=' + height + 'toolbar="no",scrollbars="no",menubar="no"'); new_window.document.write("<html><head>"); new_window.document.write("\<script type=\"text/javascript\"> function resize()\{ window.resizeTo(" + width + "," + height + "); \}\< \/script\>"); new_window.document.write("<link href=\"style.css\" rel=\"stylesheet\" type=\"text/css\"></link></script></head><body onLoad=\"resize()\">"); new_window.document.write("<a href=\"javascript:window.close()\"><img src=\"" + href + "\" title=\"" + description +"\" id=\"popup_img\"/>"); new_window.document.write("</a></body></html>"); new_window.document.close(); return false; }); });

niepi.org

26 June 2007