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.
[source language=”:xhtml”]
<div id="images">
<div class="image">
<a class="imageLink" href="images_russia/russia_01.jpg" alt="" target="_blank">
<img src="images_russia/russia_01_tb.jpg" alt=""/>
</a>
</div>
<div class="image">
<a class="imageLink" href="images_russia/russia_02.jpg" alt="" target="_blank">
<img src="images_russia/russia_02_tb.jpg" alt=""/>
</a>
</div>
<div class="image">
<a class="imageLink" href="images_russia/russia_03.jpg" alt="" target="_blank">
<img src="images_russia/russia_03_tb.jpg" alt=""/>
</a>
</div>
</div>[/source]
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
[source language=”:js”]
$(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><title>Nora Erdmann – pictures from Russia</title>");
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;
});
});
[/source]