Super simple code to show full image over content with jQuery

Often I just want to make a thumbnail clickable and show it as an overlay on top of the other content. Of course there are loads of plugins but sometimes it’s just more fuzz to install and setup those than just creating it yourself. So here is the code I used:

HTML code, for instance:

<img alt="" src="http://reinejohansson.com/images/testimage123.JPG" id="mainImage">

Javascript code:

<script type="text/css">
$("#mainImage").click(function() {
 var fullImageName = $(this).attr("src").replace("/std/", "/");
 $("<div style='background: rgba(255,255,255,0.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10000; text-align: center'>"+
 "<h1 style='color: #555;background:#fff; width: 100%; height: 100px; margin: 0 auto; padding: 20px 0;'>Click here to close</h1>"+
 "<img style='' src='"+fullImageName+"'  />"+
 "</div>").appendTo("body").on("click", function() {
 $(this).empty().remove();
 });
 });
</script>

Then you may of course substitute the image ids etc to your own needs.

Published by

reinejohansson

Reine Johansson skapar och utvecklar hemsidor som är specialdesignade efter varje kunds behov. Behöver du en lättanvänd webbsida med informativt innehåll och online shopping funktioner, integrerade med redigeringsprogram som gör det möjligt för dig att inkludera nya data på din webbsida, utan att ha kunskaper i programmering? Hör av dig så fixar jag det! RJ Webbdesign har bla skapat webbsidorna idrottslabbet.se, malagaferieboligudlejning.dk och testvinnare.se Han är också delaktig i sajten Loppet, där man kan annonsera gratis. RJ Webdesign kan hjälpa dig med allt från enkla webbsidor med redigeringsprogram för enkelt underhåll till kompletta databasdrivna siter med dynamiskt innehåll. RJ Webdesign integrerar mjukvara som öppnar möjligheten för dig att uppdatera din webbsida, så att du alltid har kontroll över den. I samarbete med översättningsbyråer utvecklar RJ Webdesign webbsidor anpassade för olika språk; bl.a. spanska, danska, engelska och svenska. Optimering för Google/sökmotor kan göras som separat projekt på befintligt system eller ingå i produktionen av ny hemsida. RJ Webdesign Ägs och drivs av Reine Johansson som har över 15 års yrkeserfarenhet inom programmering och websupport, bl.a. på Ericsson GSM och Ericsson Microwave i Göteborg, Sverige, Roche i Schweiz, Testwinner.co.uk i Storbritannien och som egen konsult de senaste 7 åren bla i Spanien. Reine har skapat och drivit http:// testvinnare.se som 2009 nominerades till SIME 09 Rising Stars of the North Award och mobila webbsidan http://mobil.testvinnare.se som blev utnämndes till en av Sveriges bästa mobila webbsidor 2007 och 2008 av tidningen mobil.